[Web App/Node.js Express] 웹 어플케이션 템플릿(Template)

by Geol Choi | September 8, 2014

이번 글에서는 Node.js의 패키지 모듈인 Express 4를 이용하여 웹 어플리케이션의 템플릿 생성에 대해 알아보도록 하겠습니다. 우선 각자의 시스템에 Node.js가 설치되어 있음을 가정합니다.

1. Express 4 설치

Node.js가 설치되어 있으면 npm, 즉 Node Package Manger가 같이 설치됩니다. 우선 쉘(Mac OS는 Terminal, Windows는 Console)을 실행합니다. 설치 시 자동으로 전역 환경변수가 설정되므로 경로에 관계없이 npm 명령이 실행됩니다.

Express 4를 설치하기 위해 다음과 같이 명령을 입력합니다:

$ sudo npm install -g express

설치옵션 -g는 전역(글로벌) 환경설정을 의미합니다. 관리자 계정 설치를 위해 sudo 명령을 이용하였습니다. 전역 설치가 된 경우 express의 설치경로는 다음과 같습니다(Mac OS의 경우):

/usr/local/lib/node_modules/express/

Windows의 경우:

c:\Users\[USERNAME]\AppData\Roaming\npm\node_modules\express

이 경로에 "Readme.md" 파일이 있을 것입니다. Express 기본 설정에 대한 매우 유용한 정보를 제공하는 파일이니 반드시 텍스트 파일로 열어 한 번 전체적으로 훑어볼 것을 권장드립니다.

2. Express Generator 설치

Express generator는 express의 기본 템플릿을 생성하는데 아주 유용합니다. 설치방법은 1번 과정에서와 마찬가지로 전역으로 설정할 것을 권장합니다:

$ npm install -g express-generator@4

3. Express 웹 어플리케이션 템플릿 설치

Express 템플릿 설치에 앞서 헬프 옵션을 살펴보도록 합니다:

$ express -help

  Usage: express [options] [dir]

  Options:

    -h, --help          output usage information
    -V, --version       output the version number
    -e, --ejs           add ejs engine support (defaults to jade)
        --hbs           add handlebars engine support
    -H, --hogan         add hogan.js engine support
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass) (defaults to plain css)
    -f, --force         force on non-empty directory

Express는 기본적으로 jade 뷰 엔진으로 설정되어 있지만 ejs, hjs 등 다양한 뷰 엔진을 지원합니다. 본 튜토리얼에서는 ejs 뷰 엔진으로 설치하도록 하겠습니다. 다른 뷰 엔진도 설치 방법은 동일합니다. Express 템플릿 설치 방법은 다음과 같습니다 (ejs 뷰 엔진의 경우):

$ express -e [YOUR_APP_PATH]

만약 어플리케이션 템플릿을 생성하고자 하는 경로가 /tmp/foo이라면 다음과 같이 입력합니다:

$ express -e /tmp/foo

설치는 순식간에 완료되며 완료된 후 해당 경로로 이동합니다:

$ cd /tmp/foo

해당 경로 내 폴더 구조는 다음과 같을 것입니다:

[YOUR_APP_PATH]
|_app.js
|_package.json
|_[bin]
|   |_www
|_[views]
|   |_error.ejs
|   |_index.ejs
|_[public]
|   |_[images]
|   |_[javascripts]
|   |_[stylesheets]
|       |_style.css
|_[routes]
    |_index.js
    |_users.js

4. 패키지 정보 확인하기

어플리케이션의 루트 폴더에 package.json 파일이 있는데 이를 텍스트 에디터로 열어보면 이름, 버전 정보, module dependencies 등 다양한 앱 정보를 확인할 수 있습니다.

{
  "name": "011-Example-03",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.8.6",
    "body-parser": "~1.6.6",
    "cookie-parser": "~1.3.2",
    "morgan": "~1.2.3",
    "serve-favicon": "~2.0.1",
    "debug": "~1.0.4",
    "ejs": "~0.8.5"
  }
}

5. 패키지 모듈 설치하기

package.json 파일의 "dependencies"는 Express 앱의 Node Package Module 설치 정보입니다. 이 파일에서 정의된 Node Package Module을 설치하려면 다음과 같이 명령을 입력합니다:

$ sudo npm install

해당 폴더에 node_modules 폴더가 생성되고 이 폴더 내에 package.json에 정의된 Node Package Module들이 설치되었음을 확인할 수 있을 것입니다.

6. nodemon 설치 및 실행하기

nodemon은 express 어플리케이션 개발에 있어 반드시 설치되어야 할 모듈은 아닙니다. 그러나, 개발하는 과정에서 서버를 재실행하는 수고로움을 덜 수 있습니다.

본격적인 개발이 시작되면 이 모듈이 얼마나 고마운 존재인지 깨닫게 될 것입니다. nodemon은 Server 스크립팅 시 내용을 변경하고 저장하면 자동으로 서버를 재실행하는 기능을 제공합니다.

nodemon을 설치하려면 다음과 같이 명령을 입력한다:

$ sudo npm install -g nodemon

이제 텍스트 에디터에서 package.json 파일을 열고 "scripts" > "start"를 다음과 같이 변경하고 저장합니다:

{
  "name": "011-Example-03",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon app.js"
  },
  "dependencies": {
    "express": "~4.8.6",
    "body-parser": "~1.6.6",
    "cookie-parser": "~1.3.2",
    "morgan": "~1.2.3",
    "serve-favicon": "~2.0.1",
    "debug": "~1.0.4",
    "ejs": "~0.8.5"
  }
}

저장이 완료되면 다음과 같이 명령을 입력합니다:

$ npm start

> 011-Example-03@0.0.0 start /tmp/foo
> nodemon app.js

8 Sep 12:42:12 - [nodemon] v1.2.1
8 Sep 12:42:12 - [nodemon] to restart at any time, enter `rs`
8 Sep 12:42:12 - [nodemon] watching: *.*
8 Sep 12:42:12 - [nodemon] starting `node app.js`
8 Sep 12:42:13 - [nodemon] clean exit - waiting for changes before restart

이제 해당 어플리케이션 폴더 내의 파일 변경이 있을 때마다 서버가 재실행되는 것을 확인할 수 있을 것입니다.

7. 서버 실행

텍스트 에디터에서 app.js JavaScript 파일을 엽니다. (참고로 앞서 언급한 바와 같이 nodemon에 의해 서버는 파일 변경 시 자동으로 재실행 되므로 굳이 서버를 중지할 필요는 없습니다). 다음과 같이 포트를 설정하는 스크립트를 추가합니다:

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// port setup
app.set('port', process.env.PORT || 3000);

해당 포트에 서버를 여는 스크립트를 추가합니다:

module.exports = app;

var server = app.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + server.address().port);
});

이제 웹 브라우저에서 다음과 같이 포트 3000번으로 로컬호스트에 접속합니다: