3.1 자바스크립트 실행 환경

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 브라우저 뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다. 따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다. 기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작한다.

그런데 한 가지 주의해야 할 점은 브라우저와 Node.js는 용도가 다르다는 것이다.
브라우저는 HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만 Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다. 따라서 브라우저와 Node.js 모두 자바스크립트 코어인 ECMAScript를 실행할 수 있지만 Node.js에서 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다.

예를 들어, 브라우저는 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공한다. 하지만 브라우저 외부에서 자바스크립트 개발 환경을 제공하는 것이 주 목적인 Node.js는 DOM API를 제공하지 않는다. 브라우저 외부 환경에서는 HTML 요소를 파싱해서 객체화한 DOM을 직접 다룰 필요가 없기 때문이다.

웹 크롤링
서버에서 웹사이트의 콘텐츠를 수집하기 위해 웹 사이트에서 HTML 문서를 가져온 다음, 이를 가공해서 필요한 데이터만 추출하는 경우가 있다. 이를 웹 크롤링이라 한다. 서버 환경은 DOM API를 제공하지 않으므로 cheerio 같은 DOM 라이브러리를 사용해 HTML 문서를 가공하기도 한다.

반대로 Node.js에서는 파일을 생성하고 수정할 수 있는 파일 시스템을 기본 제공하지만 브라우저는 이를 지원하지 않는다.(Web API인 FileReader 객체를 사용해 사용자가 지정한 파일을 읽어 들이는 것은 가능하다).

웹 애플리케이션의 자바스크립트는 사용자 컴퓨터의 브라우저에서 동작한다. 만약 브라우저를 통해 다운로드되어 실행되는 자바스크립트가 사용자 컴퓨터의 로컬 파일을 삭제하거나 수정하고 생성할 수 있다면 이는 사용자 컴퓨터가 악성 코드에 그대로 노출된 것과 마찬가지다. 따라서 보안상의 이유로 브라우저 환경의 자바스크립트는 파일 시스템을 제공하지 않는다.

이처럼 브라우저는 ECMAScript와 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimation Frame, SVG, Web Storage, Web Worker 같은 클라이언트 사이드 Web API를 지원한다. Node.js는 클라이언트 사이드 Web API를 지원하지 않고 ECMAScript와 Node.js 고유의 API를 지원한다.

3.2 웹 브라우저

다양한 웹 브라우저가 있지만 이 책에서는 구글 크롬 브라우저를 사용한다. 크롬은 ECMAScript 사양을 준수하는 것은 물론이고 시장 점유율도 가장 높다. 2021년 1월 구글 크롬 브라우저의 점유율은 65.47%로, 2위인 사파리(16.97%)를 크게 앞선다.

크롬 브라우저의 V8 자바스크립트 엔진은 Node.js에서도 사용하고 있다.

3.2.1 개발자 도구

크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구다. 개발자 도구는 브라우저에 기본 내장되어 있으므로 별도로 설치할 필요가 없다. 개발자 도구는 다음의 단축키로 열 수 있다.

운영체제	단축키
윈도우	F12 또는 Ctrl + Shift + I
macOS	option + command + i

개발자 도구는 웹 개발에 유용한 다양한 기능을 제공한다. 자주 사용하는 개발자 도구의 기능은 다음과 같다.

패널	설명
Elements	로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다. 웹페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있다.
Console	로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.
Sources	로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.
Network	로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.
Application	웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

3.2.2 콘솔

개발자 도구의 Console 패널(이하 콘솔)은 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳이다. 구현 단계에서는 에러가 빈번하게 발생하므로 항상 콘솔을 열어둔 상태에서 개발하는 것이 좋다. 콘솔을 열어두지 않으면 에러가 발생했는지조차 알 수 없는 경우가 있기 때문이다.

에러가 발생한 경우가 아니더라도 콘솔은 매우 유용하다. 구현 단계에서 디버깅을 실행하는 것보다 간편하게 코드의 실행 결과를 확인하면서 개발을 진행하기 위해 console.log 메서드를 사용하는 경우가 많다.console.log(...)는 소괄호 안의 코드를 평가해서 그 결과를 콘솔에 출력하는 함수다.

