본문 바로가기

Node.js/Nodeclipse

Eclipse Plugin for Node.js

Eclipse Plugin for Node.js


개요

Node.js 를 이용하여 서버프로그램을 개발할 때 Eclipse 에 Nodeclipse 플러그인을 사용하는 이유는 디버깅에 대한 도움을 받을 목적으로 할 때가 많다

Nodeclipse를 사용하더라도 코드힌트는 지원되지 않지만 코드를 작성하여 콘솔에서 실행하지 않고 쉽게 테스트해 볼 수 있다는 장점은 있다



JDK 설치

 - JDK 1.6 가 설치된 경우에는 Eclipse 에서 Nodeclipse 가 제대로 실행되지 않는 문제가 있음

 

Node.js 다운로드 및 설치

 - https://nodejs.org/download/

 - Windows 8 에서는 환경변수 PATH에 실행파일의 경로가 자동으로 등록되지만 시스템에 반영이 되지 않는 문제가 있을 수 있다. 리부팅으로 해결

 - 설치 후 실행 테스트 ( 메모장과 Node.js 만을 이용한 실행 테스트 )

임의의 폴더에 메모장(NotePad)으로 아래와 같은 hello.js 파일을 생성한다


console.log('Hello World');


커맨드 프롬프트에서 hello.js 가 위치한 디렉토리로 이동한 후에 다음과 같이 명령하면 화면에 'Hello World' 가 출력된다


node hello.js<enter>



Eclipse 다운로드 및 설치

 - http://www.eclipse.org/downloads/



Eclipse에 Node.js 프로그래밍을 위한 Nodeclipse 설치


1. Eclipse 실행 > Help > Eclipse Marketplace... > Find : Nodeclipse 검색하여 Install ( 아래의 그림 참조 )

2. Eclipse 재실행

3. File > New  > Other > Node > Node.js Project 선택 > Project Name 입력 

4. New > Javascript > 파일이름:0000 > console.log('Hello World'); 입력 ( 아래 그림 참조 )

5. Run As > Node Application



웹브라우저에서 서버측 Node 프로그램에 접속(요청) 테스트


Node 프로젝트를 생성할 때 Hello World 코드를 기본으로 생성하도록 설정할 수도 있다.

File > New  > Other > Node > Node.js Project 선택 > Project Name 입력, Template to use: Hello World 선택 > Finish


이렇게 생성된 프로젝트에서 hello-world-server.js 파일을 에디터에서 열어보면....

var http = require('http');

http.createServer(function handler(req, res) {

    res.writeHead(200, {'Content-Type': 'text/plain'});

    res.end('Hello World\n');

}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');


Run As > Node Application 을 선택하여 서브측 프로그램을 실행하면 콘솔에 다음과 같은 메시지가 나타날 것이다
  Server running at http://127.0.0.1:1337/ 

서버가 실행된 상태이므로 웹브라우저를 열고 주소창에 다음 URL을 입력하고 엔터를 친다
http://127.0.0.1:1337/

웹브라우저로 Node 프로그램을 실행한 결과 화면에 다음고 같이 출력된다
Hello World


[Eclipse 에서 Nodeclipse 검색 및 설치 화면 참조]




[Eclipse 와 Nodeclipse플러그인을 이용한 Node 프로그램 실행과 그 결과]




V8 자바스크립트 엔진

V8 자바스크립트 엔진은 Google 에서 C++ 을 이용하여 만든 자바스크립트 엔진이며 오픈소스이고 Google Chrome 에 내장되어 있다

V8 엔진은 독립적인 프로그램으로도 사용될 수 있고, 개발자가 C++ 을 이용하여 개발하는 그 어떤 프로그램에도 내장할 수 있도록 되어 있다

V8 자바스크립트 엔진은 Virtual Machine 형식으로 작동하며 성능도 매우 높은 것으로 평가되고 있다

Eclipse 에도 V8 VM 플러그인을 설치하여 Node.js 프로그램을 개발할 때 디버깅을 위해 사용할 수 있다



Eclipse에 V8 VM 플러그인 설치하기

Eclipse > Help > Install New Software > Add 선택

Name : V8 VM 입력, 

URL : http://chromedevtools.googlecode.com/svn/update/dev/

Google Chrome Developer Tools 에 체크

Next > Next > I accept ~ 체크 > Finish

Eclipse Restart



디버그 테스트

Eclipse > Debug As > Node Application

위와 같이 메뉴에서 선택하면 디버그 퍼스펙티브로 전환되면서 Node 플러그인은 5858 포트를 사용하여 애플리케이션과 연결되는 것을 확인할 수 있다



만약 위의 화면과 같이 'STANDALONE V8 debugger for node' 가 나타나지 않는다면, 앞서 설치했던 V8 VM을 아래의 절차에 따라 이클립스 디버그 설정에 등록해 주어야 한다

Eclipse > Debug Configuration > V8 Debugger for Node > 마우스 우측 > New 선택

Name : V8-Node Debug Configuration 등으로 설정이름을 변경

Port : 5858 입력 ( 앞서 확인한 Node의 디버깅 포트 )

Apply > Debug



디버깅을 실행하면 이클립스의 Package Explorer 에는 다음과 같이 V8 노드 아래에 Node 시스템이 지원하는 모듈파일들이 보인다




코드에 중단점(Break Point)을 삽입하고 해당 지점에서 디버깅 메시지가 어떻게 나타나는지 확인해본다



위와같이 디버깅을 실행하면 아래와 같이 프로그램 시작 지점에서 실행이 멈추고 그 시점에서의 프로그램 내부 상태를 검사할 수 있다




위의 코드에서 선언된 변수 test 의 상태를 검사해본다. 아래의 화면에서 test 변수는 아직 값이 할당되기 전이기 때문에 undefined 상태로 나타난다




툴바에서 Setp Return 을 클릭하여 다음 행으로 이동하면 아래의 화면처럼 8번라인의 중단점에서 멈추고 그 때의 test 변수 상태를 확인할 수 있다




위의 상태에서 다시 한번 Step Return 을 눌러주면 마지막 문장까지 실행되어 콘솔에는 test 변수가 가진 문자열이 출력된다




웹브라우저로 요청했을 때 Node.js 디버깅 시스템을 이용하여 서버측 상태를 검사하는 방법 (원격 비버깅 )

참조 : https://nodejs.org/api/debugger.html#debugger_advanced_usage


원격 디버깅 절차요약

1. Node 코드상에 중단점을 설정하려면 debugger 라는 키워드를 사용한다

2. Node.js 프로그램을 실행할 때 debug 라는 아규먼트를 사용한다

  예) node debug myscript.js

