nhyunzi
[모던 자바스크립트 Deep Dive] 03 자바스크립트 개발 환경과 실행 방법 본문
3.1 자바스크립트 실행 환경
모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 브라우저 뿐만 아니라 Node.js도 내장하고 있다. 따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다. 기본적으로
브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작한다.
그런데 주의할 점은 브라우저와 Node.js는 용도가 다르다. 브라우저는 HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것이 주된 목적이고, Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다. 따라서 브라우저와 Node.js는 모두 자바스크립트 코어인 ECMA Script를 실행할 수 있지만 각각 이외에 추가로 제공하는 기능은 호환되지 않는다.
예를 들면, 브라우저는 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공한다.
하지만 Node.js는 브라우저 외부 환경에서 HTML 요소를 파싱해서 객체화한 DOM을 직접 다룰 필요가 없기 때문에 제공하지 않는다.
* 웹크롤링
서버에서 웹사이트의 콘텐츠를 수집하기 위해 웹사이트에서 HTML 문서를 가져온 다음 이를 가공해서 필요한 데이터만 추출하는 것. 서버 환경은 DOM API를 제공하지 않으므로 cheerio와 같은 DOM라이브러리를 사용해 HTML 문서를 가공하기도 한다.
Node.js에서는 파일을 생성하고 수정하는 파일 시스템을 기본 제공하지만 브라우저는 보안상의 이유로 제공하지 않는다.
(Web API인 FileReader 객체를 사용해 사용자가 지정한 파일을 읽어 들이는 것은 가능)
이처럼 브라우저는 ECMAScript와 DOM, BOM, Canvas, XMLHttpRequest, fetch 등과 같은 클라이언트 사이드 Web API를 지원하고, Node.js는 클라이언트 사이드 WebAPI는 지원하지 않고 ECMAScript와 Node.js 고유의 API를 지원한다.
3.2 웹 브라우저
책에서는 크롬 브라우저를 사용한다. ECMAScript 사양을 준수하면서 시장 점유율도 가장 높다.
크롬 브라우저의 V8 자바스크립트 엔진은 Node.js에서도 사용하고 있다.
3.2.1 개발자 도구
크롬 브라우저의 개발자 도구는 웹 애플리케이션 개발에 필수적인 도구로, 브라우저에 기본 내장되어있다.
윈도우 기준, F12 또는 Ctrl+Shift + I
자주 사용하는 개발자 도구의 기능
3.2.2 콘솔
개발자 도구의 Console 패널은 자바스크립트 코드에서 에러가 발생해 애플리케이션이 비정상적으로 작동할때 가장 우선 살펴야할 곳이다. 구현 단계에서는 에러가 빈번하게 발생하므로 항상 열어둔 상태로 개발하는 것이 좋다. 열어두지 않으면 에러가 발생했는지조차 알 수 없는 경우가 있기 때문이다. 디버깅을 실행하는 것보다 간편히 코드의 실행결과를 확인하면서 개발하기 위해 console.log() 메서드를 사용할 수 있다.
콘솔은 자바스크립트 코드를 직접 입력해 그 결과를 확인할 수 있는 REPL(Read Eval Print Loop: 입력 수행 출력 반복)
환경 으로 사용할 수 있다. 코드를 실행할 때 줄바꿈이 필요한 경우는 shift 키를 누른 상태에서 엔터를 누른다.
3.2.3 브라우저에서 자바스크립트 실행
브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행한다.
자바스크립트 코드내에 console.log() 메서드를 호출하면 콘솔에 실행 결과가 출력된다.
자바스크립트 코드가 포함된 HTML 파일을 메모에 작성하고 counter.html로 저장하여 크롬 브라우저로 실행해보았다.
개발자 도구의 콘솔을 열어둔 상태에서 + 또는 - 버튼을 클릭하면 에러가 발생했으나 HTML파일에 포함된 자바스크립트가
일부 실행된 것을 확인할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Counter</title>
</head>
<body>
<div id="counter">0</div>
<button id="increase">+</button>
<button id="decrease">-</button>
<script>
// 에러를 발생시키는 코드: 선택자는 ‘counter-x’가 아니라 ’counter'를 지정해야 한다.
const $counter = document.getElementById('counter-x');
const $increase = document.getElementById('increase');
const $decrease = document.getElementById('decrease');
let num = 0;
const render = function () { $counter.innerHTML = num; };
$increase.onclick = function () {
num++;
console.log('increase 버튼 클릭' , num);
render();
};
$decrease.onclick = function () {
num--;
console.log( 'decrease 버튼 클릭' , num);
render();
};
</script>
</body>
</html>
3.2.4 디버깅
개발자 도구의 콘솔에서 에러 발생 위치 링크를 클릭하여 디버깅 할 수 있는 Sources 패널로 이동한다. 에러가 발생한 위치에 삘간 밑줄이 표시되고 마우스를 올려보면 아래와 같은 에러정보가 표시된다.
"Uncaught TypeError: Cannot set property ' innerHTML' of null"
&counter 변수의 값이 null인지 확인하고 null이라면 그 이유를 알아내서 에러 발생 원인을 제거해보자.
브레이크 포인트를 걸고 다시 버튼을 클릭하면 디버깅 모드로 들어간다.
18번째 줄 $counter에 커서를 올리면 변수의 값을 확인할 수 있다. 현재 null임을 확인할 수 있다.
그 원인은 13번째 줄에서 $counter변수에 값을 할당할때 HTML 요소의 아이디를 잘못 지정했기 때문이다.
수정하면 에러가 사라진다. 이처럼 디버깅은 에러 메세지를 확인하고 에러가 발생한 원인을 제거하는 것이다.
3.3 Node.js
클라이언트 사이드, 즉 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있다.
하지만 프로젝트 규모가 커짐에 따라 React, Angular 같은 프레임 워크 또는 라이브러리나 Babel, Webpack 등
여러 도구를 사용할 필요가 있다. 이때 Node.js와 npm이 필요하다.
3.3.1 Node.js와 npm 소개
2009년 라이언 달이 발표한 Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경으로, 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬수 있는 자바스크립트 실행환경이다.
npm(node package manager)은 자바스크립트 패키지 매니저로, Node.js에서 사용할 수잇는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다. 자신이 작성한 패키지를 공개할수도, 필요한 패키지를 검색해 재사용할수도 있다.
3.3.2 Node.js 설치
Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
LTS 버전은 장기적으로 안정된 자원이 보장된 반면, Current 버전은 최신 기능을 제공하지만 업데이트가 발생하는 버전으로 안정적이지 않을 수 있다. 실제 개발환경에서는 LTS버전을 설치하는 것이 좋지만 지금은 학습을 위해 Current 버전을
다운로드 한다. 이때, npm도 함께 설치된다.
윈도우 기준 C:\Program Files\node.js\node.exe 에 설치된다.
설치가 완료되면 cmd에서 Node.js와 npm버전을 출력해 정상적으로 설치되었는지 확인 가능하다.
$ node -v
$ npm -v
3.3.3 Node.js REPL
Node.js가 제공하는 REPL을 사용하면 간단한 자바스크립트 코드를 실행해 결과를 확인해 볼수 있다.
cmd에서 다음 명령어를 실행해 보자.
$ node
프롬프트가 >로 변경되면 자바스크립트 코드를 실행해 볼 수 있다.
자바스크립트 파일을 실행하려면 node명령어 뒤에 파일 이름을 입력한다. 파일 확장자 .js는 생략 가능하다.
$ node index.js
ctrl + C를 두번 입력하면 Node.js REPL이 종료된다.
3.4 비주얼 스튜디오 코드
3.4.1 비주얼 스튜디오 코드 설치
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
브라우저의 콘솔 또는 Node.js의 REPL에서 자바스크립트 코드를 실행할 수 있지만 애플리케이션 개발 단계에서
사용하기는 부족하다. 코드 에디터를 사용하면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등 강력하고 편리한 기능을 활용할 수 있다. 이 책에서는 비주얼 스튜디오 코드를 사용해서 자바스크립트를 실행해 본다.
3.4.2 내장 터미널
VS Code를 실행한 다음 적당한 위치에 프로젝트 폴더를 생성하고 자바스크립트 파일을 생성해 본다.
바탕화면에 myapp폴더를 생성하고 index.js파일을 생성한다. Vs code에는 명령 프롬포트가 내장되어 있다.
열려면 ctrl + ` 를 누른다. node index 명령어로 자바스크립트 파일을 실행한다.
3.4.3 Code Runner 확장 플러그인
Vs Code에서는 확장 플러그인 저장소 '마켓 플레이스'를 통해 다양한 확장 플러그인을 다운로드해서 설치할 수 있다.
Code Runner 를 이용하면 내장 터미널에서 단축키를 사용해 자바스크립트를 비롯해 다양한 프로그래밍 언어로 구현된 소스코드를 간단히 실행할 수 있다.
설치한 후, 윈도우 기준 Ctrl + Alt + N 단축키를 사용해서 현재 표시중인 자바스크립트 파일을 실행할 수 있다.
const arr = [1, 2, 3];
arr.forEach(alert); // ReferenceError: alert is not defined 오류가 발생
코드를 수정해 위와 같은 코드를 작성한 후 실행해 보았더니 에러가 발생한다.
브라우저에 알림창을 띄우는 alert 함수는 브라우저에서만 동작하는 클라이언트 사이드 Web API다.
그런데 Code Runner 확장 플러그인은 Node.js 환경을 사용해 자바스크립트를 실행한다.
따라서 클라이언트 사이드 Web API인 alert 함수를 Node.js 환경에서는 알 수 없기 때문에 에러가 발생한 것이다.
따라서 클라이언트 사이드 Web API가 포함된 소스코드는 Code Runner 확장 플러그인을 통해 실행하지 말고
브라우저 환경에서 실행해야 한다.
3.4.4 Live Server 확장 플러그인
클라이언트 사이드 Web API가 포함된 자바스크립트 코드는 브라우저에서 실행해야한다.
개발자 도구의 콘솔이나 자바스크립트 코드를 HTML에 삽입한 다음 HTML 파일을 브라우저로 열어야 한다.
앞서 생성한 myapp폴더의 index.html 파일을 생성한다.
<!DOCTYPE HTML>
<html>
<body>
<script src="index.js"></script>
</body>
</html>
위 html파일을 브라우저에서 직접 열어도 되지만 파일 경로 문제가 발생할 수 있고, 소스코드 수정를 수정할 때마다 매번 새로고침해야한다. 이때, Live Server 확장 플러그인 이용하면 코드 수정시 수정사항을 브라우저에 자동으로 반영한다.
설치하면 하단에 Go Live버튼이 생긴다.
이 버튼을 클릭하면 가상 서버가 기동되고 브라우저에 HTML 파일이 자동 로딩 된다.
이후 소스코드를 수정하면 수정사항이 가상 서버에 자동으로 반영된다.