[node.js] express 모듈2

http 모듈과 express 모듈로 만든 서버의 가장 큰 차이점은 express 모듈은 request 이벤트 리스너를 연결하는데 use() 메서드를 사용한다는 것.

이유는 use() 메서드는 여러번 사용할 수 있다. 그리고 use() 메서드의 매개변수에 function(request,response,next){} 형태의 함수를 입력한다. 

next는 다음에 위치하는 함수를 의미한다.

예)

// 모듈을 추출합니다.

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>');

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

 

요청의 응답을 완료하기 전까지 요청 중간중간에 여러 가지 일을 처리할 수 있다. 

그래서 use() 메서드의 매개변수에 입력하는 함수를 미들웨어라고 부른다.

미들웨어에서 request 객체와 response 객체에 속성 또는 메서드를 추가하면 다른 미들웨어에서도 추가한 속성과 메서드를 사용할 수 있기 때문이다.

 

// 모듈을 추출합니다.

var express = require('express');

 

// 서버를 생성합니다.

var app = express();

 

// 미들웨어를 설정합니다.

app.use(function (request, response, next) {

// 데이터를 추가합니다.

request.number = 52;

response.number = 273;

next();

});

app.use(function (request, response, next) {

// 응답합니다.

response.send('<h1>' + request.number + ' : ' + response.number + '</h1>');

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

 

 

express 모듈과 함께 사용할 수 있는 미들웨어

미들웨어	설명
router	페이지 라우트를 수행한다.
static	특정 폴더를 서버의 루트폴더에 올린다.
morgan	로그 정보를 출력한다.
cookie parser	쿠키를 분해한다.
body parser	post 요청 매개변수를 추출한다.
connect-multiparty	post 요청 매개변수를 추출한다.
express-session	세션 처리를 수행한다.
csurf	csrf 보안을 수행한다.
error handler	예외 처리를 수행한다.
limit	post 요청의 데이터를 제한한다.
vhost	가상 호스트를 설정한다.

 

 

router 미들웨어

앞에서 http 모듈을 사용할 때는 if 조건문을 사용해서 페이지 라우팅을 구현했지만 express모듈의 router 미들웨어를 사용하면 페이지 라우팅을 쉽게 구현 할 수 있다.

 

app객체의 메서드

get(path, callback[, callback...]) -get 요청이 발생했을 때의 이벤트 리스너를 지정한다.

post(path, callback[, callback...]) -post 요청이 발생했을 때의 이벤트 리스너를 지정한다.

put(path, callback[, callback...]) -put 요청이 발생했을 때의 이벤트 리스너를 지정한다.

delete(path, callback[, callback...]) -delete 요청이 발생했때 이벤트 리스너를 지정한다.

all(path, callback[, callback...]) -all 요청이 발생했을 때의 이벤트 리스너를 지정한다.

 

예)

// 모듈을 추출합니다.

var express = require('express');

 

// 서버를 생성합니다.

var app = express();

 

// 라우터를 설정합니다.

app.get('/a', function (request, response) {

response.send('<a href="/b">Go to B</a>');

});

app.get('/b', function (request, response) {

response.send('<a href="/a">Go to A</a>');

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

 

라우팅할 때 토큰을 사용할 수도 있다.

 

// 모듈을 추출합니다.

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>');

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

http://127.0.0.1:52273/page/23 에 접속하면

23 page 출력

 

params 속성과 query 속성

params /:id처럼 : 기호를 사용해 지정된 라우팅 매개변수

query ?name=A 와 같은 요청 매개변수

 

 

전체선택자

express 모듈은 라우터 메서드를 사용한 순서대로 요청을 확인하므로 전체 선택자를 사용하는 라우터 메서드는 반드시 가장 마지막에 위치해야 한다.

// 모듈을 추출합니다.

var express = require('express');

 

// 서버를 생성합니다.

var app = express();

 

// 라우터를 설정합니다.

app.get('/index', function (request, response) {

response.send('<h1>Index Page</h1>');

});

app.all('*', function (request, response) {

response.status(404).send('<h1>ERROR - Page Not Found</h1>');

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

http://127.0.0.1:52273/index 이외의 요청은 모두 에러 메시지를 출력한다.

 

라우터 모듈화

// index.js 파일

// 모듈을 추출합니다.

var express = require('express');

 

// 서버를 생성합니다.

var app = express();

app.use('/a', require("./routerA").router);

app.use('/b', require("./routerB").router);

app.use('/c', require("./routerC").router);

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

 

// routerA.js 파일

// 모듈과 변수 선언

var express = require('express');

var router = express.Router();

 

// 페이지 라우트

router.get('/index', function (request, response) {

response.send('<h1>Index Page</h1>');

});

 

// 외부로 뺍니다.

exports.router = router

 

static 미들웨어

먼저 app.js와 public 폴더를 구성한다. public 폴더에는 이미지 파일, 자바스크립트 파일, css파일등을 넣을 수 있다.

예)

// 모듈을 추출합니다.

var express = require('express');

 

// 서버를 생성합니다.

var app = express();

 

// 미들웨어를 설정합니다.

app.use(express.static(__dirname + '/public'));

 

app.use(function (request, response) {

// 응답합니다.

response.writeHead(200, { 'Content-Type': 'text/html' });

response.end('<img src="/Chrysanthemum.jpg" width="100%" />');

});

 

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

static 미들웨어를 사용하면 지정한 폴더에 있는 내용을 모두 웹 서버 루트 폴더에 올린다.

 

 

morgan 미들웨어 : 웹요청이 들어왔을 때 로그를 출력하는 미들웨어

 

설치

$ npm install morgan

 

예)

// 모듈을 추출합니다.

var express = require('express');

var morgan = require('morgan');

 

// 서버를 생성합니다.

var app = express();

 

// 미들웨어를 설정합니다.

app.use(morgan('combined'));

app.use(function (request, response) {

response.send('<h1>express Basic</h1>');

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

 

morgan의 매개변수에 combined을 입력했다. 가장기본적인 로그 형식이다.

 

morgan 미들웨어의 토큰

예)

// 모듈을 추출합니다.

var express = require('express');

var morgan = require('morgan');

 

// 서버를 생성합니다.

var app = express();

 

// 미들웨어를 설정합니다.

app.use(morgan(':method + :date'));

app.use(function (request, response) {

response.send('<h1>express Basic</h1>');

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

 

morgan미들웨어의 기본형식 예)

 

// 모듈을 추출합니다.

var express = require('express');

var morgan = require('morgan');

 

// 서버를 생성합니다.

var app = express();

 

// 미들웨어를 설정합니다.

app.use(morgan('short'));

app.use(function (request, response) {

response.send('<h1>express Basic</h1>');

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

 

cookie parser 미들웨어

cookie parser 미들웨어를 사용하면 request 객체와 response 객체에 cookies 속성과 cookie() 메서드가 부여된다.

 

설치

$ npm install cookie-parser

 

 

cookie parser 미들웨어를 사용한 쿠키 추출

 

// 모듈을 추출합니다.

var express = require('express');

var cookieParser = require('cookie-parser');

 

// 서버를 생성합니다.

var app = express();

 

// 미들웨어를 설정합니다.

app.use(cookieParser());

 

// 라우터를 설정합니다.

app.get('/getCookie', function (request, response) {

// 응답합니다.

response.send(request.cookies);

});

app.get('/setCookie', function (request, response) {

// 쿠키를 생성합니다.

response.cookie('string', 'cookie');

response.cookie('json', {

name: 'cookie',

property: 'delicious'

});

// 응답합니다.

response.redirect('/getCookie');

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

http://127.0.0.1:52273/setCookie 접속

string 쿠키와 json 쿠키를 생성

 

cookie() 메서드의 옵션 속성

httpOnly – 클라이언트의 쿠키 접근 권한을 지정한다.

secure – secure 속성을 지정한다.

expires – expires 속성을 지정한다.

maxAge – 상대적으로 expires 속성을 지정한다.

path – path 속성을 지정한다.

 

 

body parser 미들웨어는 post 요청 데이터를 추출하는 미들웨어다. 이 미들웨어를 사용하면 request 객체에 body 속성이 부여된다.

 

설치

$ npm install body- parser

 

폴더구성

app.js , login.html

 

login.html

<!DOCTYPE html>

<html>

<head>

<title>Login Page</title>

</head>

<body>

<h1>Login Page</h1>

<hr />

<form method="post">

<table>

<tr>

<td><label>Username</label></td>

<td><input type="text" name="login" /></td>

</tr>

<tr>

<td><label>Password</label></td>

<td><input type="password" name="password" /></td>

</tr>

</table>

<input type="submit" name="" />

</form>

</body>

</html>

 

app.js

// 모듈을 추출합니다.

var fs = require('fs');

var express = require('express');

var cookieParser = require('cookie-parser');

var bodyParser = require('body-parser');

 

// 서버를 생성합니다.

var app = express();

// 미들웨어를 설정합니다.

app.use(cookieParser());

app.use(bodyParser.urlencoded({ extended: false }));

 

// 라우터를 설정합니다.

app.get('/', function (request, response) {

if (request.cookies.auth) {

response.send('<h1>Login Success</h1>');

} else {

response.redirect('/login');

}

});

 

app.get('/login', function (request, response) {

fs.readFile('login.html', function (error, data) {

});

});

 

app.post('/login', function (request, response) {

// 쿠키를 생성합니다.

var login = request.body.login;

var password = request.body.password;

 

// 출력합니다.

console.log(login, password);

console.log(request.body);

 

// 로그인을 확인합니다.

if (login == 'rint' && password == '1234') {

// 로그인 성공

response.cookie('auth', true);

response.redirect('/');

} else {

// 로그인 실패

response.redirect('/login');

}

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

http://127.0.0.1:52273/login 에 접속하면 로그인 입력 양식이 출력됨.

username에 rint를 password에 1234를 입력하고 제출.

 

connect-multipart 미들웨어

일반적인 입력양식은 application/x-www-form-urlencoded 인코딩 방식을 사용한다.

하지만 파일을 전송할 때 multipart/form-data 인코딩 방식을 사용한다.

body-parser 미들웨어는 multipart/form-data 방식을 지원안하기 때문에 connect-multipart 미들웨어 사용.

 

설치

$npm install connect-multiparty

 

폴더구성

8-26.js , htmlPage.html , multipart(폴더)

 

htmlPage.html

 

<!DOCTYPE html>

<html>

<head>

<title>Multipart Upload</title>

</head>

<body>

<h1>File Upload</h1>

<form method="post" enctype="multipart/form-data">

<table>

<tr>

<td>Comment: </td>

<td><input type="text" name="comment" /></td>

</tr>

<tr>

<td>File: </td>

<td><input type="file" name="image" /></td>

</tr>

</table>

<input type="submit" />

</form>

</body>

</html>

 

미들웨어 설정

// 모듈을 추출합니다.

var fs = require('fs');

var express = require('express');

var multipart = require('connect-multiparty');

 

// 서버를 생성합니다.

var app = express();

 

// 미들웨어를 설정합니다.

app.use(multipart({ uploadDir: __dirname + '/multipart' }));

 

// 라우터를 설정합니다.

app.get('/', function (request, response) {

fs.readFile('htmlPage.html', function (error, data) {

response.send(data.toString());

});

});

app.post('/', function (request, response) {

console.log(request.body);

console.log(request.files);

response.redirect('/');

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

 

파일 이름 변경 및 제거 예)

 

// 모듈을 추출합니다.

var fs = require('fs');

var express = require('express');

var multipart = require('connect-multiparty');

 

// 서버를 생성합니다.

var app = express();

 

// 미들웨어를 설정합니다.

app.use(multipart({ uploadDir: __dirname + '/multipart' }));

 

// 라우터를 설정합니다.

app.get('/', function (request, response) {

fs.readFile('htmlPage.html', function (error, data) {

response.send(data.toString());

});

});

app.post('/', function (request, response) {

// 변수를 선언합니다.

var comment = request.body.comment;

var imageFile = request.files.image;

if (imageFile) {

// 변수를 선언합니다.

var name = imageFile.name;

var path = imageFile.path;

var type = imageFile.type;

// 이미지 파일 확인

if (type.indexOf('image') != -1) {

// 이미지 파일의 경우: 파일 이름을 변경합니다.

var outputPath = __dirname + '/multipart/' + Date.now() + '_' + name;

fs.rename(path, outputPath, function (error) {

response.redirect('/');

});

} else {

// 이미지 파일이 아닌 경우: 파일을 제거합니다.

fs.unlink(path, function (error) {

response.sendStatus(400);

});

}

} else {

// 파일이 없을 경우

response.sendStatus(404);

}

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

특정한 페이지 라우팅에만 미들웨어 적용

app.post('/', multipartMiddleware, function (request, response) {

/*생략 */

});

//일부페이지에서만 수행될 가능성이 높은 기능은 해당페이지 라우팅에만 적용하는 것이 좋다.

express-session 미들웨어

 

쿠키가 클라이언트의 웹브라우저에 정보를 저장하는 기술이라면, 세션은 서버에 정보를 저장하는 기술이다. 

일반적으로 세션은 클라이언트에 세션 식별자 쿠키를 부여한다. 그리고 부여한 세션 식별자 쿠키와 대응되는 서버에 위치하는 별도 저장소에 데이터를 저장한다.

이 미들웨어는 request 객체에 session 속성을 부여한다.

 

예)

// 모듈을 추출합니다.

var express = require('express');

var session = require('express-session');

 

// 서버를 생성합니다.

var app = express();

 

// 미들웨어를 설정합니다.

app.use(session({

secret: 'secret key',

resave: false,

saveUninitialized: true

}));

 

app.use(function (request, response) {

// 세션을 저장합니다.

request.session.now = (new Date()).toUTCString();

// 응답합니다.

response.send(request.session);

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

브라우저를 종료하고 다시 실행하면 쿠키가 소멸되므로 클라이언트는 자신이 소유한 정보를 잃게 된다. 

예를 들어 데스크톱 웹 페이지는 대부분 로그인하고 나서 웹 브라우저를 종료하면 세션 식별자 쿠키가 소멸되므로 자동으로 로그아웃된다.

세션은 언제까지 유지 될까?

 express 모듈은 기본적으로 웹 브라우저가 켜져 있는 동안만 세션을 유지한다.

만약 쿠키가 사라지는 시간과 쿠키의 name 속성을 바꾸고 싶다면 다음과 같이 session() 메서드의 매개 변수에 cookie 옵션 객체를 입력한다.

 

// 모듈을 추출합니다.

var express = require('express');

var session = require('express-session');

 

// 서버를 생성합니다.

var app = express();

 

// 미들웨어를 설정합니다.

app.use(session({

secret: 'secret key',

resave: false,

saveUninitialized: true,

cookie: {

maxAge: 60 * 1000

}

}));

 

app.use(function (request, response) {

// 세션을 저장합니다.

request.session.now = (new Date()).toUTCString();

// 응답합니다.

response.send(request.session);

});

 

// 서버를 실행합니다.

app.listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273');

});

 

session() 메서드의 옵션

name, store , cookie, secret, resave

 

 

session 미들웨어를 사용해서 만들어지는 request 객체의 session 속성

메서드

regenerate() - 세션을 다시 생성

destroy() - 세션을 제거

reload() - 세션을 다시 불러온다.

save() - 세션을 저장한다.