[Node.js] 익스프레스 - 라우터 미들웨어로 로그인 페이지 구현하기
라우터 미들웨어 사용하기
이전 포스팅에서 로그인 페이지를 구현해보았다. 그런데 로그인이 아니라 사용자 리스트 등 다른 요청이 들어왔을 때도 use() 메소드로 설정한 미들웨어 함수가 항상 노출되기 때문에 요청 url이 무엇인지 일일이 확인해야하는 번거로움이 생긴다. 이를 해결해 주는 것이 라우터 미들웨어(router middleware)이다.
라우터 미들웨어는 익스프레스에 포함되어 있다. 이 라우터를 사용하면 사용자가 요청한 기능이 무엇인지 패스를 기준으로 구별하기 때문에 매우 중요하다. 라우터 미들웨어를 사용하려면 익스프레스 객체에서 라우터 객체를 참조해서 사용한다. 그리고 라우팅 함수를 등록하면 app 객체에 설정한다.
로그인 페이지 라우터로 구현하기
이제 이전에 했던 로그인 페이지를 라우터 미들웨어를 적용해서 만들어보자.
public/login.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<h1>로그인</h1>
<br>
<form method="post" action="/process/login">
<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();
var router = express.Router();
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(bodyParser.json());
app.use(static(path.join(__dirname, 'public')));
router.route('/process/login').post(function(req, res){
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.write("<br><a href='/login.html'>로그인 페이지로 돌아가기</a>");
res.end();
});
app.use('/', router);
http.createServer(app).listen(3000, function () {
console.log('Express 서버가 3000번 포트에서 시작');
})
| cs |
이전 로그인 페이지(login.html)에서 다른 점은 form에 action="/process/login"을 추가한 것이다. 그리고 노드에서는 라우터 객체에 라우팅 함수를 등록하여 /process/login 요청 패스를 처리하도록 만든다.
로그인 페이지에서 전송 버튼을 누르면 /process/login 패스로 요청하므로 post() 메소드로 등록한 콜백 함수가 호출된다. app.js 파일을 실행 후 localhost:3000/login.html에서 확인해보자.
정리해서, 라우터 미들웨어를 등록하면 app 객체에서 get() 또는 post() 메소드를 호출할 수 있으므로 먼저 app.post() 메소드를 호출하여 요청 패스를 라우팅하도록 등록한다. 그다음 클라이언트에서 /process/login으로 요청이 들어오면 이 라우팅 정보에 따라 해당 콜백 함수가 실행된다.
댓글 없음: