[모던 자바스크립트 Deep Dive] 3장 자바스크립트 개발 환경과 실행 방법

이웅모, 위키북스

---

3.1 자바스크립트 실행 환경

브라우저 환경 또는 Node.js 환경에서 실행, But 주 목적이 다름

- 브라우저 환경:

    (1) HTML, CSS,자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링

    (2) 파일 시스템 미제공(보안상의 이유로 당연함)

    (3) DOM, BOM, Canvas 등 클라이언트 사이드 Web API 지원

- Node.js 환경:

    (1) 브라우저 외부에서 자바스크립트 실행 환경을 제공 → DOM API 미제공

    (2) 파일 시스템 기본 제공

    (3) 클라이언트 사이드 Web API 미지원, ECMAScript와 Node.js 고유의 API 지원

 

3.2 웹 브라우저

1. 개발자 도구

주요 기능(패널)

- Elements: 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 일시적으로 확인해볼 수 있다. 실제로 저장되는 것은 X

- Console: 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.

- Sources: 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.

- Network: 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.

- Application: 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

 

2. 콘솔

- 에러 발생 확인

- console.log 메서드 사용: console.log(...)에서 소괄호 안의 코드를 평가해 그 결과를 콘솔에 출력하는 함수

- REPL 환경으로 사용: 자바스크립트 코드를 입력해 결과 확인. Read Eval Print Loop - 입력 수행 출력 반복

    * 여러 줄로 이뤄진 코드를 실행할 때 줄바꿈은 Shift 키를 누른 상태에서 엔터 키를 누름

 

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

HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드 실행

 

4. 디버깅

에러 정보의 오른쪽에 에러 발생 위치를 나타내는 링크를 클릭하면 디버깅할 수 있는 Sources 패널로 이동된다.

 

3.3 Node.js

1. Node.js와 npm 소개

Node.js: 자바스크립트 런타임 환경

npm(node package manager): 자바스크립트 패키지 매니저.

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

 

2. Node.js 설치

http://nodejs.org 에서 설치 가능

Node.js — 어디서든 JavaScript를 실행하세요

- LTS 버전: Long Term Support. 장기적으로 안정된 지원 보장, 실제 개발 환경에 적합

- Current 버전: 최신 기능 제공하지만 업데이트가 발생해 안정적이지 않을 수 있음

 

3. Node.js REPL

Node.js가 제공하는 REPL을 사용하면 간단한 자바스크립트 코드를 실행해 결과를 확인해볼 수 있다.

 

3.4 비주얼 스튜디오 코드

생략