콘솔은 자바스크립트 코드를 직접 입력해 그 결과를 확인할 수 있는 REPL(Read Eval Print Loog: 입력 수행 출력 반복) 환경으로 사용할 수도 있다. 개발자 도구의 Console 패널을 클릭하면 다음과 같이 프롬프트(>)가 표시되는 것을 확인할 수 있다.

프롬프트에 자바스크립트 코드를 입력하면 다음 줄에 실행 결과가 표시된다. 엔터 키를 입력하면 다음 프롬프트로 이동한다.

여러 줄로 이뤄진 자바스크립트 코드를 실행할 때 줄바꿈이 필요한 경우에는 Shift 키를 누른 상태에서 엔터키를 누른다.

자바스크립트 코드를 실행하는 중에 에러가 발생하면 에러의 내용이 콘솔에 출력된다.

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

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

3.2.4 디버깅

에러 정보의 오른쪽에 에러 발생 위치를 클릭하면 자바스크립트 코드를 디버깅할 수 있는 Sources 패널로 이동할 것이다.

에러가 발생한 위치에 밑줄이 표시되고, 그 위에 마우스를 올려보면 에러 정보가 표시된다.

에러가 발생한 코드 왼쪽의 라인 번호를 클릭해 브레이크포인트(중단점)를 걸고 다시 실행하면 디버깅 모드로 들어간다.

마우스 커서를 올려보면 변수의 값을 확인할 수 있다. 이처럼 디버깅은 먼저 에러 메시지를 확인하고 에러가 발생한 원인을 제거하는 것이다.

콘솔과 디버깅에 대한 자세한 내용
'Tools for Web Developers: 콘솔 사용'
'Tools for Web Developers: Chrome DevTools에서 자바스크립트 디버깅 시작하기'

3.3 Node.js

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

3.3.1 Node.js와 npm 소개

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

npm은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색해 재사용할 수도 있다.
모듈화와 npm

3.3.2 Node.js 설치

