단순히 브라우저 위에서 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를 이용하여 자바스크립트 파일을 빌드할 수 있는 환경 설정에 대해 알아보았습니다.




WRITTEN BY
zeany
이젠 기록하지 않으면 기억되지 않아서.. 이것저것 여기에 새겨 보려고 한다..

트랙백  0 , 댓글  1개가 달렸습니다.
  1. 비밀댓글입니다
secret