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

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



[결과화면] 


node.js (노드) get, post 요청 구현



http 모듈을 사용해 get 방식으로 다른 사이트 데이터를 요청하는 예제입니다.




var http = require('http');

var options ={
host: 'www.google.com',
port:80,
path: '/'
};

var req = http.get(options, function(res){
//응답처리
var resData = '';
res.on('data', function(chunk){
resData += chunk;
});

res.on('end', function(){
console.log(resData);
});

res.on('error', function(err){
console.log("오류발생: "+ err.message);
});

});



[결과화면]



http 객체 get() 메소드를 사용하면 다른 사이트에 요청을 보내고

응답을 받아 처리할 수 있습니다.


get()  메소드의 첫번째 파라미터는 다른 사이트의 정보를 담고있는 객체입니다. 그리고 두번째 parameter는 callback 함수 입니다.


응답 데이터를 받을떄는 data이벤트와 end 이벤트로 처리하면됩니다.


모두 resData 변수에 담아 두었고 event가 끝나는 시점에 console 창에 출력하게 됩니다.






post 방식

아래는 post방식입니다.



var http = require('http');

var opts = {
host: 'www.google.com',
port: 80,
method: 'POST',
path: '/',
header: {}
};


var resData = '';

var req = http.request(opts, function(res){
//응답처리
res.on('data', function(chunk){
resData += chunk;
});


res.on('end', function(){
console.log(resData);
});
});

opts.headers['Content-Type'] = 'application/x-www-form-urlencoded';
req.data = 'q=actor';
opts.headers['Content-Length'] = req.data.length;

req.on('error', function(err){
console.log("오류발생:"+ err.message);
})

//요청전송
req.write(req.data);
req.end();



웹 브라우저가 server에 요청을하면, 그때마다 서버에서 발생하는 이벤트를 정의해야합니다.

그럴때는 callback 함수를 등록하면 됩니다.


표는 서버객체에서 사용할 수 있는 이벤트들입니다.



node.js server 객체에서 사용할 수 있는 event 입니다.

 이벤트이름         

 설명

 connection

  클라이언트가 접속하여 연결이 만들어질 때 발생하는 이벤트입니다.

 request       

 클라이언트가 요청할 떄 발생하는 이벤트입니다.

 close         

  서버를 종료할때 발생하는 이벤트입니다.






var http = require('http');

//웹서버 객체 생성
var server = http.createServer();

//웹서버 시작하여 3000번 포트에서 대기 설정
var port = 3000;
server.listen(port, function(){
console.log('웹서버가 시작되었습니다.:% d', port);
});

//클라이언트 연결 이벤트 처리

server.on('connection', function(socket){
var addr = socket.address();
console.log('클라이언트가 접속했습니다.: %s, %d', addr.address, addr.port);
});
//클라이언트 요청 이벤트 처리
server.on('request', function(req, res){
console.log("클라이언트 요청이 들어왔습니다.");
console.dir(req);
res.writeHead(200, {"content-type":"text/html; charset=utf-8"});
res.write("<!DOCTYPE html>");
res.write("<html>");
res.write(" <head>");
res.write(" <title>응답페이지</title>");
res.write(" </head>");
res.write(" <body>");
res.write(" <h1>노드제이에스로부터 응답 페이지!</h1>");
res.write(" </body>");
res.end();
});
//서버종료 이벤트 처리
server.on('close', function(){
console.log('서버가 종료됩니다.');
});



서버 실행화면




웹브라우저와 클라이언트가 웹서버에 연결되면 connection 이벤트 발생! => server.on 에 등록한 콜백메소드가 호출되는것 확인가능합니다.



클라이언트가 특정path로 요청하면 request 이벤트가 발생합니다.

'request'라는 이름으로 콜백메소드를 등록했기에

"클라이언트 요청이들어왔습니다." 문구 확인가능합니다.



웹브라우져를 켜고, 127.0.0.1:3000 으로 접속합니다. 그러면 아래와같은 서버에서 응답, 그리고 웹브라우져에서 응답을 보실수있습니다.

서버(콘솔창) 응답.


웹페이지 응답.




또한, res객체에 writeHead(), write(), end() 메소드를 사용하면

클라이언트로 응답을 보낼 수 있음. end() 메소드는 응답을 보냈다는것을 의미합니다.




