[NodeJS/Express] req.body에 undefined가 발생했을 때

---

Intro.

POST 요청할 때 body 파라미터에 값을 넣었는데 왜 undefined 이지?

 

node.js와 express로 프로젝트를 처음 시작해본 개발자라면

아마 한번씩은 경험해본 상황일 것이다.

 

아주 간단한 문제이지만 처음 만나면 당황하고 약간의 짜증(?)이 나기 쉬운 상황.

오늘은 그 문제에 대해 이야기 해보자!

---

Description.

1. npm 프로젝트 시작하기

npm init 명령어를 입력해서 새로운 프로젝트를 생성한다!

// npm 프로젝트 생성
npm init

명령어를 입력하고 Enter를 계속 입력해주면

package.json 파일이 생성된다!

 

2. express 설치하기

npm install express 명령어를 입력해서 express를 설치한다.

// express 설치
npm install express

 

3. POST 요청 보내기

 

3.1. 3333 포트에 서버 띄우기

POST 요청을 보내기 전 

먼저 3333  포트에 서버를 띄어보자

 

이를 위해 app.js 파일을 생성하고 

아래와 같이 코드를 작성하자!

// app.js

import express from 'express';

const app = express();
const port = 3333;

app.get('/', (req, res) => {
    res.status(200).send('server is running');
});

app.listen(port, () => {
    console.log(`server is running at ${port}`);
});

 

이제 터미널 창에

node app.js 명령어를 입력하면 

서버가 띄어진다!

 

3333번 포트에 띄어진 서버

 

3.2. POST 요청 endpoint 만들기

POST 요청 테스트를 위해 

새로운 endpoint '/test'를 만들어 보자

 

app.js에 아래와 같이 코드를 작성하자!

// app.js

import express from 'express';

const app = express();
const port = 3333;

app.get('/', (req, res) => {
    res.status(200).send('server is running');
});

// POST 테스트용 endpoint
app.post('/test', (req, res) => {
    const content = req.body;
    res.status(201).send(content);
})

app.listen(port, () => {
    console.log(`server is running at ${port}`);
});

 

POST요청에 대한 response는

상태코드 201과 body 값들이 반환되도록 했다.

 

3.3. Postman으로 POST 요청 보내기

이제 Postman으로 POST 요청을 보내자!

그리고 req.body 값이 잘 전달되었는지 확인해보자.

 

body 값으로 전달된 파라미터는 다음과 같다:

• user: joy 
• content: post undefined problem

Postman으로 POST 요청을 보냈을 때 Response

위 사진에서 확인할 수 있듯이

상태코드 201은 정상적으로 왔지만

body 값으로 전달된 user와 content 값들은 전달되지 않았다.

 

3.4. 문제 해결 (express.json)

문제는 express.json 미들웨어를 사용하면 해결된다.

express.json 미들웨어는 JSON Request Body를 파싱해서

express 서버에서 데이터를 처리할 수 있도록 해준다.

 

app.js 코드를 아래와 같이 수정하자.

// app.js

import express from 'express';

const app = express();
const port = 3333;

// express.json() 미들웨어를 use 메소드로 등록해주면 된다
app.use(express.json());

app.get('/', (req, res) => {
    res.status(200).send('server is running');
});

// POST 테스트용 endpoint
app.post('/test', (req, res) => {
    const content = req.body;
    res.status(201).send(content);
})

app.listen(port, () => {
    console.log(`server is running at ${port}`);
});

 

3.5. Postman 테스트 (문제 해결)

express.json()를 적용한 서버에

다시 Postman을 이용해 POST 요청을 보내보자! 

Postman으로 POST 요청을 보냈을 때 Response (express.json 적용)

시원하게 내가 보낸 body 값들이 정상적으로 전달된다!

---

References. 

- express.json() vs bodyParser.json() stackoverflow: https://stackoverflow.com/questions/47232187/express-json-vs-bodyparser-json

express.json vs bodyParser.json

 

- node.js + express 이미지 출처: https://velog.io/@gidong_e/Node.js-Express

[Node.js] Express