Node/Express

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

bitkunst 2022. 2. 15. 15:49
반응형

 

 

이번 포스팅에서는 서버쪽에서 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 타입의 데이터 처리

 

 

 

 

 

 

반응형