Express.js - 1. 설치와 구조

설치

노드 모듈로 작성된 익스프레스는 노드 관리 파일인 package.json에 express를 추가하는 것만으로도 설치 가능하다. 그러나 익스프레스 모듈을 글로벌로 설치해서 사용한다면 커맨드라인 명령으로 익스프레스 기본 골격을 만드는데 훨씬 수월하다.

sudo npm install -g express

express myapp

구조

위 명령어로 기본 뼈대를 만들면 아래와 같은 폴더와 파일이 자동 생성된다.

/myapp
  ⌊ /bin
      ⌊ www
  ⌊ /public
      ⌊ /images
      ⌊ /javascripts
      ⌊ / stylesheets
  ⌊ /routes
      ⌊ index.js
  ⌊ /views
      ⌊ index.jade
  ⌊ app.js
  ⌊ package.json

package.json : 노드 패키지 파일이다. 필요한 노드 모듈을 정의하고 프로젝트 설명이 기록되어 있다. 시작 스크립트 ./bin/www파일이다.

/bin/www: 익스프레스 설정 파일인 app.js 파일을 가져와 http 객체와 연결하는 작업을 한다. 실제 서버를 구동하는 파일이다.

app.js: 익스프레스 객체를 생성하고 환경 설정을 한다.

  • morgan:  http 리퀘스트에 대해 로깅하는 모듈이다.
  • body-parser: http 요청 중 POST 요청의 데이터에 접근하기 위한 모듈이다.
  • cookie-parser: http로 요청한 클라이언트 쿠키 정보에 접근하기 위한 모듈이다.
  • express.static(... 'public'): 정적 파일 호스팅을 위한 폴더를 설정한다.
  • app.use('/', routes): 라우팅 설정. 세부 라우팅은 /routes 폴더에 구현된다.

routes/index.js: 라우팅 설정을 살펴보자.

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

'GET /'으로 요청이 왔을 경우 라우팅 처리하는 부분이다. req객체를 통해 클라이언트 요청에 대한 정보에 접근할 수 있다. req.param(), req.params, req.body는 각 각 url로 들어오는 파라매터와 쿼리값, 그리고 POST나 PUT 요청에서의 바디 데이터를 담고 있다. 이러한 값을 참고하여 프로토콜의 고유 로직을 처리할 수 있다.

res는 요청한 클라이언트로 응답시 사용하는 객체다. res.render() 함수는 템플릿 엔진을 렌더링하여 클라이언트로 보내는 역할을 한다. 템플릿 엔진에는 Jade, Ejs등을 사용할 수 있는데 익스프레스는 Jade를 기본으로 사용한다. 이외에도 res.send(), res.json() 등으로 헤더나 본문만 보낼 수도 있다.

public: 정적 폴더로 설정된 public은 /images, /javascripts, /stylesheets 폴더로 구성 되는데 웹서버에서 볼수 있는 기본적인 구성이다.

구동

npm install

npm start

익스프레스는 3000번 포트를 기본으로 사용한다. 웹 브라우져를 열어 localhost:3000 주소로 접속해보자. /로 라우팅 되어 index.jade 템플릿을 렌더링한 결과를 확인할 수 있다.

디버그 로그를 함께 보기 위해서는  DEBUG="myapp:server" npm start 로 서버를 구동한다.

myapp:server Listening on port 3000 +0ms
GET / 200 292.653 ms - 170
GET / 200 30.595 ms - 170
GET /stylesheets/style.css 200 8.160 ms - 110
GET /users 200 1.856 ms - 23
GET /not 404 34.079 ms - 1247
GET /stylesheets/style.css 304 2.046 ms - -