생활코딩_Node.js) Express에서의 post 방식

이번 강의에서는 Express 에서 post 방식으로 데이터를 보내고 이를 컨트롤러에서 받는 것을 해보았다.

스프링과 약간 다른 점이 있었다. 가장 큰 차이점이라고 한다면 굳이 post로 넘어온 데이터를 인식하기 위해서 따로 플러그인을 설치해줘야 한다는 점이었다.

순서대로 정리한다.

const express = require('express');

// bodyParser라는 모듈을 가져오게 된다

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

const app = express();

app.locals.pretty = true;

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

app.set('views', './views');

app.use(express.static('public'));

// 가져온 bodyParser라는 모듈을 app에 장착하게 된다(app.use)

// app에 장착된 모듈은 모든 요청들이 라우터를 거치기 전에

// 반드시 필터와 같은 개념으로 라우터보다 먼저 지나가게 된다

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

// jade로 만든 템플릿으로 보낸다 (form태그가 있는 페이지)

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

res.render('post_test');

});

// app.post()를 이용해서 post방식으로 넘어온 데이터를 받는다

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

// req.body로 post 방식으로 넘어온 데이터를 받을 수 있는 이유는

// 위에서 body-parser 모듈을 app.use를 통해 앱에 장착했기 때문에 가능

const first_var = req.body.var1;

const seconde_var = req.body.var2;

res.send(first_var + '/' + seconde_var);

});

app.listen(3000, function(){

console.log('Connected 3000 port!')

});

1. 요청에 대한 라우팅 설정

// jade로 만든 템플릿으로 보낸다 (form태그가 있는 페이지)

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

res.render('post_test');

});

2. .jade 템플릿 샘플

html

head

body

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

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

br

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

br

input(type='submit')

- 반드시 method를 post로 명시해줘야 post로 간다. get이 디폴트 값이다. get으로 보낼 것이면 원래 했던 방식으로 받고 post로 보낼 것이면 method='post'를 명시해주고 컨트롤러에서도 post 함수로 받아주어야 한다.

3. body-parser 모듈 call 후 장착(use)

// bodyParser라는 모듈을 가져오게 된다

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

// 가져온 bodyParser라는 모듈을 app에 장착하게 된다(app.use)

// app에 장착된 모듈은 모든 요청들이 라우터를 거치기 전에

// 반드시 필터와 같은 개념으로 라우터보다 먼저 지나가게 된다

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

겨우 post로 넘어온 데이터 받겠다고 플러그인을 더 깔아야 하는 수고를 해야 하는지 좀 의아스러웠다. 아마도 최대한 가볍게 하려고 기본에서 뺀 것 같기는 한데(나의 뇌피셜) post 데이터를를 받는 일이 매우 보편적인 일이라고 판단이 되었다면 기본 플러그인으로서 express에 포함되어 있었을 것인데 아마 그렇게 판단이 안되었나보다. 아무튼 express에서는 post로 넘어온 데이터를 받기 위해서는 body-parser 라는 모듈(미들웨어)를 따로 추가해주어야 한다. 아래는 express 의 API에서 가져온 글이다.

req.body

Contains key-value pairs of data submitted in the request body. By default, it is undefined, and is populated when you use body-parsing middleware such as body-parser and multer.

=> req.body는 key-value로 이뤄진 쌍의 데이터들을 가지고 있다. 기본적으로 이는 undefined 상태이다. body-parsing 미들웨어(body-parser나 multer와 같은)를 사용하면 정의가 가능하다.

4. app.post() 를 이용해 변수 할당

// app.post()를 이용해서 post방식으로 넘어온 데이터를 받는다

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

// req.body로 post 방식으로 넘어온 데이터를 받을 수 있는 이유는

// 위에서 body-parser 모듈을 app.use를 통해 앱에 장착했기 때문에 가능

const first_var = req.body.var1;

const seconde_var = req.body.var2;

res.send(first_var + '/' + seconde_var);

});

※ 이번 강의에서 제일 좋았던 부분은 app에 추가한 미들웨어가 라우터보다 먼저 요청을 받게 된다는 것이다.

즉, 모든 요청은 라우터를 거치기 전에 반드시 해당 app에 use된 모든 미들웨어를 거치게 되어 있다는 것이다.

AOP적인 관점으로 해석해도 될 것 같다.