[node.js] 프론트 없이 POST request 확인하기(feat. 포스트맨)

0. 목차

1. 개요

2. curl

3. Content-type

4. 포스트맨

1. 개요

최근 몇번의 팀플을 위한 팀플 연습..? 을 통해

브랜치를 나누고 

깃헙에 push 하면서

프론트와 백을 나눠서 작업하는 걸 해봤다.

프론트와 백이 동시에 작업을 시작했는데,

몇 가지 문제 점이 있었다.

 

1-1. ..? input name 뭘로 할거임..?

예를 들어 로그인 기능을 만든다고 해보자.

<form action="/user/login" method="POST">
  id : <input type="text" name="userid" /> 
  pw : <input type="text" name="userpw" />
  <button type="submit">로그인</button>
</form>

프론트가 신나게 front 브랜치에다가 html 태그를 작성을 했다.

 

그리고 백엔드도 신나게 user branch 에다가 라우터를 만들었다.

app.post('/user/login', (req, res) => {
    const { id, pw } = req.body;
    ...
    res.render('index.html')
});

 

프론트 : 저 로그인 다대써요!

백: 저두요! 그럼 merge 해보쉴?

 

해서 merge를 했는데 과연 위의 코드들이 제대로 동작할까?

바로 에러날거다.

왜냐하면, 프론트에서 작성한 html을 보면

id와 pw 를 입력하는 Input 의 name 이 각각, userid 와 userpw로 되어있다.

그럼 저기서 submit을 때리면, 

request body 에는 userid 와 userpw가 property 의 key가 될것이다.

 

그런데 백이 만든 라우터의 미들웨어를 보면

object detructuring 을 이용해 req.body 에서 key 가 id 와 pw 인 property의 value를 각각 id와 pw 에 할당한다.

...으로 중략 되어있지만,

중략된 부분은 당연히 입력된 값과 DB에 저장되어 있는 값을 비교해서 로그인 여부를 결정해 줄것이다.

그런데 지금 실제로 req.body 에 들어있는 프로퍼티의 key 는

id pw 가 아닌 userid userpw 이다.

그러므로 저 ...로 중략된 부분에서 레퍼런스 에러가 발생할것이다.

아마도.

 

근데 POST가 과연 하나일까...?

이것저것 굉장히 많은 POST가 들어갈텐데 프론트랑 백이랑 서로 전부 다른 값으로 전달하고 받고 있다면..?

수정하기 뒤지게 귀찮을 거다...

 

그러므로, 작업에 들어가기 전, 어떤 값을 어떤이름으로 전달해줄것인지 먼저 정하는 것이

서로의 정신건강에 이롭다.

 

프론트: 하하 로그인 POST 의 id 랑 pw 의 input name 은 각각 userid/ userpw 로 할게용^^

백 : 호호 그러면 저도 거기에 맞춰서 만들게요 ^^

 

매우 평화롭다.

 

2. curl 이용해 확인

또 한가지 문제점,

예를들어 백이 손이 빨라서 로그인 기능을 다 만들었다.

그런데 아직 프론트는 완성이 안된 상태

 

get 요청은 사실 문제가 없다.

그런데 post 요청이라면?

 

post 요청이 와야 기능개발의 결과를 확인 할 수 있는데,

자기가 만든 기능이 잘 동작하는 지 어떻게 확인할 수 있을까..?

 

app.post('/user/login', (req, res) => {
  const { id, pw } = req.body;

  res.send(`${id},${pw}`);
});

이걸 놀랍게도 터미널에서 확인 할 수 가 있다.

 

curl -X POST \
-d "id=kong1234&pw=1234" \
http://localhost:3000/user/login/

터미널에 이거 입력하면 된다.

결과 부터 보자

 

res.send로 보낸 id 와 pw 가 터미널에 출력이 된다.

 

일단 위의 저 명령어를 해석해보면,

curl 아 http://localhost:3000/user/login/ 에다가 post 요청을 보내주렴

그런데 요청 보낼 때 이 데이터도 같이 보내주렴 "id=kong1234&pw=1234" 란다.

 

이다.

 

위의 명령어를 입력하면 

그러면  /user/login 은 curl 을 통해 보내진 요청과 데이터를 받아서

결과를 출력한다.

 

3. Content-type

이부분은 조금 원래의 목적과 벗어났지만 한김에 조금 뒤집어 까볼 필요가 있다.

app.post('/user/login', (req, res) => {
  const { id, pw } = req.body;

  res.send(`${id},${pw}`);
});

이코드랑

 

curl -X POST \
-d "id=kong1234&pw=1234" \
http://localhost:3000/user/login/

이 명령어가 만나서

 

이 결과물이 나온데 까지 매우 중요한 역할을 해준 친구가 있다.

 

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

 

바로 이 친구다.

post 요청과 함께 전송된 데이터의 형식이 queryString 일때 그걸해석해 주는 친구.

 

이 친구에 대해 조금 알아보자.

 

app.post('/user/login', (req, res) => {
  console.log(req.headers);
  const { id, pw } = req.body;

  res.send(`${id},${pw}`);
});

console.log 를 이용해 req.headers 를 출력해보면

 

{
  host: 'localhost:3000',
  'user-agent': 'curl/7.77.0',
  accept: '*/*',
  'content-length': '19',
  'content-type': 'application/x-www-form-urlencoded'
}

 

요렇게 된 애가 나온다.

우리가 주의깊게 봐야하는 거는 content-type 이다.

저기 content-type 이 key인 프로퍼티의 value 가 

application/x-www-form-urlencoded

일 때 

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

이 친구가 동작한다.

확인을 위해 content-type 을 application/json 으로 변경하는 요청을 해보려한다.

 

curl -X POST \
-d '{"id":"kong1234","pw":"1234"}' \
-H "content-type:application/json" \
http://localhost:3000/user/login/

요렇게 명령어를 실행시키면,

 

요렇게 출력이 된다.

content-type 이 application/json 으로 변경이 됐는데

res.send 를 통해 전달한 id 와 pw 가 undefined 로 출력이 된다.

 

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

 

이 친구가 동작을 못했기 때문에 그런거다.

그럼 우린 여기서 저 친구는 전달되는 데이터가 queryString 일때만 동작이 되는 구나 를 알수 있다.

 

그럼 json 형식으로 데이터를 받을때는 어떻게 해야할까 

 

app.use(express.json());

이친구를 쓰면 된다.

확인을 위해 server.js에 이친구를 입력해주고,

다시 명령어를 실행시켜보자.

전처럼 잘 찍힌다.

 

결론: 

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

얘는 데이터가 queryString 일때

 

app.use(express.json());

얘는 데이터가 json 형식일 때

 

4. 포스트맨

 

이거하려고 사실 굉장히 멀리 돌아옴.

 

저거 터미널로 curl 명령어를통해 http 통신을 해서 

post를 확인해볼 수도 있지만,

 

사실.. 귀찮다..

그래서 쓰는게 postman!

 

왼쪽 탭에서 url과 request METHOD 를 지정하고

상단메뉴에서 req.body 로보낼건지 

params 로 보낼걸지 정하고

보낼 데이터 형식도 정해주고

데이터 내용도 입력해준뒤에

send 만 눌러주면,

하단 메뉴에 내용이 출력된다.

개편하고 개신기하다.