응답(response) 객체의 주요 메서드


  메소드 이름  

  설명

   writeHead(statusCode             

     [, statusMessage][,headers])


  응답으로 보낼 헤더를 만듭니다.

  write(chunk[, encoding][, callback]) 

 응답본문(body)데이터를 만듭니다. 여러번 호출될 수 있습니다.

 end([data][,encoding][,callback])

 클라이언트로 응답을 전송합니다. 파라미터에 데이터가 들어있다면 이 데이터를 포함시켜 응답을 전송합니다.

 클라이언트의 요청이 있을 때 한번은 호출되어야 응답을 보내며, 콜백함수가 지정되면 응답이 전송된후 

 콜백함수가 호출됩니다.



<<참고 

Content-Type에 설정할 수 있는 대표적인 MIME Type


 Content Type의 값

 설명

 text/plain

 일반 텍스트문서

 text/html 

 HTML문서

 text/css

 CSS문서

 text/xml

 XML 문서

 image/jpeg, image/png

 JPEG파일, PNG 파일

 video/mpeg, audio/mp3

 MPEG 비디오파일, MP3음악파일

 application/zip

 zip 압축파일








 노드 기본 http 모듈을 사용하면 웹서버기능을 담당하는 서버 객체를만들 수 있습니다.



var http = require('http');

//웹서버 객체 생성
var server = http.createServer();

//웹서버를 시작하여 3000번 포트에서 대기합니다.
var port = 3000;
server.listen(port, function(){
console.log('웹 서버가 시작되었습니다. : %d', port);
});





node.js server 객체의 메소드


Method 이름 

 설명 

 listen(port, [hostname], [backlog], [callback]) 

 서버를실행하여 대기시킵니다.

 close([callback])   

 서버를 종료합니다.




var http = require('http');

//웹서버 객체 생성
var server = http.createServer();

//웹 서버를 시작하여 127.0.0.1 ip와 3000번 포트에서 대기하도록 설정
var host = '127.0.0.1';
var port = 3000;
server.listen(port, host, '50000', function(){
console.log("웹서버가 시작되었습니다.: %s, %d",host, port);
});






[다음강의]

    ->    node js 외장, 내장 모듈 사용하기


 


 노드 (Node.js)에서 모듈 사용하기


main.js

    var module1 = require('module1');

    module1.func();


module1.js

    exports.func = 함수정의부분



 메인파일 코드중에 독립적인 기능은 별도파일로 분리할 수 있으며,  메인 파일에서 전체적인 실행순서나 흐름을 제어합니다.

  이렇게 분리된 파일을 노드에서는 모듈이라고 합니다.


 모듈이란 별도의 파일로 분리된 독립기능의모음이라서, 모듈을 만들어 놓으면 다른파일에서 모듈을 불러와 사용할 수 있습니다.



모듈만들어 내보내기.

exports v.s module.exports

모듈을 만들어서 다른파일에서 사용하기위해서는 exports혹은 module.exports를 사용합니다.


- exports에는 속성을 추가할 수 있어 여러개의 변수나 함수를 각각의 속성으로 추가할 수 있습니다.


- module.exports하나의 변수나 함수 또는 객체를 직접 할당합니다.




더하기함수 모듈 만들어 사용


calc.js 

exports.add = function (a,b){

   return a+b;

}


main.js

var cal = require('./calc');

console.log("모듈분리후 calc.js의 add 메소드 사용: %d ", calc.add(10,20));


[결과화면]







node.js 설치및 예제코드 작성해보는 시간을 가지겠습니다.



먼저 node.js 설치를 위해 다음의 공식 싸이트에 접속합니다.

https://nodejs.org/ko/download/



저는 아래그림처럼 window installer (.msi) 64-bit를 다운받고 실행하였습니다.



Next를 누릅니다.


Next를 누르시구요


설치가 진행됩니다.~!




설치가 끝났습니다.







예제코드 작성전에 Edit 프로그램을 또 다운받습니다. 

비쥬얼스튜디오코드  https://code.visualstudio.com/ 

해당 홈페이지의  download for window 를 클릭하여 받으신후 설치하시면 되겠습니다.



바탕화면에 꿩폴더를 만들고 그안에 app.js 파일을 생성합니다.


그리고 비쥬얼스튜디오 코드로 열어서 다음과 같이 작성합니다.



그 이후 꿩폴더에서 shift를 누른채 오른쪽 마우스를 클릭하시면, "여기서 명령창 열기"가 있습니다. 클릭해서 cmd 창을 뛰웁니다.



그다음 다음과 같이 명령을 칩니다.

> node app.js



화면과 같이 Hello node.js! 가 출력되면 성공적으로 node.js를 설치에 성공하신겁니다.

본격적으로 node.js 프로그래밍될 준비가 끝난겁니다.!


+ Recent posts