TIL: 서버에 데이터 보내기. formData, JSON.stringify() 방식 왜 쓰는가?

프로젝트 진행 중 서버에 POST 요청을 보내는건 항상 있는 일이다. 

예전 미니프로젝트 때 처음으로 데이터를 보냈었는데 사진과 text를 묶어서 보내느라 formData로 보냈었다. 유일무이한 방식인 줄 알았는데 아니었다. 

미니프로젝트의 코드는 아래와 같음

...
  const onSubmitHandler = async (event) => {
    event.preventDefault();
    let req = {
      title: title,
      content: content,
    };
    const formData = new FormData();
    formData.append("image", image);

    let json = JSON.stringify(req);

    const titleblob = new Blob([json], { type: "application/json" });
    formData.append("title", titleblob);

    const contentblob = new Blob([json], { type: "application/json" });
    formData.append("content", contentblob);

    const URL = "http://000000000/api/auth/posts";

    const data = await instance.post(URL, formData, {
      headers: {
        "content-type": "multipart/form-data",
      },
    });
    console.log(data);
    if (data.data.success) {
      navigate("/main");
    }
  };

  const uploadImage = (event) => {
    const file = event.target.files;
    setImage(file[0]);
  };
  ...

이미지는 formData로, 나머지는 json형식으로 받고싶다고 서버쪽에서 요청하셔서 그렇게 보냈었다.

 

 

이번엔 사진이 전송되긴하지만 내가 직접 S3에 이미지를 전송해서 url을 받아오는 방식이기 때문에 모든 데이터의 형식은 string이다.

이번에도 서버에서 string이니까 모두 Json 형식으로 보내주면 된다 하셔서 그렇게 한다고 했는데 계속 415오류가 떴다. 이유를 모르겠어서 기술매니저님에게 질문을 했는데, 기술매니저님이 내 코드를 보시곤 내가 formData 방식으로 보내는 이유를 물어보셨다. 나는 그렇게 보내는 것 밖에 몰랐기 때문, 이라는 답을 내놓았고 매니저님은 이유도 모르면서 코드를 이렇게 쓰는건 아주 큰 문제라고 하셨다. 

이게 문제의 코드인데, 데이터인 req에는 용량이 큰 file 같은 것은 들어가지 않는다. 그런데 formData 전송 방식은 용량이 큰 파일, 예컨대 사진파일 같은것을 보낼 때 쓰이는 방식이기 때문에 아주 작은 물건이 아주 큰 박스에 담겨서 보내지는것과 같다고 한다. 때문에 서버에서 설정한 데이터 형식과 일치하지 않는다는 에러를 뱉어낸다는 것. 

 

그래서 string형식의 데이터만 보내는 거라면

const handleRegisterButton = async () => {
    let req = {
      title: title,
      amount: amount,
      content: content,
      mapData: mapData,
    };
    console.log(req);
    const URL = "http://BASE_URL/api/post";
    const data = await axios.post(URL, req, {
      headers: {
        Authorization: localStorage.getItem("token"),
        Refreshtoken: localStorage.getItem("refresh"),
      },
    });
  };

이렇게 간단해진다. POST요청을 하니 415에러가 아니라 500에러가 나왔다. 

아. 우물안 개구리였다. 메모...구글링을 많이하자.....