[NodeJS] body-parser란?

▶ body-parser란?

 

1. body-parser란?

body-parser는 node.js의 모듈입니다.

클라이언트 POST/PUT request data의 body로부터 파라미터를 편리하게 추출합니다.

 

2. body-parser가 없을 때의 문제점: undefined

만약에 버튼을 클릭했을 때 서버에게 다음과 같은 데이터를 body에 담아 POST request를 보내기 위해

아래와 같은 온클릭 함수를 정의했다고 해 봅시다.

const onClickPost = () => {
    const data = { title: "프론트엔드", label: "안녕하세요" };

    axios.post("/api/hello", data).then((res) => {
      console.log(res);
      setData(res.data);
    });
  };

 

이때 서버에서 express를 써서 클라이언트의 POST request를 처리하는 방법은 다음과 같습니다.

const express = require("express");
const app = express();

app.post("/api/hello", (req, res) => {
  console.log(req.body);
});

 

이제 클라이언트와 서버를 둘다 실행해 주고

클라이언트에서 버튼을 눌러 데이터를 담은 body를 POST request하게 되면

 

일단 우리가 원하는 바는 서버 콘솔에 req.body

즉 보낸 데이터가 그대로 출력되어야 합니다.

 

하지만 실제로 실행을 해보게 되면 undefined 라고 출력이 되게 됩니다.

그 이유는 req.body는 body-parser를 사용하기 전에는 디폴트 값으로 Undefined이 설정되기 때문입니다.

 

따라서 이 문제를 해결하기 위해서는 body-parser를 사용하면 되겠습니다.

 

3. body-parser 설치, 불러오기

npm install body-parser

설치를 완료했다면 서버 코드로 돌아가서 아래와 같이 수정해 줍니다.

const express = require("express");
const bodyparser = require("body-parser");
const app = express();

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

app.post("/api/hello", (req, res) => {
  console.log(req.body);
});

이제는 body의 data를 읽어낼 수 있습니다.

 

4. Express의 body parser

express.js도 빌트인 body parser가 존재하기도 합니다.

따라서 body-parser 모듈을 따로 설치 및 import 하지 않더라도 다음과 같은 방법으로 해결 가능합니다.

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

app.use(express.json())

app.post("/api/hello", (req, res) => {
  console.log(req.body);
});