문제의 발생
비어있는 FormData가 전달되는 현상이 발생했다.
난 분명 데이터를 담아서 보냈는데, 빈 객체가 전달된다.
결론부터 말하면 axios 요청으로 formdata를 넘길 때, 1번처럼 보낼 시 form이 빈 객체로 전달된다.
// 1, 빈 객체가 전달됨
axios
.post(
'/test1',
{ form },
{
headers,
}
)
}
// 2, 제대로 form이 전달됨
axios
.post(
'/test1',
form,
{
headers,
}
)
}
그러니 절대로, 1번처럼 {}를 씌우지 말자.
왜 이런 일이 발생할까...? 원인은 axios 에 있을 것이라 생각하여 axios 코드를 분석해봤다.
Axios 코드 분석
axios는 Content-Type과 data에 따라서 데이터를 가공한 뒤 이를 XMLHttpRequests를 이용하여 http 요청을 한다.
이 때, stringifySafely 함수에서 JSON.stringify를 이용하여 JSON 문자열로 변환한다.
이 때, 일반적인 object 객체의 경우 해당 코드에서 stringifySafely를 이용하여 문자열로 바꾸는데 FormData를 JSON.stringify로 변환하면 빈 객체가 된다.
그래서, 1번처럼 {}로 감쌀 경우 formData가 아니라 object로 취급되고 변환 거정을 거쳐서 서버에 빈 객체가 전달된다.
해결책은 위에 나와있듯 2번처럼 그 형식 그대로 보내면 된다. object로 보내는 게 아니라면, {}로 감싸서 보내는 형식은 지양하도록하자.
※ 만약, FormData를 JSON 화 하려면 FormData를 내부를 분해하여 별도로 JSON 화 해주어야한다.
느낀점
재밌었다.
"이 문제가 생기니 1번처럼 하지마세요." 란 글은 많은데, 원인을 알려주는 글이 없어서 스스로 분석하는데 재밌었다.
과정을 진행하면서, 라이브러리도 사람이 짠 코드라는 느낌을 강하게 받게 되었고, 이런 예외가 생길 수 있다는 점에서 공식문서도 좋지만 공개된 코드는 스스로 많이 분석해봐야겠다는 다짐을 하게되었다.
관련된 에러를 수정하면서, web에 대해서도 공부를 많이 하게되었고 또 fetch api를 이용하여 코드를 직접 구현하는 과정에서 혹시 이게 문제가 하는 가설(혹시 여기서도 JSON.stringify를 사용해서 빈 객체가 되는 건가?)을 세울 수 있었다. 다양한 경험은 정말 중요하다.
또, 예상외에 큰 수익이 있었는데 내 생각이 맞는 지 검증하는 과정에서 node_modules를 수정해야했다. 일반적으로 수정을 하려면, github에 fork 해서 수정하고 이것저것 하는 게 굉장히 귀찮았는데 이를 해결해주는 patch-package란 라이브러리를 알게되었다.
patch-package는 node_modules를 수정한 뒤 명령어를 치면 patch 파일을 생성해준다. 이 patch 파일은 수정사항을 현재 폴더에 적용할 수 있게 해준다. 이는 배포시에도 적용되며, 프로젝트 내부에서 library 수정사항을 관리할 수 있어서 굉장히 편리하고 너무나 필요한 라이브러리였다. 이에 대한 가벼운 사용법을 추후에 또 서술해보려한다.
참고문서
blog - 같은 에러를 겪은 사람 글 : https://velog.io/@kyungjune/axios%EB%A1%9C-image-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0
npm - patch-patckage : https://www.npmjs.com/package/patch-package
