body-parser 미들웨어


이번에는 post로 요청했을때 요청 파라미터를 확인할 수 있도록 만들어둔 body-parser 미들웨어에 대해 알아보겠습니다.



get방식으로 요청할떄는 주소 문자열에 요청파라미터가 들어갑니다.


하지만 이와달리 post방식으로 요청할떄는 본문인 본문영역에 요청 parameter

들어있게 되므로 요청 parameter를 파싱하는 방법이 get방식과 다르게 됩니다.



body-parser 미들웨어는 클라이언트가 post 방식으로 요청할때 본문 영역에 들어있는

요청 파라미터들을 파싱하여 요청 객체의 body속성에 넣어줍니다.



다음과 같이 클라이언트 단에서 post 형식으로 전송할 수 있는 form을 생성해보겠습니다.


먼저 클라이언트 단의 login 페이지를 만들어보겠습니다.


public/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>





body-parser 모듈을 새로 추가해야됩니다.


다음과 같이 명령 프롬프트에서 입력합니다.

> npm install body-parser --save


다음은 웹서버 입니다.



//Express 기본 모듈 불러오기.

var express = require('express');
var http = require('http');
var static = require('serve-static');
var bodyParser = require('body-parser');
var path = require('path');
//Express 객체 생성
var app = express();

//기본포트를 app 객체에 속성으로 설정
app.set('port', process.env.PORT || 3000);


//body-parser를 사용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({extended: false}));

//body-parser를 사용해 application/json 파싱
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 paramPassword = 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 password: '+paramPassword+'</p></div>');
res.end();
});





//Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('Express 서버를 시작했습니다. : '+ app.get('port'));
});


클라이언트에서 요청할떄 get방식으로 요청할지, 아니면 POST방식으로요청할지 모르는 경우엔

어떻게 처리르해야할까요?

두가지 모두 고려하기위해서 다음처럼 두가지 요청 파라미터를 모두 검사합니다.


post 방식 vs get방식 모두 고려!
var paramId = req.body.id || req.query.id;


http://localhost:3000/login.html

아이디와 패스워드를 입력후 전송버튼을 누릅니다.



[결과화면] 


Express 역시 제공되는 middleware 가 있습니다.

대표적으로 static middleware가 있습니다.



static 미들웨어는먼저 static 미들웨어는 특정 폴더의 파일들을 특정path로 접근할 수 있도록 만들어 줍니다.


예시로, public 폴더에있는 모든 파일을 웹서버 root path로 접근할 수 있도록 만들고 싶다면 다음 코드를 추가하면됩니다.


static 미들웨어는 외장 모듈로 만들어져있으며 설치가 필요합니다. 명령프롬프트에서 아래 명령어를  사용해 설치합니다.

> npm install serve-static --save



이코드는 public 폴더안에있는 파일들을 클라이언트에서 바로 접근할 수있게합니다.


만약다음과같이
           /public/index.html 에 파일이있다면

 웹브라우져에서
   === > http://localhost:3000/index.html 처럼 접근할수있습니다.

app.use('/public, static(path.join(__dirname, 'public')));

 



./apps.js

//Express 기본 모듈 불러오기.

var express = require('express');
var http = require('http');
var static = require('serve-static');
var path = require('path');
//Express 객체 생성
var app = express();

//기본포트를 app 객체에 속성으로 설정
app.set('port', process.env.PORT || 3000);


app.use(static(path.join(__dirname, 'public')));


//Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('Express 서버를 시작했습니다. : '+ app.get('port'));
});





public/index.html



index.html 입니다.

명령 프롬프트에 다음과 같이명령합니다.
> node app.js

웹브라우져에서 localhost:3000/index.html 을치면 다음과 같은 페이지가 출력되게 됩니다.


node.js middleware 사용


Middleware란 Client의 요청이 들어왔을 때 매번 수행되어야할 행위들을  말합니다.


미들웨어를 전부통과하고나서 적절한 response를 client에게 주도록 설계합니다.



//Express 기본 모듈 불러오기.

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

//Express 객체 생성
var app = express();

//기본포트를 app 객체에 속성으로 설정
app.set('port', process.env.PORT || 3000);

//첫번째미들웨어 등록
app.use(function(req, res, next){
console.log('첫 번째 미들웨어에서 요청을 처리함.');
req.user ='jinss';
next();
});
//두번째 미들웨어 등록
app.use('/', function(req, res, next){
console.log('두 번째 미들웨어에서 요청을 처리함.');
res.writeHead('200', {'Content-Type': 'text/html; charset=utf8'});
res.end('<h1>Express 서버에서' +req.user+'가 응답한 결과</h1>');
});


//Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('Express 서버를 시작했습니다. : '+ app.get('port'));
});


[서버실행 화면]



[웹브라우저 접속시 웹브라우저 화면]


[서버 콘솔 응답]



middleware 는 위에서 아래로 등록한 순서대로 실행을 타게 됩니다.


첫번째 middleware 에서는 req객체에 user속성을 추가하고 그값으로 문자열을 하나 넣습니다.

두번째 middleware에서 req객체에 설정된 user속성을 확인하여 사용자 정보를 사용할 수 있습니다.



참고>>

middleware 안에서는 기본적으로 요청 객체인 req와 응답객체인 res 객체를 Parameter로 전달받아 사용할수있습니다.



그리고 이 middleware함수를 호출한 app객체도 참조할수있습니다.

req.app 코드를 사용하면 app 객체 참조가능합니다.



middleware함수를 보면 요청 객체와 응답 객체가 파라미터로 전달되며, 그다음 middleware로

넘길 수 있는 next 함수 객체도 전달됩니다. 따라서 next 함수 객체를

실행하면 다음middleware로 넘길 수 있습니다.



middleware를 사용하기 위해서 먼저 use() 메소드를 호출해야하며, middleware 2개를 등록했습니다.



+ Recent posts