JavaScript에서 Base64 완벽 가이드

JavaScript의 Base64 함수

JavaScript는 브라우저와 Node.js 환경 모두에서 Base64 인코딩/디코딩을 지원합니다.

btoa()와 atob()

// 인코딩 (Binary to ASCII)
const encoded = btoa('Hello');

// 디코딩 (ASCII to Binary)
const decoded = atob(encoded);

한글 처리하기

btoa()는 Latin1 문자만 지원하므로 한글을 직접 처리할 수 없습니다.

// 한글 인코딩
function encodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    (match, p1) => String.fromCharCode('0x' + p1)));
}

// 한글 디코딩
function decodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(c =>
    '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
}

const korean = '안녕하세요';
const encoded = encodeUnicode(korean);
const decoded = decodeUnicode(encoded);

파일을 Base64로 변환

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

// 사용 예
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const base64 = await fileToBase64(file);
  console.log(base64);
});

Web Worker로 대용량 파일 처리

대용량 파일을 처리할 때는 Web Worker를 사용하여 메인 스레드 블로킹을 방지하세요.

// worker.js
self.onmessage = async (e) => {
  const { file } = e.data;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    self.postMessage({ result: reader.result });
  };
};