Express.js] body-parser로 form 요청 분석하기

서버로 들어온 정보를 분석해

우리가 다룰 수 있는 형태로 만들어내보자.

1. form 요청 만들기

먼저 html에서 데이터를 전달할 때 가장 많이 사용하는 form 태그로 POST 요청을 만들어보자.

 

요청부분

app.use("/add-product", (req, res, next) => {
  res.send(
    '<form action="/product" method="POST"><input type="text" name="title"><button>Add Product</button></form>'
  );
});

app.use("/product", (req, res, next) => {
  console.log(req.body);
  res.redirect("/"); // redirect(): express에서 추가된 경로 설정 함수
});

 

form은 POST 형태로 /product 미들웨어로 데이터를 전달한다.

익스프레스에서는 req.body를 통해 들어온 요청을 직접 확인할 수 있다.

res.redirect() 또한 익스프레스가 지원하는 경로 재지정 함수이다.

/product는 요청을 수행한 뒤 /로 이동하고 있다.

 

전체코드. 불필요한 consol.log는 삭제했다.

const express = require("express");

const app = express();

app.use("/", (req, res, next) => {
  next();
});

app.use("/add-product", (req, res, next) => {
  res.send(
    '<form action="/product" method="POST"><input type="text" name="title"><button>Add Product</button></form>'
  );
});

app.use("/product", (req, res, next) => {
  console.log(req.body);
  res.redirect("/"); // redirect(): express에서 추가된 경로 설정 함수
});

app.use("/", (req, res, next) => {
  res.send("<h1>Hello from Express!</h1>");
});

app.listen(3000);

 

 

localhost:3000/add-product

위 문자열을 add-product에서 전송하면

콘솔창에 'Good Morning!'이 출력될 것으로 예상된다. 그러나

공포의 undefined

 

undefined

즉, req.body에 어떤 값도 정의되지 않았다.

왜냐하면 req는 기본적으로는 요청을 분석하지 않기 때문이다.

요청을 분석해주는 미들웨어가 필요하다.

서드파티 패키지를 추가하자.

 

2. body-parser 설치하기

body parser는 말그대로 수신된 요청을 parse분석한다.

익스프레스 초기 버전에 탑재되었다가 떨어져나갔었는데,

많은 사용자의 요청으로 기본적으로 다시 탑재되었다고 한다.

 

그러나

추후 업데이트를 통해 다시 사라질 가능성이 있으므로

여기서는 서드파티 패키지를 설치하듯이 사용하도록 한다.

 

• node에 body-parser 설치하기

npm install --save body-parser

배포 후에도 당연히 필요하므로 --save 옵션으로 설치한다.

 

• body-parser import 및 미들웨어 추가하기

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

app.use(bodyParser.urlencoded({extended: false}));
//form으로 들어온 요청을 분석해줌. extended - 비표준 대상의 분석 가능 여부

bodyParser.urlencoded()는 수신된 요청이 옵션으로 설정할 수 있는 type과 일치하는 경우 분석해준다.

(여기서는 default 설정을 수정하지 않았다.)

공식 문서에서 자세한 내용을 확인할 수 있다.

https://expressjs.com/en/resources/middleware/body-parser.html

Express body-parser middleware

 

extended 옵션은 비표준 대상의 분석가능 여부를 말한다는데 뭔 말인지 잘 모르겠다.

 

전체코드

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.urlencoded({extended: false}));
//form으로 들어온 요청을 분석해줌. extended - 비표준 대상의 분석 가능 여부

app.use("/", (req, res, next) => {
  next();
});

app.use("/add-product", (req, res, next) => {
  res.send(
    '<form action="/product" method="POST"><input type="text" name="title"><button>Add Product</button></form>'
  );
});

app.use("/product", (req, res, next) => {
  console.log(req.body);
  res.redirect("/"); // redirect(): express에서 추가된 경로 설정 함수
});

app.use("/", (req, res, next) => {
  res.send("<h1>Hello from Express!</h1>");
});

app.listen(3000);

title과 문자열이 쌍으로 입력되었다.

 

extended: true 인 경우

 

3. post 요청에만 반응하는 미들웨어 만들기

간단하다. use를 post로 바꿔주면 된다.

//POST 요청에만 반응
app.post("/product", (req, res, next) => {
  console.log(req.body);
  res.redirect("/"); // redirect(): express에서 추가된 경로 설정 함수
});

//GET 요청에만 반응
app.get("/product", (req, res, next) => {
  console.log(req.body);
  res.redirect("/"); // redirect(): express에서 추가된 경로 설정 함수
});

 

주소창에 직접 product를 입력하면(get으로 접근하면)

product 미들웨어는 반응하지 않고, 기본 미들웨어인 /가 응답한다.

 

 

add-product를 통해 접근한 경우,

POST 요청을 인식해 미들웨어가 작동한다.