Node.js 생활코딩 정리 - POST방식을 이용한 정보의 전달

POST 방식을 이용한 정보의 전달

 

app.js 파일 추가후

 

//POST를 위한 예제

app.get('/form', function(req, res){

res.render('form');

});

 

app.get('/form_receiver', function(req, res){

var title = req.query.title;

var description = req.query.description;

res.send(title+','+description);

});

 

 

form.jade 파일

 

doctype html

html

head

meta(charset='utf-8')

body

form(action='/form_receiver' method='post')

p

input(type='text' name='title')

p

textarea(name='description')

p

input(type='submit')

 

 

를 하면 아래와 같이 된다.

 

 

이유는 POST방식으로 정보를 전송했으나 라우팅을 못했기 때문이다.

 

이를 위해서 app.js 소스를 다음과 같이 수정한다.

 

 

 

app.js

 

//GET을 위한 예제

app.get('/form', function(req, res){

res.render('form');

});

 

app.get('/form_receiver', function(req, res){

var title = req.query.title;

var description = req.query.description;

res.send(title+','+description);

});

 

//POST를 위한 예제

app.post('/form_receiver', function(req, res){

res.send('HELLO POST');

});

 

 

실행 화면

 

 

즉 라우팅이 제대로 된 것을 알 수 있다.

 

다시 app.js를 다음과 같이 수정한다

 

//GET을 위한 예제

app.get('/form', function(req, res){

res.render('form');

});

 

app.get('/form_receiver', function(req, res){

var title = req.query.title;

var description = req.query.description;

res.send(title+','+description);

});

 

//POST를 위한 예제

app.post('/form_receiver', function(req, res){

var title = req.body.title;

var description = req.body.description;

res.send(title+','+description);

});

 

 

 

실행 화면

또 에러가 난다. 뭔가 더 필요하다.

 

Express 메뉴얼을 보면

request 객체의 body부분을 보면 body-parser를 써야한다고 한다.

 

body-parser 설치 방법

 

npm install body-parser --save

그리고 bodyparser라는 미들웨어를 사용하기위해 소스를 수정한다. 노란색 부분을 추가한다

 

app.js

 

var express = require('express');

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

var app = express();

 

app.locals.pretty = true;//jade에서 자동 줄바꿈해줌

 

//view engine은 템플릿 엔진이라는 의미 jade와 express를 연결하는 코드임

app.set('view engine', 'jade');

app.set('views', './views');//views라는 폴더를 만들고 jade파일을 여기에 넣어야함

 

app.use(express.static('public'));//public 폴더를 정적으로 변환

 

// parse application/x-www-form-urlencoded body-parser를 사용하기 위한것(미들웨어)

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

 

//GET을 위한 예제

app.get('/form', function(req, res){

res.render('form');

});

 

app.get('/form_receiver', function(req, res){

var title = req.query.title;

var description = req.query.description;

res.send(title+','+description);

});

 

//POST를 위한 예제

app.post('/form_receiver', function(req, res){

var title = req.body.title;

var description = req.body.description;

res.send(title+','+description);

});

 

 

실행화면

이제 정상적으로 나온다. bodyparser가 먼저 실행되서 POST방식을 처리하게 해준다.

 

 

 

그렇다면 언제 POST를 쓰고 언제 GET을 써야하는가?

 

친구에게 링크를 쐈을 때 똑같은 정보를 보여주고 싶다면? GET 방식

 

form으로 ID와 PW를 로그인할 때는 POST로 써야 한다. 또한 전송할 데이터가 많아도 POST를 쓴다

 

 

출처 : https://opentutorials.org