Node.js를 설치하기 위해 Node.js의 웹사이트(http://nodejs.org)에 접속해보자.
Node.js 웹사이트에 접속하면 두 개의 다운로드 버튼이 보이는데 왼쪽은 LTS 버전, 오른쪽은 Current 버전을 다운로드하는 버튼이다. LTS 버전은 장기적으로 안정이 지원이 보장된다. 반면 Current 버전은 최신 기능을 제공하지만 업데이트가 발생하는 버전으로 안정적이지 않을 수 있다. 실제 개발 환경이라면 LTS 버전을 설치하는 것이 좋지만 학습을 위해 최신 기능을 제공하는 Current 버전을 다운로드하자.

'14.3.0 Current' 버튼을 클릭하면 사용자의 운영체제에 적합한 설치 파일을 다운로드해서 설치할 수 있다. 이때 npm도 함게 설치된다. Node.js는 아래의 디렉터리에 설치되며, 버전에 따라 설치 위치는 바뀔 수 있다.

• 윈도우: C:\Program Files\nodejs\node.exe
• maxOS: /usr/local/bin/node

설치가 완료되면 터미널(윈도우에서는 명령 프롬프트)에서 Node.js와 npm의 버전을 출력해 정상적으로 설치되었는지 확인한다.

$ node -v
v14.3.0
$ npm -v
6.14.5

3.3.3 Node.js REPL

Node.js가 제공하는 REPL(Read Eval Print Loop)을 사용하면 간단한 자바스크립트 코드를 실행해 결과를 확인해 볼 수 있다. 터미널(윈도우에서는 명령 프롬프트)에서 다음과 같은 명령어를 실행해 보자.

$ node

프롬프트가 >로 변경되면 자바스크립트 코드를 실행해 볼 수 있다.

Welcome to Node.js v14.3.0
Type '.help' for more infomation.
> 1 + 2
3
> Math.max(1, 2, 3)
3
> [1, 2, 3].filter(v => v % 2)
[1, 3]

자바스크립트 파일을 실행하려면 node 명령어 뒤에 파일 이름을 입력한다. 파일 확장자 .js는 생략해도 된다.

$ node index.js

Ctrl + C 키를 두 번 입력하면 Node.js REPL이 종료된다.

3.4 비주얼 스튜디오 코드

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

브라우저의 콘솔 또는 Node.js의 REPL에서 자바스크립트 코드를 실행할 수 있지만 애플리케이션을 개발하는 단계에서 사용하기에는 부족함이 많다. 코드 에디터를 사용하면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등 강력하고 편리한 기능을 활용할 수 있다

마이크로소프트의 비주얼 스튜디오 코드(이하 VS Code)를 사용해 자바스크립트를 싫애해 보자. 머저 VS Code 웹사이트에 접속해 사용 중인 운영체제에 해당하는 설치 프로그램을 내려받아 설치한다.

3.4.2 내장 터미널

앞에서 설치한 VS Code를 실행한 다음, 적당한 위치에 프로젝트 폴더를 생성하고 자바스크립트 파일을 생성해보자. VS Code에는 터미널(윈도우에서는 명령 프롬프트)이 내장되어 있다. 내장 터미널을 열려면 Ctrl + ` 단축키를 누른다.

내장 터미널이 열리고 프롬프트가 나타나면 다음과 같은 Node.js 명령어로 자바스크립트 파일을 실행할 수 있다.

> node index

3.4.3 Code Runner 확장 플러그인

VS Code 에서는 확장 플러그인 저장소인 '마켓플레이스'를 통해 다양한 확장 플러그인을 다운로드해서 설치할 수 있다. Code Runner 확장 플러그인을 사용하면 VS Code의 내장 터미널에서 단축키를 사용해 자바스크립트를 비롯해 다양한 프로그래밍 언어로 구현된 소스코드를 간단히 실행할 수 있다.

Code Runner 확장 플러그인을 설치해 보자. VS Code의 확장 버튼을 클릭한 다음 'Code Runner'를 입력해 검색하고 Install 버튼을 클릭한다.

Code Runner 확장 플러그인에서는 다음과 같은 단축키를 사용해 현재 표시 중인 자바스크립트 파일을 실행할 수 있다.

운영체제	단축키
윈도우	Ctrl + Alt + N
macOS	control + option + N

[예제 03-03]

// myapp/index.js
const arr = [1, 2, 3]

arr.forEach(alert);

이 소스코드를 실행하면 'ReferenceError: alert is not defined'라는 에러가 발생한다. 브라우저에 알림창을 띄우는 alert 함수는 브라우저에서만 동작하는 클라이언트 사이트 Web API다. 즉, alert 함수는 브라우저 환경에서만 유효하다.

그런데 Code Runner 확장 플러그인은 Node.js 환경을 사용해 자바스크립트를 실행한다. 따라서 클라이언트 사이트 Web API인 alert 함수를 Node.js 환경에서는 알 수 없기 때문에 에러가 발생한 것이다. 따라서 클라이언트 사이트 Web API 가 포함된 소스코드는 Code Runner 확장 플러그인을 통해 실행하지 말고 브라우저 환경에서 실행해야 한다.

지금은 브라우저 환경과 Node.js 환경 모두에서 실행 가능한 ECMAScript 표준 빌트인 함수와 브라우저 환경에서만 실행 가능한 클라이언트 사이트 Web API를 구분하기 어려울 것이다.

3.4.4 Live Server 확장 플러그인

클라이언트 사이드 Web API가 포함된 자바스크립트 코드를 실행하려면 Node.js 환경이 아닌 브라우저에서 실행해야 한다. 브라우저에서 실행하려면 개발자 도구의 콘솔에서 실행하거나 자바스크립트 코드를 HTML에 삽입한 다음 HTML 파일을 브라우저에서 열어야 한다.

HTML 파일을 브라우저에서 직접 열어도 좋지만 파일 경로 문제가 발생할 수 있고, 소스코드를 수정할 때마다 매번 새로고침해야 하므로 번거롭다.

이때 Live Server 라는 확장 플러그인을 이용하면 소스코드를 수정할 때마다 수정 사항을 브라우저에 자동으로 반영해주기 때문에 매우 편리하다. VS Code의 확장 버튼을 클릭한 다음 'Live Server'를 검색하고 Install 버튼을 클릭한다.
Live Server 확장 플러그인이 설치되면 화면 아래에 'Go Live'라는 버튼이 생긴다.
이 버튼을 클릭하면 가상 서버가 기동되어 브라우저에 HTML 파일이 자동 로딩된다. 이후 소스코드를 수정하면 수정 사항이 가상 서버에 자동으로 반영된다.