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

3.1 자바스크립트 실행 환경

모든 브라우저와 Node.js에는 자바스크립트 엔진을 내장하고 있지만 브라우저와 Node.js는 용도가 다르다.
브라우저는 ECMAScript, DOM, BOA, Canvas, XMLHttpRequest, fetch 등의 클라이언트 사이드 Web API를 지원하고, Node.js는 ECMAScript와 Node.js 고유의 API를 지원한다.

3.2 웹 브라우저

다양한 웹 브라우저중 크롬 브라우저는 시장점유율이 가장 높으며 크롬 브라우저의 V8 자바스크립트 엔진은 Node.js에서도 사용되고 있다.

3.2.1 개발자도구

• Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다.
• Console : 로딩된 웹페이지의 에러를 확인하거나, 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.
• Sources : 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.
• Network : 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.
• Application : 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

3.2.2 콘솔

개발자 도구의 Console 패널에서 표시되는 프롬프트 창으로 에러를 확인할 수 있다.

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

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

3.2.4 디버깅

디버깅이란 브레이크 포인트를 걸면서 에러 메세지를 확인하고, 에러가 발생한 원인을 제거하는것이다.

3.3 Node.js

프로젝트의 규모가 커짐에 따라 React, Angular, vue 같은 프레임워크나 라이브러리를 도입하거나, Babel, Webpack, ESLint 등의 도구를 사용하게되는데 이때, Node.js와 npm이 필요하다.

3.3.1 Node.js와 npm 소개

Node.js는 2009년 라이언달이 발표한 크롬 V8 자바스크립트 엔진으로 드된 자바스크립트 런타임 환경이다. 즉, 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작할수 있게 하는 실행 환경을 뜻한다.
npm은 자바스크립트 패키지 매니저로 Node.js에서 사용할 수 있는 모듈들을 패키지화 해서 모아둔 저장소 역할을 한다.

3.3.2 Node.js 설치

3.3.3 Node.js REPL

Node.js가 제공하는 REPL(Read Eval Print Loop)를 사용해 간단한 자바스크립트 코드를 실행할 수 있다.

3.4 비주얼 스튜디오 코드

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

브라우저의 콘솔이나 Node.js REPL에서 큰 규모의 개발을 하기에는 부족함이 많아 에디터를 사용한다.

3.4.2 내장 터미널

3.4.3 Code Runner 확장 플러그인

Code Runner 확장 플러그인을 사용하면 VS Code의 내장 터미널에서 단축키를 사용해 소스코드를 쉽게 실행할 수 있다.

3.4.4 Live Server 확장 플러그인

Live Server 확장 플러그인을 사용하면 소스코드를 수정할 때마다 수정사항을 브라우저에 자동으로 반영해준다.