Base64 이미지 처리: API 요청 최적화 방법

김현준·2025년 1월 17일

SEO와 코드 최적화

목록 보기

6/7

Base64 형식으로 이미지를 반환하면 API 요청에서 편리하게 활용할 수 있다.

Base64란?

Base64는 이진 데이터를 텍스트 형식으로 인코딩하는 방법이다. 이미지를 Base64로 변환하면 문자열로 반환되며, 이를 API 요청에 쉽게 포함할 수 있다.

Base64의 주요 장점

1. 파일 경로 관리 불필요

Base64는 이미지를 문자열로 처리하므로 파일 경로나 저장소 관리가 필요 없다.

2. JSON 요청에 쉽게 포함

Base64 문자열은 JSON 데이터에 바로 포함 가능하다.

예시:

{
  "userId": "12345",
  "profileImage": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..."
}

3. Cross-Origin 문제 해결

JSON 요청으로 처리되기 때문에, 브라우저와 서버 간의 CORS 문제를 줄일 수 있다.

4. 단일 HTTP 요청으로 처리

이미지 파일과 메타데이터를 한 번의 API 요청으로 전송할 수 있다.

Base64 활용 예제

이미지 파일을 Base64로 변환하는 코드
리액트에서 react-image-file-resizer를 사용해 이미지를 리사이즈하고 Base64로 변환하는 예시

import Resizer from 'react-image-file-resizer';

/**
 * 이미지 파일을 리사이즈하고 Base64 형식으로 반환하는 함수
 * @param file 이미지 파일 (File 타입)
 * @returns Promise<string> 리사이즈된 Base64 이미지 문자열
 */
const resizeImage = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
    try {
      Resizer.imageFileResizer(
        file,               // 원본 파일
        300,                // 가로 크기(px)
        300,                // 세로 크기(px)
        "JPEG",             // 출력 포맷
        80,                 // 품질 (0 ~ 100)
        0,                  // 회전 각도
        (uri) => {
          resolve(uri as string); // 리사이즈된 Base64 문자열 반환
        },
        "base64"            // 출력 형식 ("base64" 또는 "blob")
      );
    } catch (error) {
      reject(error);
    }
  });
};

/**
 * 파일 업로드 이벤트 핸들러
 * @param event 파일 선택 이벤트 (React.ChangeEvent<HTMLInputElement>)
 */
const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
  const file = event.target.files?.[0]; // 선택된 파일
  if (file) {
    try {
      const resizedImage = await resizeImage(file);

      // 리사이즈된 이미지로 API 요청 예제
      const response = await fetch('/api/upload', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          userId: '12345',
          profileImage: resizedImage, // Base64 이미지 포함
        }),
      });

      if (response.ok) {
        console.log('이미지 업로드 성공!');
      } else {
        console.error('이미지 업로드 실패');
      }
    } catch (error) {
      console.error('리사이즈 에러:', error);
    }
  }
};

/**
 * React 컴포넌트 예제
 */
const App: React.FC = () => {
  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
    </div>
  );
};

export default App;