3.1 자바스크립트 실행 환경

모든 브라우저와 Node.js는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 따라서 자바스크립트는 브라우저와 Node.js 환경에서 실행할 수 있다.

주의할 것은 브라우저와 Node.js의 용도가 다르다는 점이다.

• 브라우저는 HTML, CSS, 자바스크립트를 실행해 웹 페이지를 브라우저 화면에 렌더링 하는 것이 목적이다.
• Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 목적이다.

따라서 브라우저와 Node.js 모두 ECMAScript를 실행할 수는 있지만 그 이외 추가로 제공하는 기능이 호환되지는 않는다.

예를 들어 브라우저는 DOM API를 기본적으로 제공하지만, Node.js에서는 DOM을 직접 다룰 필요가 없기 때문에 DOM API를 제공하지 않는다. 반대로 Node.js에서는 파일을 생성/수정 할 수 있는 파일 시스템을 기본 제공하지만 브라우저는 보안상의 이유로 제공하지 않는다.

• 공통 제공 : ECMAScript
• 브라우저 제공 : DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등의 클라이언트 사이드 Web API
• Node.js 제공 : Node.js Host APIs

3.2 웹 브라우저

개발자 도구

크롬 브라우저가 제공하는 개발자 도구(DevTools)는 웹 애플리케이션 개발에 필수적인 강력한 도구다. 브라우저에 기본 내장되어 있으며 아래 단축키를 통해 사용할 수 있다.

• WindowOS : F12 or Ctrl + Shift + I
• MacOS : cmd + option + I

개발자 도구는 웹 개발에 다양한 기능을 제공하며 자주 사용하는 기능은 아래와 같다.

• Elements
  로딩된 웹 페이지의 DOM과 CSS를 편집해 렌더링된 뷰를 확인 가능
  편집한 내용이 저장되지는 않으며, 웹 페이지가 의도되로 작동하지 않을 경우 유용하다.
• Console
  로딩된 웹 페이지의 에러를 확인하거나 소스코드에 작성한 console.log 실행 결과를 확인 가능
• Sources
  로딩된 웹 페이지의 자바스크립트 코드를 디버깅 가능
• Network
  로딩된 웹 페이지 관련 네트워크 요청 정보와 성능을 확인 가능
• Application
  웹 스토리지, 세션, 쿠키를 확인하고 관리 가능

콘솔

개발자 도구의 콘솔 패널은 자바스크립트 코드에서 에러가 발생해 정상적으로 동작하지 않을 경우 우선 살펴봐야 하는 곳이다. 구현 단계에서는 에러가 빈번히 발생하므로 항상 콘솔을 열어둔 상태에서 개발하는 것이 좋다. 그렇지 않으면 에러가 발생했는지 조차 알 수 없는 경우가 있다.

또한 구현 단계에서 디버깅을 실행하는 것보다 간편하게 코드 실행 결과를 확인하며 개발할 수 있으며 자바스크립트 코드를 직접 입력해 결과를 확인하는 REPL(Read Eval Print Loop) 환경으로 사용할 수도 있다.

브라우저에서 JS 실행

브라우저는 HTML 파일 로드 시 script 태그에 포함된 자바스크립트 코드를 실행한다. 만약 코드 내에서 console.log가 호출됐다면 콘솔에 실행 결과가 출력된다.

디버깅

에러 정보의 오른쪽에 위치한 링크를 클릭하면 자바스크립트 코드를 디버깅할 수 있는 Sources 패널로 이동한다. 에러 발생 위치에는 빨간 밑줄이 표시되고, 마우스를 올리면 에러 정보가 표시된다. 에러 정보를 확인하여 실제 코드를 수정해가며 디버깅 할 수 있다.

3.3 Node.js

클라이언트 사이드와 같이 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로 개발할 수 있지만 프로젝트 규모가 커지면서 React, Angular, Ladash 같이 프레임워크나 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러가지 도구를 사용할 필요가 있다. 이때 Node.js와 npm이 필요하다.

Node.js와 npm 소개

• Node.js
  라이언 달이 발표한 Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
  다시 말해 브라우저 이외 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이다.

• npm (node package manager)
  자바스크립트의 패키지 매니저
  Node.js에서 사용할 수 있는 모듈을 패키지화하여 모아둔 저장소 역할과 패키지 설치/관리를 위한 CLI 제공
  자신의 패키지를 공개할 수도 있고, 패키지를 검색해 재사용할 수도 있다.

Node.js 설치

1. Node.js 홈페이지 접속
2. 다운로드 버튼을 통해 원하는 버전을 다운로드
   • LTS(Long Time Support) : 장기적으로 안정된 지원 보장
   • Current : 최신 기능을 제공하는 반면 업데이트가 발생하여 안정적이지 않음
3. 설치가 완료되면 터미널에서 버전을 출력하여 정상 설치 여부 확인

$ node -v
$ npm -v

Node.js REPL

Node.js는 REPL(Read Eval Print Loop)를 사용해 자바스크립트 코드를 실행하여 결과를 확인할 수 있다. 아래 명령어를 실행하여 프롬프트가 > 로 변경되면 자바스크립트 코드를 실행할 수 있다.

$ node

자바스크립트 파일을 실행하려면 node 명령어 뒤에 파일 이름을 입력한다.

$ node index.js

REPL 환경을 종료하기 위해서는 Ctrl + C 를 두 번 입력한다.

Node.js REPL

3.4 Visual Studio Code

VSCode 설치

코드 에디터를 사용하면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등 강력하고 편리한 기능을 활용할 수 있다.

VSCode 홈페이지

내장 터미널, Live Server, Code Runner 등의 확장 프로그램 설치 내용은 생략합니다!