Node.js 설치 및 Sublime Text를 이용한 실행

단순히 브라우저 위에서 HTML의 유효성 검사에 사용되던 자바스크립트는 Ajax를 이용해 동적으로 DOM(Data Object Model)을 조작할 수 있게 되면서 그 효용성이 증가하게 됩니다. 이후 구글에서는 Chrome V8 JavaScript 엔진을 개발하여 획기적으로 자바스크립트의 속도를 개선했으며 이 엔진을 이용하여 브라우저가 아닌 서버에서 실행 가능한 Node.js까지 나오게 됩니다.

이 글에서는 Node.js를 설치하고 Sublime Text에서 개발을 진행할 수 있도록 설정하도록 하겠습니다.

1. Node.js 설치

공식 싸이트인 https://nodejs.org에 들어가면 바로 LTS(Long Term Support) 버전과 현재 버전을 다운로드 할 수 있는 화면을 볼 수 있습니다. 특별한 이유가 없으니 권고하는 대로 좀 더 안정적으로 오래 지원받을 수 있는 LTS 버전을 다운로드 받도록 하겠습니다.

다운로드 받은 msi 파일을 통해 설치를 진행하면 Node.js 뿐만 아니라 npm (package manager)까지 자동으로 설치되고 설치 디렉토리가 PATH에 추가되게 됩니다.

설치 완료 후 CLI에서 아래 명령을 실행해서 정상적 설치 여부를 확인할 수 있습니다.

1 2 3 4 5 6 7

zeany ~ $ node --version v6.9.4 zeany ~ $ npm --version 3.10.10

2. Sublime Text 3에서 실행

자바스크립트 소스 파일을 생성한 후 CLI에서 실행하는 것도 방법이지만, Sublime Text 3에서 편집과 동시에 실행을 할 수 있는 편리한 방법이 있습니다.

기본적으로 Sublime Text 3와 패키지 컨트롤 (Package Control)은 설치가 되어 있는 것으로 가정하며, 그렇지 않다면 http://zeany.net/20 를 참조해서 Sublime Text 3와 패키지 컨트롤을 설치하세요.

Sublime Text에서 자바스크립트 소스 파일을 설치한 Node.js 로 실행시키려면 추가로 패키지를 설치해줘야 합니다. 이를 위해 명령어 팔레트 (Ctrl + Shift + P)를 누른 후 install package (대게는 inst 정도만 입력해도 충분)를 입력하여 Package Control: Install Package 를 선택합니다. 이후 다시 뜨는 팝업창에 nodejs를 입력 후 설치합니다.

설치가 완료되면 다른 패키지들과 마찬가지로 Preferences > Package Settings > Nodejs 항목이 생성되어 있는 것을 확인할 수 있습니다. 아래 내용이 Settings - Default에 있어서 Settings - User를 통해 node_command 항목 등을 지정해 줘야 할 것 같지만 이미 Node.js 설치 과정에서 PATH에 추가되어 있어서 수정하지 않아도 동작했습니다. 만약 동작하지 않는다면 node.exe가 설치된 위치를 Settings - User에 추가해 주시기 바랍니다. (윈도우 환경인 경우 C:\\bin\\node.exe 처럼 디렉토리 구분은 \\로 해줘야 합니다.) 이 패키지의 보다 자세한 설명은 네모 박스에 나와 있는 주소인 https://github.com/tanepiper/SublimeText-Nodejs 를 참조하세요.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{ // save before running commands "save_first": true, // if present, use this command instead of plain "node" // e.g. "/usr/bin/node" or "C:\bin\node.exe" "node_command": false, // Same for NPM command "npm_command": false, // as 'NODE_PATH' environment variable for node runtime "node_path": false, "expert_mode": false, "ouput_to_new_tab": false }

그리고, 메뉴 Tools > Nodejs 항목이 생성되어 자바스크립트 파일을 실행하거나 단축키 Alt + R을 눌러 실행시킬 수 있는 것도 확인할 수 있습니다. 

이제 아주 간단한 자바스크립트 파일을 하나 생성하여 빌드 테스트를 해보도록 하겠습니다. 아래와 같은 내용을 입력 후 원하는 이름의 js 파일 (ex, hello.js)로 저장을 합니다. 이후 Alt + R을 눌러서 실행하도록 합니다.

1	console.log('Hello, World!');

그러면 Sublime Text의 아랫 부분에 실행 결과가 나오는 것을 확인할 수 있습니다.

이상으로 Node.js & npm 설치 및 Sublime Text 3를 이용하여 자바스크립트 파일을 빌드할 수 있는 환경 설정에 대해 알아보았습니다.