이거 외않되 ㅠ

기존에 개발중이던 tlqkf.kr(리그오브레전드 트롤러 리뷰 사이트)를 바닐라js에서 react로 다시 만들던 중 axios로 보낸 post 요청이 제대로 작동하지 않았다.

1. 문제 발생지 찾기

부랴부랴 console.log(req)를 해보니 body:{} 인게 아닌가!
분명 바닐라 ajax 요청을 했을때는 정상적으로 보내졌었다.

2. 변인 통제하기

코린이의 친구 postman을 켜서 서버에 요청을 보내보았다. form-data 형식으로 보낼때는 여전히 body:{} 였고 x-www-form-urlencoded 로 보냈더니 제대로 body가 표시되었다.

3. 원인 찾기

그럼 axios가 x-www-form-urlencoded 형식으로 데이터를 보내지 않는 것이 문제였던 것이라고 생각했다. 그래서 axios가 x-www-form-urlencoded 형식으로 보내도록 config 페이로드에 header 설정을 적어주었다. 그러고 나니 body에 값이 들어가긴하는데 좀 이상하게 들어가서 찾아본결과 qs라는 라이브러리로 보내는 body 데이터를 바꿔줘야된단다..

4. 문제 해결?

위의 방법대로 하니 되긴하는데 클라이언트에서 axios 요청을 보낼때 써줘야 하는것이 너무 많았다. 이건 아닐텐데.. 라는 생각에 조금 더 공부를 해보니

5. 문제 해결!

axios는 기본적으로 x-www-form-urlencoded 형식이 아니라 json 형식으로 데이터를 보낸다는 것을 알게 되었고, 그러면 서버에서 x-www-form-urlencoded 형식이 아니라 json 형식을 파싱하면 되겠다고 생각했다. 그래서 body-parser 자료를 읽어본 결과
app.use(express.json());
(express에 body-parser가 내장되어 있기 때문에 express.json()임)
코드를 추가하였더니 아주 깔끔하게 작동하였다.

결론

기존 클라이언트에서는 ajax를 통해 요청을 보냈었는데 ajax의 기본 content-type이 x-www-form... 이거여서 작동했었던 것이고, json을 기본 content-type으로 하는 axios 에서는 바디파서 설정을 json으로 해주어야 했다!