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

1. 자바스크립트 실행 환경

- 브라우저와 Node.js는 용도가 다르다.

 브라우저 : HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것

 Node.js : 브라우저 외부에서 자바스크립트 실행 환경을 제공.

- 따라서 브라우저와 Node.js에서 ECMAScript외에 추가로 제공되는 기능은 호환되지 않음

 (ex. 브라우저의 DOM API, Node의 File I/O)

- 브라우저는 ECMAScript와 클라이언트 사이드 Web API를 지원.

- Node.는 ECMAScript와 Node.js고유의 API 지원.

 

2. 웹 브라우저

  2.1 개발자 도구

  - F12로 열 수 있다.

  - Element, Console, Sources, Network, Application 이 존재한다.

 

  2.2 콘솔

  - 에러가 나거나 코드의 실행결과를 확인할 수 있다.

 

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

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

 

  2.4 디버깅

  - 에러 발생위치를 클릭하면 코드를 디버깅 할 수 있는 Source패널로 이동한다.

  - source패널에서 원하는위치의 line번호를 클릭하면 break point를 걸 수 있다.

  - 또한 디버깅모드로 접속해 변수에 할당된 값들을 확인할 수 있다.

 

3. Node.js

  3.1 Node.js와 npm 소개

  - 라이언 달이 발표한 Node.js는 크롬 V8자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.

  - npm(node pakage manager)은 자바스크립트 패키지 매니저이다.

  - Node.js에서 사용 할 수 있는 모듈들을 패키지화 해서 모아둔 저장소 역활과, 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다.

 

  3.2 Node.js REPL (Read Eval Print Loop)

  - 터미널에서 node를 입력하면 간단한 자바스크립트 코드를 실행해 결과를 볼 수 있다.