3.1 자바스크립트 실행 환경
자바스크립트는 모든 브라우저 환경(내부) 또는 Node.js 환경(외부)에서 실행할 수 있다.
코드 역시 동일하게 동작한다.
그러나 브라우저와 Node.js는 서로 용도가 다르다.
- 브라우저 : HTML + CSS + JS를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것이 목적
- Node.js : 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 목적
- 브라우저는 DOM API(파싱된 HTML요소를 선택하거나 조작하는 기능의 집합)를 기본적으로 제공하지만, Node.js는 DOM API를 제공하지 않는다.
- Node.js에서는 파일 시스템(파일을 생성하고 수정할 수 있는 시스템)을 기본 제공하지만, 브라우저는 이를 지원하지 않는다.
웹 어플리케이션의 자바스크립트는 사용자 컴퓨터의 브라우저에서 동작한다.
여기서 브라우저를 통해 사용자 컴퓨터의 파일을 삭제/수정/생성할 수 있는 보안상의 이유로 브라우저 환경의 자바스크립트는 파일시스템을 제공하지 않는다.
3.2 웹 브라우저
웹 브라우저들 중 구글 크롬(Chrome)은 ECMAScript 사양을 준수하는 것은 물론 시장 점유율도 가장 높다.
개발자 도구
크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 가장 필수적인 강력한 도구이다.
브라우저에 기본 내장 되어 있으므로 설치할 필요가 없으며, 단축키로 열 수 있다.
| 운영체제 | 단축키 |
|---|---|
| 윈도우 | F12 / Ctrl + Shift + i |
콘솔(console)
자바스크립트에서 에러가 발생할 때, 가장 우선적으로 살펴봐야 할 곳이다.
에러가 발생한 경우가 아니더라도, 구현 단계에서 간편하게 코드의 실행 결과를 확인하면서 개발을 진행하기 위해 console.log 메서드를 사용하는 경우가 많다.
브라우저에서 자바스크립트 실행
브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행한다.
만약 자바스크립트 코드 내에서 console.log 메서드가 호출되었다면 콘솔에 실행 결과가 출력될 것이다.
디버깅 (source)
source패널에서 에러를 디버깅할 수 있다.
3.3 Node.js
간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있다.
그러나 타 프레임워크 또는 라이브러리를 도입하거나 다양한 도구를 사용할 필요가 있는데,
이 때 Node.js와 npm이 필요하다.
node.js와 npm 소개
Node.js는 크롬 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경으로,
간단히 말해 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이라는 것이다.
npm은 자바스크립트 패키지 매니저로, 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과, 패키지 설치 및 관리를 위한 CLI를 제공한다.
출처 : 이웅모, 『모던 자바스크립트 deep dive』, 위키북스(2020), p17-33.
