Base64

인코딩된 크기 증가

각 Base64 숫자는 6비트의 데이터를 나타냅니다. 따라서, 입력 문자열/이진 파일의 8-비트 바이트 3개(38비트 = 24비트)는 6비트 Base64 숫자 4개(46 = 24비트)로 표현될 수 있습니다.

이는 문자열이나 파일의 Base64 버전이 일반적으로 원본 대비 3분의1 만큼 더 크다는 것을 의미합니다(정확한 크기 증가는 문자열의 절대 길이, 길이를 3으로 나눈 나머지 값, 패딩 문자 사용 여부 등 다양한 요인에 따라 달라집니다).

JavaScript 지원

브라우저는 기본적으로 Base64 문자열을 디코딩하고 인코딩하기 위한 두 가지 JavaScript 함수를 제공합니다.

• btoa: 이진 데이터 문자열에서 Base64로 인코딩된 ASCII 문자열을 생성합니다("btoa"는 "binary to ASCII"로 읽어야 합니다).
• atob: Base64로 인코딩된 문자열을 디코딩합니다("atob"는 "ASCII to binary"로 읽어야 합니다).

"유니코드 문제"

btoa는 입력 문자열의 코드 포인트를 바이트 값으로 해석하므로 문자열에서 btoa를 호출하면 문자의 코드 포인트가 0xff를 초과하는 경우 "문자 범위를 벗어났습니다" 예외가 발생합니다. 임의의 유니코드 텍스트를 인코딩해야 하는 사용 사례의 경우, 먼저 문자열을 UTF-8의 구성 바이트로 변환한 다음 바이트를 인코딩해야 합니다.

가장 간단한 해결책은 TextEncoder 및 TextDecoder를 사용하여 문자열의 UTF-8ê³¼ 단일 바이트 표현 간에 변환하는 것입니다.

function base64ToBytes(base64) {
  const binString = atob(base64);
  return Uint8Array.from(binString, (m) => m.codePointAt(0));
}

function bytesToBase64(bytes) {
  const binString = Array.from(bytes, (x) => String.fromCodePoint(x)).join("");
  return btoa(binString);
}

// Usage
bytesToBase64(new TextEncoder().encode("a Ā 𐀀 文 🦄")); // "YSDEgCDwkICAIOaWhyDwn6aE"
new TextDecoder().decode(base64ToBytes("YSDEgCDwkICAIOaWhyDwn6aE")); // "a Ā 𐀀 文 🦄"

임의의 이진 데이터 변환

이전 섹션의 bytesToBase64 및 base64ToBytes 함수를 사용하여 Base64 문자열과 Uint8Array 간을 변환할 수 있습니다.

또는, 기본적으로 FileReader 및 fetch API를 통해 웹 플랫폼 내에서 base64 데이터 URL 간 비동기 변환이 가능합니다.

async function bytesToBase64DataUrl(bytes, type = "application/octet-stream") {
  return await new Promise((resolve, reject) => {
    const reader = Object.assign(new FileReader(), {
      onload: () => resolve(reader.result),
      onerror: () => reject(reader.error),
    });
    reader.readAsDataURL(new File([bytes], "", { type }));
  });
}

async function dataUrlToBytes(dataUrl) {
  const res = await fetch(dataUrl);
  return new Uint8Array(await res.arrayBuffer());
}

// 사용법
await bytesToBase64DataUrl(new Uint8Array([0, 1, 2])); // "data:application/octet-stream;base64,AAEC"
await dataUrlToBytes("data:application/octet-stream;base64,AAEC"); // Uint8Array [0, 1, 2]