javascript base64 문자열 인코딩 및 디코딩

서론

base64 란

바이너리 데이터를 64진법 표현으로 변환하여 정해진 아스키 문자 집합으로 표현하는 바이너리-텍스트 인코딩 체계입니다.
바이너리 데이터를 전송할 수 없는 미디어에서 잔송 작업을 할 수 있도록 바이너리 데이터를 문자열로 인코딩하는데 사용됩니다.

Encoding

btoa() 메소드

• binary to asciid의 약자

const str = "JavaScript is fun!!";
const encodedStr = btoa(str);
// output: SmF2YVNjcmlwdCBpcyBmdW4hIQ==

const str = "JavaScript is fun 🎉";
const encodedStr = btoa(str);
// output: ?

• 유니코드 문자같이 8비트 이상의 크기를 가지는 문자가 포함되면 exception 발생

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

• 입력 문자열을 8비트 바이트 배열로 변환한 다음 btoa() 메소드 사용

Decoding

atob() 메소드

• ascii to binary의 약자

const encodedStr = "SmF2YVNjcmlwdCBpcyBmdW4hIQ==";
const str = atob(encodedStr);
// output: JavaScript is fun!!

const encodedStr = "SmF2YVNjcmlwdCBpcyBmdW4g8J+OiQ==";
const str = atob(encodedStr);
// output: JavaScript is fun 🎉

• base64 문자열이 순수하게 8비트로 이루어진 문자열일 때만 완벽하게 작동
• 인코딩된 입력 값이 16비트의 유니코드 문자가 포함되어있다면 제대로 디코딩 되지 않음

function decodeUnicode(str) {
  // Going backwards: from bytestream, to percent-encoding, to original string.
  return decodeURIComponent(atob(str).split('').map(function (c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

• 유니코드 DOM 문자열을 처리하기 위해 base64 인코딩 바이트를 퍼센트 인코딩으로 변환한 다음 decodeURIComponent() 메소드 사용