해당 포스팅은 위키북스의 "모던 자바스크립트 Deep Dive"라는 책을 독학하며 기록하는 글입니다.
자바스크립트 실행 환경
모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 브라우저뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다.
따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다.
주의할 점은 둘의 용도가 다르다는 것이다. 브라우저는 웹 페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만, Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다.
예를 들면, 브라우저는 HTML요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공한다. 하지만 Node.js는 그렇지 않다. 외부 환경에서는 DOM을 다룰 일이 없을 뿐더러 필요도 없기 때문이다.
반대로 Node.js에서는 파일 시스템을 기본 제공하지만, 브라우저에서는 그렇지 않다. 왜냐하면 브라우저를 통해 다운로드 된 자바스크립트가 사용자의 컴퓨터와 로컬 파일을 조작한다면 보안상의 문제가 생기기 때문이다. 따라서 브라우저에서는 파일 시스템을 기본 제공하지 않는다.
이처럼 브라우저에서는 ECMAScript와 클라이언트 사이드 Web API(DOM, BOM, Canvas, XMLHttpRequest 등)를 지원하고, Node.js는 ECMAScipt와 Node.js 고유의 API를 지원한다.
웹 브라우저에서의 사용
필자는 Window을 사용하기 때문에 앞으로의 포스팅에서도 Window기준으로 포스팅이 이어질 것이다.
해당 책에서는 구글 크롬(Chrome)브라우저를 사용한다. 크롬 브라우저 다운로드
크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구이다. 크롬 브라우저에 기본 내장되어 있으므로 별도로 설치할 필요는 없으며 F12 키로 열 수 있다.
| 패널 | 설명 |
|---|---|
| Elements | 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다. 웹페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있다. |
| Console | 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log메서드의 실행 결과를 확인할 수 있다. |
| Sources | 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다. |
| Network | 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다. |
| Application | 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다. |
개발자 도구의 Console 패널은 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳이다.
에러가 발생했다면 Colsole 창에 에러 정보와 발생 위치가 나올 것이다. 발생 위치를 더블 클릭하게 되면 Sources 창으로 넘어가게 되며 해당 위치가 나오게 된다. 그럼 코드의 왼쪽 라인 번호를 클릭해 브레이크포인트(중단점)을 걸고 에러가 발생하게 된 동작을 다시 하게 되면 디버깅이 진행된다.
디버깅이란 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산을 찾아내고 그 원인을 밝히고 수정하는 작업 과정을 뜻한다.
Node.js에서의 사용
브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있지만, 프로젝트의 규모가 커짐에 따라 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러 가지 도구를 사용할 필요가 있다. 이때, Node.js와 npm이 필요하다.
npm은 자바스크립트 패키지 매니저이다. Node.js에서 사용하 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(CommandLineInterface)를 제공한다.
Node.js의 설치는 다음 페이지에서 이루어 진다. Node.js 설치
페이지에 접속하면 두 개의 버튼이 보이는데 왼쪽의 LTS은 장기적으로 안정된 지원이 보장되는 버전이고, 오른쪽의 Current은 최신 기능을 제공하지만 다소 안정적이지 않을 수 있다.
Node.js는 기본적으로 다음 위치에 설치된다.
C:\Program Files\nodejs\node.exe
Node.js가 잘 설치되었는지 확인하기 위해서는 Window + R 로 cmd창을 열어 다음 명령어를 입력해 보자. 각각의 버전이 잘 출력된다면 설치가 성공적으로 진행된 것이다.
$ node -v //설치된 Node.js의 버전을 출력
$ npm -v //설치된 npm의 버전을 출력Node.js가 제공하는 REPL(ReadEvalPrintLoop)를 사용하면 간단한 자바스크립트 코드를 작성해서 실행 결과를 확인할 수 있는데 Console 창과 비슷하다고 생각하면 된다.
$ node해당 명령어를 치면 다음 줄부터 ">"가 나오면서 자바스크립트 언어를 사용할 수 있게 된다.
만약 REPL을 종료하고 싶다면, "Ctrl+C"를 연속으로 2번 누르면 된다.
$ node index.js자바스크립트 파일이 있는 디렉토리로 이동하여 해당 명령어를 입력하게 되면 자바스크립트 파일을 실행할 수 있으며 파일 확장자인 js는 생략이 가능하다.
비주얼 스튜디오 코드 (VS Code)
브라우저 콘솔 또는 Node.js의 REPL에서 자바스크립트 코드를 실행할 수 있지만 애플리케이션을 개발하는 단계에서 사용하기에는 부족함이 많다.
따라서 해당 책에서는 MS의 비주얼 스튜디오 코드(VS Code)를 사용해 자바스크립트를 개발 및 실행한다.
VS Code 다운로드
이제 VS Code에서 제공하는 내장 터미널을 사용할 수 있게 되며 내장 터미널은 Ctrl+억음부호를 사용해서 열 수 있고, 이 곳에서 자바스크립트 파일을 실행 시킬 수 있다.
VS Code에서는 확장 플러그인 저장소인 "마켓플레이스"를 통해 다양한 확장 플러그인을 다운로드해서 설치할 수 있다. 그 중 2가지만 살펴보도록 하자.
Code Runner라는 플러그인을 설치하면 Ctrl+Alt+N 단축키를 사용해서 현재 띄워진 자바스크립트 소스 파일을 터미널로 바로 실행 시킬 수 있다.
여기서 잠깐! 자바스크립트 파일에 다음 소스 코드를 치고 실행시켜 보자.
alert("경고창입니다."); //괄호안의 문구를 경고창으로 띄우는 명령어해당 코드는 실행이 되지 않는다. 왜일까?
위에서 언급했듯이 브라우저와 Node.js는 둘다 자바스크립트 엔진을 가지고 있지만 사용 목적이 다르다.
즉, 우리는 방금 터미널에서 Node.js 환경을 통해서 자바스크립트 파일을 실행했고 alert는 브라우저에서만 동작하는 클라이언트 사이드 Web API 함수이기 때문에 실행되지 않았던 것이다.
Live Server라는 플러그인은 클라이언트 사이드 Web API가 포함된 자바스크립트 코드 실행시켜주는 플러그인이다. 해당 플러그인을 설치하고, VS Code아래에 생기는 "Go Live"버튼을 클릭하면 HTML문서가 렌더링 되면서 문서안의 script 태그에 포함된 자바스크립트 파일이 실행된다.
해당 플러그인은 소스코드를 수정할 때마다 수정 사항을 브라우저에 자동으로 반영해주기 떄문에 매우 편리하다.
마치며...
지금은 브라우저 환경과 Node.js 환경 모두에서 실행 가능한 ECMAScript 표준 빌트인 함수와 브라우저 환경에서만 실행 가능한 클라이언트 사이드 Web API를 구분하기 어렵겠지만, 앞으로 같이 공부해가면서 구분해 가도록 해 보자.
