[리팩토링] 이미지 업로드 : json-data => form-data

 

문제발생

 - 리팩토링 과정에서 RDS에 이미지를 직접 저장하는 로직이 아닌 S3에 저장하여 DB에는 url만 요청하는 방식으로 이미지 업로드 기능을 변경

- 이 과정에서 API 명세서의 data 키에 해당하는 파일 포맷이 변경됨

- 이에 따라 기존의 JSON-data 형식을 Form-data 형식으로 변경

 

리팩토링 전/후 코드

// 리팩토링 이전 코드
export interface MemberProfileUpdateImageDto {
  profileImage: string;
}

// TODO : Member의 프로필 사진의 수정 요청을 보내는 코드
export const updateMemberProfileImage = async (
  data: MemberProfileUpdateImageDto
) => {
  await tokenRequestApi.patch("/members/profile-image", data);
};

// 리팩토링 이후의 코드
export const updateMemberProfileImage = async (
  image: MemberProfileUpdateImageDto
) => {
  if (!image.image) throw new Error("이미지를 확인해주세요.");
  const formData = new FormData();
  formData.append("image", image.image);
  await tokenRequestApi.patch("/members/image", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
};

- FormData 클래스를 활용하여 formData라는 새로운 인스턴스를 생성

- append 이전의 formData에는 아무런 객체가 들어있지 않았으나, append메서드를 활용하여  { image : image.image } 라는 formData 인스턴스를 생성

- custom axios 함수의 header에 새로운 contents-type을 설정해줌 (기존 : json-data)