3. 웹브라우저를 이용하여 정상적인 방법으로 요청한다

4. 콘솔에 디버깅 메시지가 출력될 때 cont, next, quit 등의 콘솔 명령어를 사용하여 디버깅 시스템을 제어한다

 - cont : 다음 중단점으로 실행

 - next : 다음 행으로 실행

 - quit : 디버깅 종료



원격 디버깅 상세절차

1. 다음과 같이 Node 애플리케이션의 코드에 중단점을 설정할 때 debugger 라는 키워드를 사용한다

var http = require('http');

var test = 'This is test';

var num = 0;

http.createServer(function handler(req, res) {

    res.writeHead(200, {'Content-Type': 'text/plain'});

    debugger;

    num++;

    res.end('Hello World\n '+num);

    debugger;

    console.log(num+' test='+test);

}).listen(1337, 'localhost');


console.log('Server running at http://127.0.0.1:1337/');


2. Node 실행시 아규먼트를 debug로 설정한다

 - 콘솔상에 바로 실행할 때는 node debug myscript.js 라는 명령을 입력하고 엔터를 치면 된다

 - Eclipse + Nodeclipse 를 사용한다면, 다음과 같이 실행 설정을 해주면 된다

Clipse 코드 상에서 마우스 우측을 누르고 Run As > Run Configurations... 선택, Arguments Tab > Node Arguments : debug 입력 > Apply > Run

위와같이 최초 한번만 해주면 되고 debug 아규먼트가 설정된 이후에는 정상적으로 실행하는 방법 그대로 Run As > Node Application 을 선택하여 실행하면 된다


3. node debug myscript.js 방식으로 서버측에서 프로그램을 실행할 때 나타나는 디버깅 콘솔

debug> connecting to localhost:5858 ..

< Debugger listening on port 5858

debug> . ok

debug> 

break in C:\EclipseProjects\NodeApp\hello-world-server.js:1  -- 프로그램 시작행에서 중단됨


> 1 var http = require('http');


  2 var test = 'This is test';


  3 var num = 0;


debug> cont -- 다음 중단점으로 실행하라는 명령

debug> debug> 

< Server running at http://127.0.0.1:1337/

debug> -- 이 시점에 웹브라우저에서 접속을 수행한다, http://localhost:1337

debug> break in C:\EclipseProjects\NodeApp\hello-world-server.js:6 -- 요청이 전달되어 콜백함수가 실행되고 6번 행 중단점에서 멈춘다

 4 http.createServer(function handler(req, res) {

 5     res.writeHead(200, {'Content-Type': 'text/plain'});

> 6     debugger;

 7     num++;

 8     res.end('Hello World\n '+num);

debug> 


debug> cont -- 다음 중단점으로 실행을 계속하면 8번행은 실행되고 웹브라우저에 응답이 전송된 후 다음 중단점이 있는 9번 행에서 멈춘다

debug> debug> break in C:\EclipseProjects\NodeApp\hello-world-server.js:9

 7     num++;

 8     res.end('Hello World\n '+num);

> 9     debugger;

10     console.log(num+' test='+test);

11 }).listen(1337, 'localhost');

debug> 


debug> cont -- 다음 중단점으로 실행을 계속....

debug> debug> < 1 test=This is test

debug> break in C:\EclipseProjects\NodeApp\hello-world-server.js:6

 4 http.createServer(function handler(req, res) {

 5     res.writeHead(200, {'Content-Type': 'text/plain'});

> 6     debugger;

 7     num++;

 8     res.end('Hello World\n '+num);

debug> 

debug> quit