3.1 자바스크립트 실행 환경
브라우저와 Node.js 모두 자바스크립트를 실행시킬 수 있는 환경이지만, 둘은 용도가 다르다. 따라서 두 환경에서 ECMAScript를 제외한 다른 기능들은 호환되지 않는다.
-
브라우저 : 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링한다.
➡️ ECMAScript + Client-side APIs(DOM, fetch, Canvas 등) -
Node.js : 브라우저 외부에서 자바스크립트를 실행할 수 있는 환경을 제공한다.
➡️ ECMAScript + Node.js Host APIs
3.2 웹 브라우저
이 책에서는 구글 크롬 브라우저를 사용한다. 크롬은 ECMAScript 사양을 준수하고 있으며, 시장 점유율도 가장 높다. 크롬 브라우저의 V8 엔진은 Node.js에서도 사용하고 있다.
✅ 개발자 도구
개발자 도구(DevTools)는 브라우저에서 언제든지 열어서 사용할 수 있으며, 별도로 설치할 필요가 없다. 개발자 도구 단축키는 다음과 같다.
- 윈도우 :
F12또는Ctrl+Shift+I - macOS :
command+option+I
다음은 자주 사용되는 개발자 도구의 기능이다.
| 패널 | 설명 |
|---|---|
| Elements | 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집 내용이 저장되지는 않는다. |
| Console | 로딩된 웹페이지의 에러를 확인하거나 console.log 메서드의 실행 결과를 확인할 수 있다. |
| Sources | 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다. |
| Network | 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다. |
| Application | 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다. |
✅ 콘솔
콘솔(Console) 패널은 자바스크립트 코드의 에러를 확인하기 가장 좋은 곳이다. 보통 코드에서 console.log 메서드를 사용해 확인한다. 콘솔은 REPL(Read Eval Print Loop: 입력 수행 출력 반복) 환경으로 사용할 수도 있다.
3.3 Node.js
프로젝트의 규모가 커질수록 React, Angular와 같은 라이브러리나 Babel, Webpack, ESLint와 같은 여러 도구를 사용하게 되는데, 이때 필요한 것이 Node.js와 npm 이다. 이전 챕터에서 배웠듯 Node.js는 크롬 v8 자바스크립트 엔진으로 빌드 된 자바스크립트 런타임 환경이다. npm(Node Package Manager)은 자바스크립트의 패키지 매니저로 Node.js에서 사용할 수 있는 모듈을 패키지화해서 모아둔 저장소이며 패키지의 설치 및 관리를 위한 CLI(Command Line Interface)도 제공한다.
💡모듈
모듈이란 애플리케이션을 구성하는 개별적 요소들로, 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션이 실행되었을 때 비로소 애플리케이션의 일원이 된다. 모듈은 기능별로 작성되므로 개발 효율성과 유지 보수성에 좋다.
자바스크립트는 웹 페이지의 보조 기능을 수행하기 위해 만들어졌기 때문에 다른 언어에 비해 부족한 부분들이 있는데, 그중 대표적인 것이 모듈 기능이 없다는 것이다. 이를 보완하기 위해 사용되는 것이 CommonJS와 AMD(Asynchronous Module Definition)이다. 이 둘은 라이브러리가 아닌 사양(spec)이다.
💡CommonJS
AMD 방식은 CommonJS에 비해 문법이 까다로우며, 비동기 방식으로 동작한다. AMD를 지원하는 대표적인 모듈 로더는 RequireJS이다.
CommomJS 방식은 AMD에 비해 문법이 간단하고 동기 방식으로 동작한다. Node.js가 채택한 모듈 시스템의 표준이 바로 CommonJS이다. 현재 Node.js는 독자적인 업데이트가 이루어졌기 때문에 CommonJS와 완벽하게 동일하지는 않지만 기본적으로 CommonJS의 방식을 따르고 있다.
Node.js를 다운로드하기 위해 웹사이트에 접속하면 LTS(Long Term Support) 버전과 Current 버전을 다운로드할 수 있는 버튼이 있다. LTS 버전은 장기적인 지원이 가능한 버전으로 안정적이고, Current 버전은 최신 기능을 제공하는 버전으로 업데이트가 자주 일어나기 때문에 안정적이지 않다.
Node.js를 설치하면 npm 또한 함께 설치되며, 다음 명령어로 버전을 출력할 수 있다.
$ node -v
$ npm -v✅ REPL
REPL은 코드를 입력하면 출력물을 바로 확인하는 과정으로, cmd, powershell, terminal과 같은 인터프리리터 환경에서 가능하다. 컴파일 과정이 없고 디버깅 및 수정이 간편하다는 장점이 있지만, 컴파일 과정이 없기 때문에 느리다는 단점이 있다.
$ node터미널에서 위 명령어를 입력하면 프롬프트가 > 로 변경되면서 Node.js가 실행된다.
$ node index.js자바스크립트 파일을 실행하기 위해서는 이렇게 파일 이름을 함께 입력하면 된다. 확장자(.js)는 생략이 가능하다.
Node.js REPL을 종료하기 위해서는 Ctrl + C 를 두 번 입력하면 된다.
3.4 비주얼 스튜디오 코드
이 파트에 대한 내용은 생략하도록 하겠다! 이미 여러모로 유용하게 사용하고 있기 때문에~😋
