FormData 이미지 업로드

1. FormData의 역할과 특성

FormData는 파일 업로드를 포함한 여러 유형의 데이터를 HTTP 요청으로 전송할 때 사용하는 객체입니다. 특히, 일반적인 JSON 데이터가 아닌 바이너리 파일이나 다양한 타입의 데이터를 함께 보낼 때 사용됩니다.

• 일반적인 데이터 전송: JSON 형식으로 직렬화된 데이터는 application/json 헤더를 사용하여 전송됩니다. 이 경우, 데이터를 직렬화하고 서버에서 JSON 파서를 통해 쉽게 해석할 수 있습니다.
• FormData의 데이터 전송:
  • FormData는 데이터를 key-value 쌍의 형태로 저장합니다.
  • 바이너리 데이터(이미지, 비디오 등)나 텍스트 데이터를 동시에 처리할 수 있도록 설계되었습니다.
  • 데이터를 전송할 때는 HTTP 요청의 Content-Type이 *multipart/form-data로 설정되며, 데이터를 특정한 boundary를 기준으로 구분하여 직렬화합니다.

---

2. FormData와 multipart/form-data의 특수성

FormData를 사용할 때 특별한 처리가 필요한 이유는 데이터 직렬화 방식과 헤더 관리의 차이 때문입니다.

(1) Content-Type 설정

• JSON 요청:
  • 기본적으로 axios와 같은 HTTP 클라이언트는 요청의 Content-Type을 *application/json으로 설정하고 데이터를 JSON 문자열로 직렬화합니다.
  • 예:

    {
      "key": "value"
    }
    

• FormData 요청:
  • FormData는 데이터를 multipart/form-data로 전송해야 하며, 이 형식은 JSON과 다르게 데이터를 구분자(boundary)로 나누어 직렬화합니다.
  • 브라우저는 자동으로 boundary 값을 생성하지만, 이를 기반으로 적절한 Content-Type 헤더를 설정해야 하므로 추가 처리가 필요합니다.
  • 예:

    
    --boundary
    Content-Disposition: form-data; name="key"
    value
    --boundary--
    

(2) 데이터 직렬화 방식

• JSON 데이터는 문자열로 직렬화되며, 단순한 문자열 변환으로 처리할 수 있습니다.
• 반면 FormData는 파일과 문자열 데이터를 모두 처리할 수 있도록 데이터를 boundary를 기준으로 구분합니다. 이는 서버에서 데이터를 복원하는 데 필요한 정보를 포함합니다.

---

3. 왜 instance를 직접 사용해야 하는가?

프로젝트 내 apiRequest와 같은 유틸리티 함수는 일반적으로 JSON 데이터를 처리하도록 설계되어 있습니다. 그러나 FormData는 JSON과 다르게 다뤄져야 하기 때문에 다음과 같은 이유로 직접 instance를 사용하는 방식이 적합합니다.

(1) apiRequest의 한계

apiRequest는 주로 JSON 데이터를 처리하도록 설계된 함수로:

• 요청 데이터를 JSON 문자열로 변환합니다.
• 기본적으로 Content-Type을 application/json으로 설정합니다.
• FormData는 JSON으로 변환될 수 없기 때문에, apiRequest로 처리하기 어렵습니다.

(2) instance로 추가 설정

파일 업로드와 같은 작업은 FormData를 사용하여 Content-Type을 명시적으로 설정해야 하며, 이는 axios의 기본 설정만으로는 처리되지 않습니다. 따라서 instance를 직접 사용하여 다음과 같이 세부 설정을 수행합니다:

1. FormData 객체 생성: 데이터를 전송하기 위해 FormData 인스턴스를 생성하고 필요한 데이터를 추가합니다.
2. 헤더 설정: multipart/form-data를 지정하여 데이터가 올바르게 직렬화되도록 보장합니다.
3. 파일 데이터 추가: 파일을 FormData에 추가하면 브라우저가 자동으로 바이너리 데이터를 처리하도록 지원합니다.

(3) 코드 구현 예시

const formData = new FormData();
formData.append('file', file);

const response = await instance.request<ImageUpload>({
  url: 'api/v1/images?type=MEMBER',
  method: 'post',
  data: formData,
  headers: {
    'Content-Type': 'multipart/form-data', // 명시적으로 설정
  },
});

이처럼 instance를 사용하여 FormData를 처리하면, 데이터 직렬화와 헤더 설정을 유연하게 관리할 수 있습니다.

---

4. FormData 사용의 주요 이점

• 유연한 데이터 전송: 단순 텍스트뿐만 아니라 파일과 텍스트 데이터를 혼합하여 전송 가능.
• 바이너리 데이터 지원: 이미지, 동영상, 기타 파일 형식의 데이터를 서버로 전송할 때 유용.
• HTTP 표준 준수: multipart/form-data 형식을 통해 파일 업로드를 지원하는 RESTful API와 호환성 유지.

---

5. 결론

FormData를 처리할 때 특별한 처리가 필요한 이유는 JSON 데이터와 다르게 multipart/form-data 형식을 사용하여 데이터를 전송하기 때문입니다.

• 이를 위해 헤더 설정과 데이터 직렬화가 필요하며, apiRequest와 같은 일반적인 JSON 처리 유틸리티로는 이를 적절히 지원할 수 없습니다.
• 따라서 파일 업로드와 같은 작업에서는 axios의 instance를 직접 사용하여 세부 설정을 제어해야 합니다.

이러한 과정을 통해 FormData 요청이 올바르게 처리되도록 보장할 수 있습니다.