Formdata로 사진 유형과 데이터 유형을 다르게 설정하기

이전 플젝 까지 프론트 쪽에서 firebase를 사용해서 사진을 저장해서 발생하는 여러가지 사진 로드 문제나 사진 업로드 문제가 있었어서 이번에는 formData를 사용해서 사진데이터를 빽쪽에서 관리하기로 했다. 내가 알기론 프론트에서 관리하는 firebase와 다른점은 빽에서 사진 형식을 Formdata형식으로 받아서 s3에 저장을 하고 변환해서 뽑아서 프론트로 전달해 주기 때문에 firebase보다 더 안정적으로 데이터 전달이 가능하고 했다. (아닐수도 있음)
처음에는 formdata 만들 때

 const form = new FormData();
	
    //다중 이미지 전송
    for(let i = 0 ; i < selectedImages.length ; i++){
        form.append("images", selectedImages[i]);
    }
        form.append('brand', brandRef.current.value);
        form.append('category', categoryRef.current.value);
        form.append('name', nameRef.current.value);
        form.append('size', sizeRef.current.value);
        form.append('price', priceRef.current.value);

이렇게 해서 헤더에 interceptor를 이용해서

config.headers = {
      "Content-Type": "multipart/form-data",
      accept: "application/json",
      Authorization: `Bearer ${token}`,
    };

이런 식으로 전달해 줬다. 그런데 오류오류!!!
빽쪽에서 사진만 form-data로 받고 나머지는 json형태로 받아야 한다고 하셨다.. 머리가 아파지기 시작 폭풍 구글링!!!!
구글링 결과

Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있다.
file은 multipart/form-data, data는 application/json 형식으로 보내기 위해 Blob을 사용했다.

이래서 data만을 따로 blob으로 만들기 위해 new Blob사용하기로 했다!

 const form = new FormData();
      const datas = {
        username: emailRef.current.value,
        nickname: nicknameRef.current.value,
        password: passwordRef.current.value,
      }
      form.append("signup", new Blob([JSON.stringify(datas)], {
        type: "application/json"
      }))
      form.append('profileImage', fileInputRef.current.files[0])
      console.log(form)

      const res = await apis.addUser(form);

이렇게 하고 헤더에는 위에서와 마찬가지로 interceptor로 content-type을 설정해줬따.
이러고도 오류가 발생해서 new Blob을 빼고 그냥 json형태로도 보내봤지만 Blob형태로 보내주는건 확실했고. 이것저것 만져보다가 성공!!! 백쪽에서 전달 받는 형태와 내가 보내주는 형태(배열 형태)가 다르기 때문이였다. 진짜 백분들이랑 플젝 진행 할 때는 계속계속 소통을 통해서 어디가 잘못 된지 알아내는게 중요한것 같다!! 히히 오늘도성공해따!