[Node.js] 익스프레스 - 미들웨어 사용하기 (로그인 페이지 만들기)
익스프레스에서는 개발자가 다양한 기능을 사용할 수 있도록 미리 만들어 둔 여러가지 미들웨어를 제공한다. 특히 다른 개발자들이 만들어서 올려둔 미들웨어를 쉽게 끼워 넣을 수 있어 편리하게 사용할 수 있다. 자주 사용하는 몇 가지 기본 미들웨어에 대해 알아보자.
static 미들웨어는 외장 모듈로 만들어져 있어서 설치가 필요하다. cmd에서 프로젝트 폴더에 들어간 후 npm i serve-static --save를 입력한다.
[public] 폴더 안에 있는 파일들을 클라이언트에서 바로 접근할 수 있다. 예를 들어 프로젝트 폴더 안에 index.html 파일이 있다면 localhost:3000/index.html로 접근할 수 있다.
[public] 폴더 안에 있는 파일을 사이트의 /public 패스로 접근하고 싶다면 다음과 같은 코드를 사용하면 된다.
static 미들웨어
static 미들웨어는 특정 폴더의 파일들을 특정 패스로 접근할 수 있도록 만들어준다. 예를 들어 [public] 폴더에 있는 모든 파일을 웹 서버의 루트 패스로 접근할 수 있도록 만들고 싶다면 다음 코드를 추가하면 된다.
var static = require('serve-static');
...
app.use(static(path.join(__dirname, 'public')));
| cs |
static 미들웨어는 외장 모듈로 만들어져 있어서 설치가 필요하다. cmd에서 프로젝트 폴더에 들어간 후 npm i serve-static --save를 입력한다.
[public] 폴더 안에 있는 파일들을 클라이언트에서 바로 접근할 수 있다. 예를 들어 프로젝트 폴더 안에 index.html 파일이 있다면 localhost:3000/index.html로 접근할 수 있다.
[public] 폴더 안에 있는 파일을 사이트의 /public 패스로 접근하고 싶다면 다음과 같은 코드를 사용하면 된다.
app.use('/public', static(path.join(__dirname, 'public')));
| cs |
body-parser 미들웨어
이번에는 POST로 요청했을 때 요청 파라미터를 확인할 수 있도록 만들어 둔 body-parser 미들웨어에 대해 알아보자. GET 방식으로 요청할 때는 주소 문자열에 요청 파라미터가 들어가지만 POST 방식으로 요청할 때는 본문 영역(body 영역)에 요청 파라미터가 들어 있게 되므로 요청 파라미터를 파싱하는 방법이 GET 방식과 다르다.
웹 브라우저에서 POST 방식으로 요청하여 어떻게 요청 파라미터를 받는지 확인해보자.
먼저 프로젝트 폴더 안에 public 폴더를 만들고 login.html을 만든다.
login.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<h1>로그인</h1>
<br>
<form method="post">
<table>
<tr>
<td><label>아이디</label></td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td><label>비밀번호</label></td>
<td><input type="password" name="password"></td>
</tr>
</table>
<input type="submit" value="전송" name="">
</form>
</body>
</html>
| cs |
이제 app.js를 작성한다.
var express = require('express'),
http = require('http'),
path = require('path'),
bodyParser = require('body-parser'),
static = require('serve-static');
var app = express();
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(bodyParser.json());
app.use(static(path.join(__dirname, 'public')));
app.use(function (req, res, next) {
console.log('첫 번째 미들웨어 요청 처리');
var paramId = req.body.id || req.query.id;
var paramPw = req.body.password || req.query.password;
res.writeHead('200', {
'Content-Type': 'text/html;charset=utf8'
});
res.write('<h1>Express 서버에서 응답한 결과</h1>');
res.write('<div><p>Param ID: ' + paramId + '</p></div>');
res.write('<div><p>Param PW: ' + paramPw + '</p></div>');
res.end();
});
http.createServer(app).listen(3000, function () {
console.log('Express 서버가 3000번 포트에서 시작');
})
| cs |
우선 body-parser, serve-static을 npm으로 설치해주자.
body-parser 모듈을 사용하기 위한 설정은 두 줄이다. app 객체의 use() 메소드를 사용해 미들웨어를 설정하는데 bodyParser.urlencoded() 메소드를 호출하여 미들웨어를 설정하면 application/x-www-form-urlencoded 형식으로 전달된 요청 파라미터를 파싱할 수 있다. 이 형식은 일반적인 요청 파라미터의 형식이다. bodyParser.json() 메소드를 호출하여 미들웨어를 설정하면 application/json 형식으로 전달된 요청 파라미터를 참조할 수 있다.
var paramId = req.body.id || req.query.id; 으로 작성한 이유는 GET 방식, POST 방식 요청을 모두 고려하기 위해 두 가지 요청 파라미터를 모두 검사하는 것이다.
이제 app.js 파일을 실행하고 브라우저에서 localhost:3000/login.html로 접속 후 아이디와 비밀번호를 입력하고 전송하면 응답 결과를 볼 수 있다.
여기서 서버 코드에서 use() 메소드로 설정한 함수는 login.html 문서에 접근할 때 호출되는 것이 아니고 전송 버튼을 클릭하여 POST로 요청했을 때 호출되며 작업이 수행된다.
-
이제 GET 방식, POST 방식 모두에서 요청 파라미터를 확인할 수 있다. 노드에서 미들웨어를 사용한다는 것이 얼마나 편리한 지 느낄 수 있다.
댓글 없음: