Base64와 formData

파일 첨부 기능을 만들다 한 오류를 마주하게 됐다. 압축 파일을 첨부할 때마다 사이트가 뻗어(?) 버렸다. 그렇게 큰 파일도 아닌데 왜 자꾸 렉 먹지? 이전에 만들었던 기능은 이미지 첨부 기능이었는데, preview를 수월하게 보여 주기 위해 base64로 변환해서 img src에 넣어 사용했다. 이미 만들어 둔 코드가 있으니 가지고 와 사용하려고 했으나 이런 문제가 생긴 것이다. 이사님이 코드를 살펴보시더니 base64로 변환했어요? 네....... 그거 쓰면 용량이 세 배로 커져서 그래요.

아?

그래서 쓰게 된 포스팅이다.

Base64

Binary 데이터를 ASCII 코드와 매칭되는 문자열로 치환하는 방식을 사용한다. 8비트를 6비트로 표현하기 때문에 용량이 증가하게 된다.
ex) 8bit 3개 = 6bit 4개
결과적으로 원본보다 용량이 33% 커지게 된다.

장점

• 텍스트 기반 인코딩이므로 문자열 형태로 표현되어 전송 용이
• 인코딩된 데이터는 ASCII 코드로 이루어져 있어 대부분의 프로그래밍 언어나 플랫폼에서 지원되는 바이너리 데이터 형식을 처리하는 데 유용
• 파일을 텍스트로 변환하므로 다른 텍스트 데이터와 함께 하나의 문자열로 전송 가능

단점

• Binary 데이터를 텍스트 형태로 인코딩하므로 용량이 증가하고 전송 속도가 느려짐
• 인코딩 및 디코딩에 CPU 자원 소요

formData

formData는 비동기로 데이터를 전송할 수 있어서 자주 사용된다. form 태그를 사용하지 않고도 키/값 형식으로 폼에 값을 쉽게 추가할 수 있다는 장점도 있다. 사용할 때는 body에 formData를 그대로 넣어 주면 된다.

 async function postData() {
    const formData = new FormData();
    formData.append('name', name);
    await fetch(
      `api`,
      {
        method: 'POST',
        headers: {},
        body: formData, 
      }
    )
  }

이렇게 하면 file은 file대로 담고, URL은 URL대로 생성돼 img src에 넣어 줘 preview를 만들 수 있다. createObjectURL은 이미지를 blob 형태로 변경하는데, 창을 닫으면 데이터도 사라지는 일회성 데이터이기 때문에 preview에 사용하기 좋다.

const file = e.target.files?.[0] || null
const objectUrl = URL.createObjectURL(e.target.files[0])

장점

• Binary 데이터를 직접 전송할 수 있으므로 용량이 적고 빠름
• 파일 업로드, 멀티파트(form-data) 형식의 데이터 전송 지원
• 여러 데이터 필드와 파일을 함께 전송 가능

단점

• 텍스트 데이터 형식이 아니므로 순수한 Binary 데이터만 전송하는 것이 어려움
• 필드 이름과 값을 설정해야 하기 때문에 구조가 복잡함

비교

1. 데이터 형식

   • Base64 인코딩은 Binary 데이터를 텍스트 형태로 변환
   • FormData는 Binary 데이터를 직접 전송

2. 용량

   • Base64 인코딩은 데이터의 용량을 증가시킴
   • FormData는 Binary 데이터를 그대로 전송하여 용량을 줄임

3. 지원 범위

   • Base64 인코딩은 대부분의 프로그래밍 언어나 플랫폼에서 지원
   • FormData는 브라우저 환경에서 주로 사용

4. 사용 용도

   • Base64 인코딩은 텍스트 데이터와 함께 전송할 때 유용하며, 이미지나 파일 데이터를 텍스트 형태로 전송할 때 주로 사용
   • FormData는 파일 업로드나 멀티파트 데이터를 전송할 때 유용하며, 서버와의 상호작용에서 주로 사용

요약

Base64 인코딩은 텍스트 형태로 데이터를 전송하고 파일 데이터를 문자열로 변환할 때 사용하고, FormData는 직접 바이너리 데이터를 전송할 때 사용한다.

각각의 장단점과 사용 용도에 따라 적절하게 선택하여 데이터를 전송하자.