[모던 자바스크립트 Deep Dive] 3장

[모던 자바스크립트 Deep Dive] 3장

---

 

03장 자바스크립트 개발 환경과 실행 방법.

 

 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다.  Node.js 환경에서도 자바스크립트를 실행할 수 있으나 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다. 예를 들어, Node.js 는 DOM API를 제공하지 않는다.

 

3.2 웹브라우저

 이 책에서는 구글 크롬 브라우저를 사용한다. 크롬은 ECMAScript 사양을 준수하고 시장 점유율이 가장 높다. 크롬 브라우저는 개발자 도구를 브라우저에 기본 내장되어 있어 별도의 설치가 필요 없다. (윈도우: F12 or Ctrl+ Shift+ I)

 

3.2.2  콘솔

 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳.

에러가 발생했을 때 console

구현 단계에서 디버깅을 실행하는 것보다 간편하게 'console.log' 메서드를 사용해 실행결과를 확인할 수 있다.

 

3.3 Node.js

 크롬 v8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. 설치가 완료되면 터미널(명령 프롬프트)에서 Node.js와 npm의 버전을 출력해 정상적으로 설치되었는지 확인한다. 현재 버전은 책과 다름.

$ node -v
v14.3.0
$ npm -v
6.14.5

3.4 비주얼 스튜디오 코드(VS Code)

 브라우저의 콘솔 또는 Node.js의 REPL에서 자바스크립트 코드를 실행할 수 있지만 애플리케이션을 개발하는 단계에서 사용하기에는 부족함이 많다. 코드 에디터를 사용하면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등 강력하고 편리한 기능을 활용할 수 있다. 이 책에서는 마이크로소프트의 Vs Code를 사용해 자바스크립트를 실행한다. 

Vs Code에는 터미널이 내장되어 있다. 단축키는 Ctrl + `

 

3.4.3 Code Runner 확장 플러그인

 VS Code에서는 확장 플러그인 저장소인 "마켓플레이스"를 통해 다양한 확장 플러그인을 다운로드해서 설치할 수 있다. Code Runner확장 플러그인을 사용하면  VS Code의 내장 터미널에서 단축키를 사용해 자바스크립트를 비롯해 다양한 프로그래밍 언어로 구현된 소스코드를 간단히 실행할 수 있다. Code Runner 확장 플러그인은 Node.js 환경을 사용해 자바스크립트를 실행한다. 따라서 Wep API가 포함된 소스코드는 Node.js 환경에서는 알 수 없기 때문에 Code Runner확장 플러그인을 통해 실행하지 말고 브라우저 환경에서 실행해야 한다. 

 

3.4.4 Live Server 확장 플러그인

 소스코드를 수정할 때마다 수정 사항을 브라우저에 자동으로 반영해준다. "Go Live"라는 버튼을 클릭하면 가상 서버가 기동되어 브라우저에 HTML 파일이 자동 로딩된다.