1. Node.js 프로젝트 생성 및 개발 준비

Eclipse에서 Node.js (Nodeclipse)를 사용하는 방법을

다음과 같이 4가지로 정리하였다.

1. Node.js 프로젝트 생성 및 개발 준비

2. MariaDB 기반 CRUD 게시판 만들기

3. 게시판 예제 보강

4. GitHub에서 Node.js 소스 가져오기

Node.js와 Nodeclipse 설치는

인터넷을 찾아 보길 바라고, 여기서는 설치한 이후부터 정리한다.

Express 기반으로 제작하기 때문에

Express (express-generator 포함)도 설치해야 한다.

Node.js는 Atom이나 notepad++로 작성하고

콘솔에서 실행해서 개발해도 되지만,

디버깅과 사용의 편의성 때문에 Eclipse에서 작성하는 것을 선호한다.

(타이핑을 안 좋아해서 GitHub도 eclipse로 이용)

Nodeclipse은 eclipse에서 Node.js를 사용할 수 있게 해주는 플러그인으로

Eclipse의 marketplace에서 Nodeclipse로 검색해서 설치하면 된다.

개발을 위해 새로운 프로젝트(board)를 생성한다.

새 프로젝트는 Nodeclipse를 이용하여 생성할 수 있지만 (그림참조),

웹 개발에 필요한 기본 설정을 제대로 작성해주지 않기 때문에

express로 콘솔 창에서 프로젝트를 생성하고,

Eclipse에서 Import 해서 사용하는 방법을 이용한다.

먼저 console 창에서

다음과 같이 입력하여 사용할 프로젝트를 간단하게 생성한다.

board 만 원하는 이름으로 지정하면 된다.

> express --session --view=ejs --css css board

> cd board

> npm install

express-generator에서 웹 개발에 필요한 여러가지 설정을 해주기 때문에

위와 같이 콘솔 창에서 프로젝트를 생성하는 것이 더 좋다.

주의: 콘솔 창에서 express 명령어를 사용하려면 express-generator를 설치해야 한다.

> npm install express-generator -g

콘솔창에서 [npm start]를 입력하여 웹 서버를 실행한다.

웹 브라우저에서 [http://localhost:3000/]를 입력하여

다음 그림과 같이 실행되면,

제대로 Node.js용 웹 프로젝트가 생성된 것이다.

콘솔 창에서 실행한 Node.js를 중지하고,

Eclipse를 실행해서

콘솔창에서 생성한 프로젝트를 가져오기(import)한다.

Eclipse에서 File > Import 를 실행하고

"Projects from Folder or Archive"을 선택한다.

"Directory" 버튼을 클릭해서,

express(express-generator)로 생성한 프로젝트의 폴더를 지정하고,

"Finishi" 버튼을 클릭한다.

[Project Explorer] 뷰에서

가져오기 한 board 프로젝트의 파일들을 볼 수 있다.

node_modules 폴더에 빨간색 X 표시가 된 것은

몇몇 라이브러리가 제대로 설치되지 않은 경우 나타나는 것으로

예제 구현에 문제가 없으니 넘어간다.

bin 폴더 하위에 있는 www 파일을 선택하고

컨택스트 메뉴에서 Run As > Node Application을 실행한다.

앞서 콘솔 창에서 [npm start]를 실행한 것과 같이

eclipse에서 웹 사이트를 실행하는 방법이다.

다음 그림 하단의 콘솔(console) 탭에 보이는 것처럼

종료(Teminate) 버튼이 빨간색으로 나타나면

웹 사이트가 제대로 실행된 것이다.

웹 브라우저에서 [http://localhost:3000/]를 입력하여 접속을 확인한다.

bin 폴더 하위에 있는 www 파일을 선택하고

컨택스트 메뉴에서 Run As > Node Application을 실행하는 대신에,

Debug As > Node Application을 실행하면,

Node.js를 손 쉽게 디버깅하면서 개발 할 수 있다.

console.log로 변수의 값을 출력하면서 디버깅 할 수도 있지만

Java로 개발하듯이,

Eclipse에서 Breakpoint를 설정하고 한 행씩 실행하면서 디버깅 할 수 있다.

이상의 그림은 디버그 모드로 실행했을 때 제공되는 Debug Persperctice 화면으로,

현재 행까지 실행하고,

각 변수의 값을 우측 상단에 있는 Variables 탭에서 확인할 수 있다.

그림에서는

rows 배열 변수의 값과 각 원소의 Json 값이 출력되는 것을 볼 수 있다.