시작하기 전에...

저번 시간에는 Get/Post 방식에 대해서 이해하는 시간을 가졌습니다. 오늘은 Post로 받은 데이터를 어떻게 node.js에서 받고 다시 클라이언트로 보내는지 알아보겠습니다.

Post 데이터 받기

이번에는 별 다른 설명 없이 바로 vs로 넘어가겠습니다.
vs를 키면 저번 시간에 한 게 있을 겁니다. 이번엔 post를 만질꺼니
app.post에 집중합시다.

일단 클라이언트에서 form으로 보낸 데이터를 node.js에서 불러오기 위해서 저희는 드디어 request 즉, 요청 객체를 사용할 것입니다.

요청 객체의 설명을 간략하게 하자면 말 그대로 클라이언트에게 요청하는 객체입니다. 클라이언트가 보내준 데이터를 들고 올때 사용하는 객체입니다.

요청 객체에도 많은 모듈이 있지만 오늘 저희가 사용할 것은

req.body

이 코드를 사용할 것입니다. Post로 보내지는 데이터를 node.js에서 파싱하기 위해 사용하는 모듈입니다. 그럼 바로 테스트 해보죠.

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

저번 시간에 사용했던 post 코드를 요렇게 고치겠습니다. 제대로 값을 들고 왔는지 확인하기 위해서 console에 찍어줍시다.

얼레? 분명 요청 객체로 클라이언트의 데이터를 받아왔는데 undefined가 뜨네요?

제가 한 가지 빼먹은 게 있습니다. 그건 바로 'body-parser'에요.

Body-parser?

저희는 http의 body에 저장되있는 영역에서 데이터를 가져옵니다. 하지만 body-parser가 없으면 이 데이터를 해독할 수가 없어요! 그래서 저희는 body-parser라는 모듈을 사용해줘야합니다.

근데 최근에 이 모듈이 그냥 기본으로 설치가 되는 모듈이라서 별도의 설치를 해야하는 번거로움이 없어졌어요.

그래서 그냥 쓰는 법만 알면 됩니다. 사용법은 매우 간단해요.

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

단 두 줄이면 우리는 body-parser를 사용할 수 있습니다.
하나 하나 설명을 하자면
첫 번째는 json 형태로 body 데이터를 파싱하겠다는 겁니다.
두 번쨰는 파싱할때의 옵션을 지정하는 겁니다.
false면 기본으로 내장된 querystring 모듈을 사용하고
true면 따로 설치가 필요한 qs 모듈을 사용하여 쿼리 스트링을 해석합니다.

보통은 false를 씁니다. true를 쓰는 경우는 거의 못 봤습니다.
(솔직히 별 차이 없는 거 같습니다.)

아무튼 이제 저희는 body의 데이터를 파싱할 준비가 되었습니다.
바로 확인해볼까요??

결과

와우 저희가 설정한 json으로 데이터가 보기 좋게 파싱 되었습니다.
그럼 이 파싱한 데이터를 이용해볼까요??

이용하는 것도 정말 간단합니다.
req.body.key로 들고오시면 됩니다.
key가 뭐냐고요??
json 데이터의 앞에 있는 것을 key라고 합니다.
예를 들어 id가 key고 'test'는 value에요.

자 post를 바꿔봅시다.

res.send(`<span>${req.body.id}</span><p></p><span>${req.body.pwd}</span>`)

post로 받은 데이터를 클라이언트에 다시 보내서 띄워볼께요.

오우! 제대로 보이네요.

마치며...

자 이렇게 post로 데이터를 주고 받는 것을 해보았습니다. 다음에는 get을 해볼려고 해요. get은 querystring, params 두 가지의 방식으로 받을 수 있는데 두 가지 방식에 대해 알 수 있습니다.