Node.js - express (11) express.json()

 

 

이번 포스팅에서는 서버쪽에서 JSON 형태의 데이터를 받는 방법에 대해 알아보고자 한다. WSL 환경에서 curl을 이용해 post 요청으로 데이터를 전달하는 방식으로 진행하였다.

 

지금까지 우리는 post 방식으로 전달된 데이터를 받을 때 아래의 코드를 사용했었다.

app.use(express.urlencoded({extended: true}))

해당 코드를 작성해 줌으로써 라우터의 미들웨어에서 req.body를 사용해 HTTP 패킷의 Request Body 영역에 담겨 있는 데이터를 가져올 수 있었다. 하지만 이 코드는 body 영역에 담겨있는 모든 데이터를 처리할 수 있는 마법의 구문이 아니다. body 영역에 데이터가 있을 때마다 이 코드가 실행되는 것이 아니라, 요청 헤더(Request Headers)에서 "Content-type: application/x-www-form-urlencoded" 일 경우에만 실행되는 것이다.  

 

Content-type이 "application/x-www-form-urlencoded"라는 것은 HTTP 패킷의 body 영역에 존재하는 데이터가 queryString 형태의 데이터일 때 해당 데이터를 처리할 수 있다는 의미이다.

 

하지만 웹서버가 전달받는 데이터의 형태가 queryString만 있는 것은 아니다. 많은 경우, JSON 형태로 데이터들이 전달된다. JSON 형태의 데이터는 요청 헤더에 "Content-type: application/json" 으로 되어있기 때문에 앞서 작성한 코드를 통해 데이터를 처리하는 것이 불가능하다.  JSON 형태의 데이터를 처리하기 위해서는 아래의 코드를 사용해줘야만 한다.

app.use(express.json())

 

실제로 어떤식으로 처리가 되는지 코드를 살펴보도록 하자.

// server.js 파일

const express = require('express')
const app = express()

app.use(express.urlencoded({extended: true}))

app.post('/', (req, res)=>{
    console.log(req.headers)
    let text = JSON.stringify(req.body)
    // JSON 데이터 타입을 String으로
    res.send(`hello ${text}`)
})

app.listen(3001, ()=>{
    console.log('server onload')
})

app.use(express.json( ))을 사용하지 않은 상태에서 다음과 같이 wsl의 curl을 이용해 post 방식의 요청을 보내보았다. (참고로 curl은 cli 방식으로 서버에 요청을 보낼 수 있는 리눅스 명령어이다.)

< queryString 형태 >

curl -X POST \
-d "name=ingoo&subject=hi&content=내용" \
-H "Content-type:application/x-www-form-urlencoded" \
http://localhost:3001/

console.log(req.headers)

데이터 타입이 queryString 형태이고 요청 헤더의 내용이 "Content-type:application/x-www-form-urlencoded" 일 때 데이터를 잘 받아온 것을 확인할 수 있다. 

 

 

이제 데이터 타입을 JSON으로 변경해서 요청을 보내보도록 하자.

< JSON 형태 >

curl -X POST \
-d '{"name":"ingoo", "subject":"hi", "content":"내용"}' \
-H "Content-type:application/json" \
http://localhost:3001/

console.log(req.headers)

보이는 것과 같이 빈 객체가 전달된 것을 확인할 수 있다. JSON 타입으로 데이터를 전달했지만 server.js 파일 안에는 JSON 타입의 데이터를 전달받을 수 있는 코드가 존재하고 있지 않기 때문이다. 

app.use(express.json())

server.js 파일 안에 해당 코드를 추가해서 JSON 타입의 데이터를 처리할 수 있도록 하자.

 

더 이상 빈 객체가 전달되지 않는 것을 확인할 수 있다.

 

HTTP 패킷의 body 영역에 담겨있는 데이터는 그 형태가 다양하다. queryString 형태일 수도 있고 JSON 형태일 수도 있다. 또는 이 두가지의 데이터 포맷이 아닌 다른 형태의 데이터 포맷으로 전달될 수도 있다. 어떠한 데이터 포맷으로 데이터를 전달받는지에 따라 알맞은 처리를 해주는 작업이 수반되어야 함을 유의하도록 하자.

app.use(express.urlencoded({extended: true}))
// queryString 형태의 데이터 처리

app.use(express.json())
// JSON 타입의 데이터 처리