Express을 이용한 웹페이지 생성

먼저 Node.js와 express가 설치되어 있어야 한다.

Express 설치는 npm 홈페이지에서 express(https://www.npmjs.com/package/express#quick-start )를 참조하자.

ExpressTest라는 프로젝트를 생성하기 위해서는 아래와 같이 실행하면 기본 구조가 생성된다.

VirtualBox:~$ express Project/ExpressTest

   create : Project/ExpressTest
   create : Project/ExpressTest/package.json
   create : Project/ExpressTest/app.js
   create : Project/ExpressTest/public
   create : Project/ExpressTest/public/javascripts
   create : Project/ExpressTest/public/images
   create : Project/ExpressTest/routes
   create : Project/ExpressTest/routes/index.js
   create : Project/ExpressTest/routes/users.js
   create : Project/ExpressTest/public/stylesheets
   create : Project/ExpressTest/public/stylesheets/style.css
   create : Project/ExpressTest/views
   create : Project/ExpressTest/views/index.jade
   create : Project/ExpressTest/views/layout.jade
   create : Project/ExpressTest/views/error.jade
   create : Project/ExpressTest/bin
   create : Project/ExpressTest/bin/www

   install dependencies:
     $ cd Project/ExpressTest && npm install

   run the app:
     $ DEBUG=ExpressTest:* npm start

VirtualBox:~$

그러면 public, routes, views 폴더가 생성되고 package.json, app.js가 생성됨을 확인할 수 있다.

프로젝트 속성을 확인하면 다음과 같다.

package.json

{                                                                          

   "name": "ExpressTest",
   "version": "0.0.0",
   "private": true,
   "scripts": {
     "start": "node ./bin/www"
   },
   "dependencies": {
     "body-parser": "~1.13.2",
     "cookie-parser": "~1.3.5",
     "debug": "~2.2.0",
     "express": "~4.13.1",

     "morgan": "~1.6.1",
     "serve-favicon": "~2.3.0"
   }
}

Dependencies에 express와 jade, body-parser, cookie-parser, debug, morgan, serve-favicon이 등록되어 있는데 express를 제외한 나머지 모듈은 설치한 기억이 없다.

그러니 npm install으로 추가 module들을 설치하도록 해야 한다.

VirtualBox:~$ cd Project/ExpressTest && npm install

serve-favicon@2.3.0 node_modules/serve-favicon
├── parseurl@1.3.1
├── fresh@0.3.0
├── etag@1.7.0
└── ms@0.7.1

debug@2.2.0 node_modules/debug
└── ms@0.7.1

cookie-parser@1.3.5 node_modules/cookie-parser
├── cookie@0.1.3
└── cookie-signature@1.0.6

morgan@1.6.1 node_modules/morgan
├── on-headers@1.0.1
├── basic-auth@1.0.3
├── depd@1.0.1
└── on-finished@2.3.0 (ee-first@1.1.1)

body-parser@1.13.3 node_modules/body-parser
├── bytes@2.1.0
├── content-type@1.0.1
├── depd@1.0.1
├── qs@4.0.0
├── on-finished@2.3.0 (ee-first@1.1.1)
├── http-errors@1.3.1 (statuses@1.2.1, inherits@2.0.1)
├── iconv-lite@0.4.11
├── raw-body@2.1.6 (unpipe@1.0.0, bytes@2.3.0, iconv-lite@0.4.13)
└── type-is@1.6.12 (media-typer@0.3.0, mime-types@2.1.10)

express@4.13.4 node_modules/express
├── escape-html@1.0.3
├── array-flatten@1.1.1
├── cookie-signature@1.0.6
├── utils-merge@1.0.0
├── content-type@1.0.1
├── methods@1.1.2
├── merge-descriptors@1.0.1
├── vary@1.0.1
├── cookie@0.1.5
├── etag@1.7.0
├── parseurl@1.3.1
├── fresh@0.3.0
├── content-disposition@0.5.1
├── path-to-regexp@0.1.7
├── serve-static@1.10.2
├── range-parser@1.0.3
├── depd@1.1.0
├── qs@4.0.0
├── on-finished@2.3.0 (ee-first@1.1.1)
├── finalhandler@0.4.1 (unpipe@1.0.0)
├── proxy-addr@1.0.10 (forwarded@0.1.0, ipaddr.js@1.0.5)
├── send@0.13.1 (destroy@1.0.4, statuses@1.2.1, ms@0.7.1, mime@1.3.4, http-errors@1.3.1)
├── type-is@1.6.12 (media-typer@0.3.0, mime-types@2.1.10)
└── accepts@1.2.13 (negotiator@0.5.3, mime-types@2.1.10)

jade@1.11.0 node_modules/jade
├── commander@2.6.0
├── character-parser@1.2.1
├── void-elements@2.0.1
├── mkdirp@0.5.1 (minimist@0.0.8)
├── constantinople@3.0.2 (acorn@2.7.0)
├── with@4.0.3 (acorn@1.2.2, acorn-globals@1.0.9)
├── clean-css@3.4.10 (commander@2.8.1, source-map@0.4.4)
├── jstransformer@0.0.2 (is-promise@2.1.0, promise@6.1.0)
├── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)
└── uglify-js@2.6.2 (async@0.2.10, uglify-to-browserify@1.0.2, source-map@0.5.3, yargs@3.10.0)
VirtualBox:~/Project/ExpressTest$

