[read] 모자딥 - 03장. 자바스크립트 개발 환경과 실행 방법

3.1 자바스크립트 실행 환경

• 모든 브라우저와 Node.js는 js를 해석하고 실행할 수 있는 js 엔진을 내장하고 있음
• 브라우저와 Node.js는 용도가 다르다.
  ✔ 브라우저는 웹페이지를 브라우저 화면에 렌더링 하는 것이 주된 목적.
  ✔ Node.js는 브라우저 외부에서 js 실행 환경을 제공하는 것이 주된 목적.
  ex) 브라우저는 DOM API 제공, Node.js는 파일 시스템 제공
  

3.2 웹 브라우저

크롬 기준으로 설명

3.2.1 개발자 도구

• 웹 애플리게이션 개발에 필수적인 도구. 크롬에 내장되어 있음
• Elements, Console, Sources, Network, Application 과 같은 기능 내장

3.2.2 콘솔

• 에러 발생시 우선 확인 해야 하는 곳
• console.log(...)를 사용하여 콘솔에 간편하게 출력 가능. 이를 사용해 디버깅을 대체하기도 함
• 프롬프트에 js코드 입력 시 다음 줄에 실행결과 표시 됨.

3.2.3 브라우저에서 자바스크립트 실행

• 브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행한다.

3.2.4 디버깅

• 개발자 도구로 디버깅 가능 (Sources 패널)
• 에러가 발생한 코드 왼쪽의 라인번호에 브레이크포인트를 걸고 디버깅 모드로 들어감

3.3 Node.js

3.3.1 Node.js와 npm 소개

• 2009년, 라이언 달이 발표. 크롬 V8 자바스크립트 엔진을 빌드된 자바스크립트 환경
• npm(node package manager) : 자바스크립트 패키지 매니저
  Node.js에서 사용할 수 있는 모듈들을 패키지화 해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI 제공

3.3.2 Node.js 설치

• node 홈페이지에서 설치 가능

// 설치 확인
$ node -v
$ npm -v

3.3.3 Node.js REPL

• 터미널에서 간단한 코드를 실행해 줄 수 있게 해주는 프로그램
• $ node 명령어 실행으로 js 코드 실행해볼 수 있음.

3.4 비주얼 스튜디오 코드

3.4.1 비주얼 스튜디오 코드 설치

• 브라우저 콘솔과 REPL에서 모자른 부분을 해결하기 위해 코드 에디터를 사용

3.4.2 내장 터미널

• vs code에는 터미널이 내장되어 있음. node.js 명령어로 자바스크립트 파일 실행 가능

3.4.3 Code Runner 확장 플러그인

• vs code의 내장 터미널에서 단축키를 사용해 다양한 프로그래밍 언어로 구현된 소스코드를 간단히 실행할 수 있는 플러그인

3.4.4 Live Server 확장 플러그인

• 클라이언트 사이드 API를 실행하기 위해 브라우저에서 코드를 실행시켜주는 플러그인