express 모듈

http 모듈에 여러 기능을 추가해 쉽게 사용할 수 있도록 만든 모듈이다.

[콘솔 입력 - express 4.X.X 버전 인스톨]

$ npm install express@4

[목차]

[꼭 알아둘 개념]

1. 기본 서버

// 모듈 추출
var express = require('express');

express 모듈로 서버를 생성하고 실행하는 코드는 기본 코드이기 때문에 반드시 숙지해야 한다.

[코드 1 - express 모듈을 사용한 서버 생성, 실행]

// 모듈 추출
var express = require('express');

// 서버 생성
var app = express();

// request 이벤트 리스너 설정
app.use(function (request, response) {
    response.writeHead(200, { 'Content-Type': 'text/html' });
    response.end('<h1>Hello Express Module!!</h1>');
});

// 서버 실행
app.listen(8888, function () {
    console.log('서버가 시작되었습니다...8-1.server.js'); 
});

위의 코드는 다음과 같이 줄일 수 있다.

[코드 2 - express 모듈 사용한 서버 생성, 실행 축약]

var express = require('express');

express().use(function (request, response) {
    response.writeHead(200, { 'Content-Type': 'text/html' });
    response.end('<h1>Hello Express Module!!</h1>');
}).listen(8888, function () { console.log('서버가 시작되었습니다...8-1.server.js'); });

보통 express 프레임워크는 http 모듈과 함께 서버를 실행한다. 그럴 땐 다음과 같은 코드를 자주 사용하므로 기억해둔다.

[코드 3 - 다른 서버 실행 방법]

var http = require('http');
var express = require('express');

// 서버 생성
var app = express();

// 서버 실행
http.createServer(app).listen(8888, function () { console.log('서버를 시작하였습니다...'); });

2. 기본 응답 메서드(response method)

express 모듈로 서버를 생성하면 request 객체와 response 객체에 다양한 기능이 추가된다.

• 문서 : http://expressjs.com/en/4x/api.html

[response 객체의 메서드]

2.1 send() 메서드

[코드 1 - send() 메서드 이용]

var express = require('express');

express().use(function (request, response) {
    // 데이터 생성
    var output = [];
    for (var i = 0; i < 3; i++) {
        // JSON 타입으로 데이터를 배열에 담는다.
        output.push({
            count: i,
            name: 'name - ' + i
        });
    }

    // 응답 로직 - 배열의 형태로 값을 담았기 때문에 JSON 형태로 브라우저에 보여준다.
    response.send(output);
}).listen(8888, function () { console.log('서버가 구동중입니다...send()'); });

[Web 실행 1 - send() 메서드 이용]

[{"count":0,"name":"name - 0"},{"count":1,"name":"name - 1"},{"count":2,"name":"name - 2"}]

2.2 status() 메서드

상태코드(Status Code)를 전달하고 싶으면 response.send() 메서드 앞에 status() 메서드를 사용한다.

[코드 2 - status() 메서드로 404 상태 코드 전달]

var express = require('express');

express().use(function (request, response) {
    // 응답 - 상태코드 404를 전달한다.
    response.status(404).send('<h1>404 Error!</h1>');
}).listen(8888, function () { console.log('서버 시작....status()'); });

XMLHttpRequest 객체로 Ajax 요청을 수행할 때 응답코드를 확인하면 적절한 처리를 할 수 있다.

3. 기본 요청 메서드(request method)

[request 객체의 속성, 메서드]

3.1 header()

웹 브라우저로 HTTP 요청을 하면 반드시 User-Agent 속성이 따라온다. 이것을 추출해보자.

[코드 1 - header() 메서드로 User-Agent 속성 추출]

var express = require('express');

// 미들웨어 설정
express().use(function (request, response) {
    // User-Agent 속성 추출
    var agent = request.header('User-Agent');    // request.header(name : String)
    console.log(request.headers);                // request.headers -> 요청 헤더를 추출한다.(JSON)
    console.log(agent);    // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

    // 상태 코드만 보낼 때는 sendStatus() 메서드를 사용한다.
    response.sendStatus(200);
}).listen(8888, function () { console.log('서버 시작...'); });

[Console 실행 1 - header() 메서드로 User-Agent 속성 추출]

{ host: 'localhost:8888',
  connection: 'keep-alive',
  'cache-control': 'max-age=0',
  'upgrade-insecure-requests': '1',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36',
  accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4',
  cookie: 'csrftoken=FQp5k4KvZh6PugJvL86MU2EEt2p9dGcAwCp6ZWS2c40NdLI34tsz5zcvEHNURlyC; breakfast=toast; dinner=chicken; name=Jabba; region=seoul' }
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

헤더의 속성을 추출하면 웹 브라우저의 정보가 포함되어 있어 이에 따라 분기 처리를 할 수 있다.

[코드 2 - header() 메서드로 User-Agent 속성 추출 & 브라우저 체크]

var express = require('express');

express().use(function (request, response) {
    var agent = request.header('User-Agent');
    // 브라우저 구분 - agent 값을 소문자로 만든 후 비교한다.
    if (agent.toLowerCase().match(/chrome/)) {
        response.send('<h1>Hello Chrome..!</h1>');
    } else if (agent.toLowerCase().match(/safari/)) {
        response.send('<h1>Hello Safari..!</h1>');
    }
}).listen(8888, function () { console.log('서버를 구동합니다....브라우저 체크'); });

3.2 query 속성

query 속성을 이용하면 클라이언트가 url로 요청한 매개변수를 추출할 수 있다. 클라이언트가 http://localhost:8888/?name=rint&region=seoul로 요청했다고 가정하고 다음 코드를 살펴보자.

var express = require('express');

