땃쥐네
[JavaScript] 자바스크립트 시작하기 본문
이 글에서는 JavaScript 환경을 짤막하게 소개하고 이를 실습하기 위한 환경을 구축할 것이다.
자바스크립트 실행 환경
- 모든 웹 브라우저들은 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다.
- 또한 아래에서 후술할 Node.js 환경 역시 자바스크립트 엔진을 내장하고 있다.
- 자바스크립트는 브라우저 또는 Node.js 환경에서 실행될 수 있다. 더 정확히 말하면 이들은 자바스크립트의 코어에 해당하는 ECMAScript를 공통적으로 실행할 수 있다.
- ECMAScript : Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어. '자바스크립트'를 표준화하기 위해 만들어진 언어
- 각각의 브라우저는 ECMAScript 실행 엔진과 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker와 같은 클라이언트 사이드 Web API를 지원한다.
- Node.js는 ECMAScript 실행엔진과 Node.js 고유의 API를 지원한다. 하지만, 클라이언트 사이드의 Web API는 제공되지 않는다.
웹 브라우저
브라우저는 HTML 문서를 로드하면, script 태그에 포함된 자바스크립트 코드를 실행한다.
Node.js 환경과 NPM
간단한 클라이언트 사이드에서 동작할 수 있는 간단한 웹 애플리케이션은 브라우저만으로 개발할 수 있지만, 프로젝트의 규모가 커져서 React, Vue.js 와 같은 라이브러리, 프레임워크를 도입하고 Babel, Webpack, ESLint와 같은 여러가지 도구들을 통합해서 사용하여 브라우저 환경 밖에서 자바스크립트를 동작시키려면 Node.js, npm이 필요하다.
Node.js는 브라우저 외의 환경에서 자바스크립트를 실행할 수 있는 실행 환경이고
npm은 Node.js 환경에서 사용할 수 있는 모듈들을 패키지화 해서 모아둔 저장소 역할 및 패키지 설치 관리를 위한 CLI를 제공한다.
자바스크립트 학습을 위해 Node.js 설치
서두가 길었다.
자바스크립트를 학습하고, 직접 코드를 작성하고 실행하면서 여러 결과물을 학습해야하는데 웹 브라우저 환경의 콘솔에 입력해서 실행하면서 학습하는 것에는 한계가 있다.
코드 편집기의 힘을 빌려 소스코드를 편리하게 작성하고 브라우저 밖 Node.js 환경에서 자바스크립트 코드를 실행하면서 자바스크립트를 익히는 것이 편리하다.
그래서 Node.js를 설치할 것이다. 물론 본격적으로 Node.js를 사용하는 방법에 대해 학습하는 것은 나중으로 미룰 것이다.
지금은 그저 브라우저 밖에서 자바스크립트를 실행할 수 있도록 하기 위함이다.
Windows 설치
- Node.js 설치 : https://nodejs.org/ko/
- 왼쪽의 LTS 버전은 장기 지원 버전이고, 오른쪽의 Current 버전은 최신의 기능을 제공하지만 업데이트가 자주 발생해서 안정적이지 않을 수 있다. 필자는 LTS로 다운로드 받아 설치하기로 했다.
다른건 예를 누르며 넘어가는데 혼동이 오는 부분이 발생한다.
자동적으로 필요한 툴들을 설치하는 옵션이다. 나는 선택하지 않았다.
node -v
npm -v기존에 켜져 있던 터미널이 있다면 다시 끄고 실행하여 위 두 명령어를 입력하고, node와 npm이 정상적으로 설치된 것을 확인할 수 있다.
코드 편집기 또는 IDE 설치
자바스크립트 코드를 편집하기 위한 도구로는 주로 무료인 Visual Studio Code, JetBrain사의 유료 제품인 IntelliJ Ultimate, WebStorm이 있다.
Visual Studio Code는 무료이고 커뮤니티가 많이 활성화되어 있어서 많은 프론트엔드 개발자분들에게 사랑을 받고 있다.
돈을 쓰더라도 좀 더 편리한 개발 환경을 사용하고 싶다면 유료판인 인텔리제이 얼티밋 또는 웹 스톰을 고려해볼만 하다.
근데 이들 차이가 애매모호한데, 이들을 비교해보면 대충 다음과 같다.
IntelliJ Ultimate : Java, Kotlin, Spring, ... + (JavaScript, TypeScript, HTML, CSS, Node.js, Angular, React, Vue.js)
WebStorm : (JavaScript, TypeScript, HTML, CSS, Node.js, Angular, React, Vue.js, ...)
이라 보면 된다. 인텔리제이 얼티밋을 쓰고 있다면 WebStrom이 사실 필요 없고 인텔리제이를 그대로 써도 무방하며, 그냥 순전히 자바스크립트에 특화된 IDE를 쓰는 것으로 충분하면 WebStorm을 사용하면 된다.
+ 대학교 재학생(방통대 등 포함)인 경우 학교 차원에서 교육용으로 지원이 가능하니 적극 활용하도록 하자. 최근에는 회사 차원에서 인텔리제이 라이센스를 지원해주는 경우도 많아지고 있다.
나는 IntelliJ, WebStorm 계열을 사용하므로 이들 기준으로 이야기를 할 것이다.
Toolbox를 통한 설치
- 다운로드 : 링크
- JetBrain의 여러가지 IDE들을 통합적으로 간편하게 관리할 수 있다.
- IntelliJ, WebStorm, CLion, Rider, RubyMine, DataGrip과 같은 다른 JetBrain의 도구들을 함께 사용한다면 Toolbox를 통해 통합적으로 각각의 개발 도구들을 관리하면 편리한데 이런 사용자들은 Toolbox를 통해 개발 도구를 설치하는 것이 편리하다. 나도 Toolbox를 통해 JetBrain 사의 도구들을 관리하고 있다.
참고자료
- 모던 자바스크립트 Deep Dive