Input 이미지 처리 방식

Base64 방식과 FormData 방식의 장단점을 정리합니다.

1. Base64 방식

장점:

  • 즉각적인 미리보기 가능 (별도의 URL 생성 불필요)
  • 단일 HTTP 요청으로 처리 가능
  • JSON 페이로드에 직접 포함 가능
  • 바이너리 데이터를 텍스트로 안전하게 전송
  • 클라이언트에서 이미지 처리/조작이 용이
  • AJAX 요청과 함께 보내기 쉬움

단점:

  • 파일 크기가 약 33% 증가 (인코딩 오버헤드)
  • 브라우저 메모리 사용량 증가
  • 대용량 파일 처리에 부적합
  • 인코딩/디코딩 과정에서 CPU 리소스 사용
  • 서버 부하 증가 가능성

적합한 사용 사례:

typescript
// Base64 적합 사례
const handleSmallImage = async (file: File) => {
// 1MB 이하의 작은 이미지
  if (file.size <= 1 * 1024 * 1024) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
// 즉시 미리보기 가능
      setPreviewImage(reader.result as string);
// 바로 JSON으로 전송 가능
      uploadImage({ image: reader.result });
    };
  }
};

2. FormData 방식

장점:

  • 원본 파일 유지 (데이터 손실 없음)
  • 메모리 효율적
  • 대용량 파일 전송에 적합
  • 멀티파트 요청으로 파일 전송 최적화
  • 프로그레스 모니터링 용이
  • 여러 파일 동시 전송 가능

단점:

  • 추가적인 HTTP 요청 필요할 수 있음
  • 미리보기를 위한 별도 처리 필요
  • 브라우저 호환성 고려 필요
  • 전송 과정이 상대적으로 복잡

적합한 사용 사례:

typescript
// FormData 적합 사례
const handleLargeFile = async (file: File) => {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      onUploadProgress: (progressEvent) => {
        const progress = (progressEvent.loaded / (progressEvent.total || 0)) * 100;
        setUploadProgress(progress);
      }
    });

// 업로드 후 URL을 받아서 처리
    setImageUrl(response.data.url);
  } catch (error) {
    console.error('Upload failed:', error);
  }
};

선택 가이드

Base64 선택:

  1. 파일 크기가 작은 경우 (1MB 이하)
  2. 즉각적인 미리보기가 필요한 경우
  3. 이미지 처리가 클라이언트에서 필요한 경우
  4. 단순한 구현이 필요한 경우
  5. 썸네일이나 프로필 이미지와 같은 작은 이미지
typescript
// Base64 사용 예시
if (file.size <= 1 * 1024 * 1024) {
  const base64 = await convertToBase64(file);
// 즉시 미리보기 가능
  setPreview(base64);
// 바로 API 전송
  await uploadImage({ image: base64 });
}

FormData 선택:

  1. 대용량 파일 전송 (1MB 초과)
  2. 원본 품질 유지가 중요한 경우
  3. 다중 파일 업로드가 필요한 경우
  4. 업로드 진행률 표시가 필요한 경우
  5. 서버 리소스 최적화가 중요한 경우
typescript
// FormData 사용 예시
const formData = new FormData();
formData.append('file', file);
formData.append('type', 'original');

// 프로그레스 모니터링 가능
await axios.post('/upload', formData, {
  onUploadProgress: (e) => {
    const progress = (e.loaded / (e.total || 0)) * 100;
    setProgress(progress);
  }
});