// 서버 생성 & 미들웨어 설정 
express().use(function (request, response, next) {
    // 변수 선언
    var name = request.query.name;          // 사용자 요청 쿼리 중 name 속성을 뽑아내 담는다.
    var region = request.query.region;      // 사용자 요청 쿼리 중 region 속성을 뽑아내 담는다.

    response.send('<h1>' + name + '-' + region + '</h1>');  // 웹 브라우저에 속성 값들을 출력한다.
}).listen(8888, function () { console.log('서버를 시작합니다... request.query'); });

4. 미들웨어(middleware) 개요

미들웨어는 요청에 대한 응답을 완료하기 전까지 중간에서 여러가지 일을 처리할 수 있다. express 모듈에서는 use() 메서드의 매개변수에 입력하는 함수를 미들웨어라고 한다.

미들웨어는 다양한 개발자가 배포하고 있다. 자세한 내용은 문서를 참고하자.

• 문서 : http://expressjs.com/en/resources/middleware.html

[코드 1 - 미들웨어 테스트]

var express = require('express');
var app = express();

// 미들웨어 1
app.use(function (request, response, next) {
    console.log('첫 번째 미들웨어');
    next();
});

// 미들웨어 2
app.use(function (request, response, next) {
    console.log('두 번째 미들웨어');
    next();
});

// 미들웨어 3
app.use(function (request, response, next) {
    console.log('세 번째 미들웨어');

    // 응답
    response.writeHead(200, { 'Content-Type': 'text/html' });
    response.end('<h1>express Basic</h1>');
}).listen(8888, function () { console.log('서버를 실행합니다.... 미들웨어들'); });

[Console 실행 1 - 미들웨어 테스트]

서버를 실행합니다.... 미들웨어들
첫 번째 미들웨어
두 번째 미들웨어
세 번째 미들웨어

잠깐! 미들웨어는 왜 사용할까?

미들웨어에서 request, response 객체에 속성 또는 메서드를 추가할 수 있다. 이렇게 추가한 것들을 다른 미들웨어에서도 사용할 수 있다. 즉, 특정한 로직을 수행하는 모듈을 분리해서 만들 수 있다. 재사용도 당연히 가능하다.

[코드 2 - 미들웨어를 사용한 속성 추가]

var express = require('express');
var app = express();

// 미들웨어 1
app.use(function (request, response, next) {
    // 데이터 추가
    request.number = 52;
    response.number = 273;
    next();
});

// 미들웨어 2
app.use(function (request, response, next) {
    response.writeHead(200, { 'Content-Type': 'text/html' });
    response.end('<h1>' + request.number + ':' + response.number + '</h1>');
}).listen(8888, function () { console.log('서버를 실행합니다.... 미들웨어 사용이유'); });

[Web 실행 2 - 미들웨어를 사용한 속성 추가]

52:273

5. router 미들웨어

express 모듈은 클라이언트 요청에 적절한 페이지를 제공하는 기술인 페이지 라우팅을 지원한다. express 모듈의 내부 모듈이기 때문에 따로 설치할 필요없다.

[페이지 라우팅을 위한 메서드]

[코드 - 라우팅 매개변수 추출 (토큰 사용)]

var express = require('express');
var app = express();

// 라우터 설정
app.get('/page/:id', function (request, response) {
    var name = request.params.id;
    response.send('<h1>' + name + ' Page</h1>');
}).listen(8888, function () { console.log('서버를 시작합니다... get 라우터 토큰'); });

위의 코드는 http://localhost:8888/page/273로 접속하면 실행결과를 볼 수 있다.

[Web 실행 - 라우팅 매개변수 추출 (토큰 사용)]

273 Page

request 객체의 params .vs. query 속성 정리

속성 이름	설명
request.params	/:id처럼 ':' 기호를 사용해 지정된 라우팅 매개변수 추출
request.query	?name=A와 같은 요청 매개변수 추출

6. static 미들웨어

static 미들웨어를 사용하면 지정한 폴더에 있는 내용을 모두 웹 서버 루트 폴더에 올려준다. 따라서 다음과 같이 img 태그를 생성해 이미지를 출력할 수 있다. express 모듈의 내부 모듈이기 때문에 따로 설치할 필요없다.

[코드 - static 미들웨어를 사용한 이미지 제공]

// 모듈 추출
var express = require('express');

// 서버 생성
var app = express();

// 미들웨어 설정
// 전역변수 __dirname을 사용해 폴더 위치를 지정하면 나머지는 express 모듈이 전부 알아서 처리해준다.
app.use(express.static(__dirname + '/public'));
app.use(function(request,response){
    response.writeHead(200, {'Content-Type':'text/html'});
    response.end('<img src="/fullimage1.jpg" width="100%" />');
});

// 서버 실행
app.listen(8888);

실행을 위해서는 서버 실행파일이 있는 폴더에 public 폴더를 생성한 후 fullimage1.jpg 파일을 위치시켜 놓아야 한다.

7. morgan 미들웨어

웹 요청이 들어왔을 때 로그를 출력하는 미들웨어이다. 외부 모듈이기 때문에 따로 설치해야 한다.

[콘솔 입력 - morgan 미들웨어 인스톨]

$ npm install morgan

[코드 - morgan 미들웨어]

var express = require('express');
var morgan = require('morgan');

// 서버 생성
var app = express();

// 미들웨어 설정
app.use(morgan('combined'));    // morgan() 메서드의 매개변수로 combined를 입력했다. 가장 기본적인 로그형식.
app.use(function(request,response){
    response.send('<h1>express Basic</h1>');
});

// 서버 실행
app.listen(8888);

원하는 토큰을 조합하면 다양한 로그를 확인할 수 있다.

[morgan 미들웨어의 토큰]