모듈들이 설치되었다.

그리고 추가로 나는 express-handlebars라는 모듈을 설치하고자 한다.

VirtualBox:~/Project/ExpressTest$ npm install express-handlebars --save
express-handlebars@3.0.0 node_modules/express-handlebars
├── graceful-fs@4.1.3
├── promise@7.1.1 (asap@2.0.3)
├── glob@6.0.4 (path-is-absolute@1.0.0, inherits@2.0.1, once@1.3.3, inflight@1.0.4, minimatch@3.0.0)
├── object.assign@4.0.3 (function-bind@1.1.0, object-keys@1.0.9, define-properties@1.1.2)
└── handlebars@4.0.5 (async@1.5.2, source-map@0.4.4, optimist@0.6.1, uglify-js@2.6.2)
VirtualBox:~/Project/ExpressTest$

그리고 다시 package.json을 보면 방금 설치된 package.json의 dependencies에 등록되어 있는 것을 확인할 수 있다.

npm install시 --save 옵션을 사용하면 설치되는 모듈이 자동으로 package.json에 등록이 된다.

package.json

{  

   "name": "ExpressTest",
   "version": "0.0.0",
   "private": true,
   "scripts": {
     "start": "node ./bin/www"
   },
   "dependencies": {
     "body-parser": "~1.13.2",
     "cookie-parser": "~1.3.5",
     "debug": "~2.2.0",
     "express": "~4.13.1",
     "express-handlebars": "^3.0.0",
     "jade": "~1.11.0",
     "morgan": "~1.6.1",
     "serve-favicon": "~2.3.0"
   }

}

express는 jade template engine을 기본으로 사용을 하고 있는데 나는 express-handlebars를 사용할 거라서 코드 수정을 한다.

express-handlebars 기본 사용방법은 아래 URL을 통해 확인하도록 한다.

Express-handlebars Usage(https://www.npmjs.com/package/express-handlebars#usage)

그리고 이제 드디어 웹서버를 구동한 후 브라우저로 접속한다.

아직은 포트포워딩을 하지 않았으니 브라우저로 접속할 때 http://localhost:3000 으로 접속한다.

VirtualBox:~/Project/ExpressTest$ npm start

> ExpressTest@0.0.0 start /home/jasmine/Project/ExpressTest
> node ./bin/www

5분도 안되는 사이에 Express를 이용하여 웹서버와 웹페이지까지 만들어 보았었다.

Express에 대한 설명은 홈페이지(http://expressjs.com/ko/)에서 확인하도록 하자.