[CS] Base64 (feat. btoa(), atob())

컴퓨터는 모든 데이터를 이진 데이터만을 처리할 수 있습니다. 0 과 1 로 모든 것을 표현해야하는 것이죠.

코딩도 사람이 이해하는 언어로 작성후 결국 이진 데이터로 변환하여 컴퓨터가 처리할 수 있도록 합니다.

이렇게 상호간에 전환하는 작업을 encoding, decoding 이라고 합니다.

 

Binary-to-text encoding

이름에서 알 수 있듯, 이진 데이터를 텍스트로 변환하는 것을 의미합니다.

최종적으로 이 데이터를 컴퓨터가 인식할 때는 이진 데이터로 전환해야하지만, 그전 단계 즉, 데이터를 작성하거나, 전송하거나, 출력하거나 하는 작업은 이진 데이터를 사람이 이해하는 텍스트 데이터로 사용해야할 경우가 생깁니다.

 

Base64

base64 는 8bit 이진 데이터를 텍스트로 인코딩하는 방식 중 하나입니다.

하나의 제약이 있는데, 모든 문자가 아니라 ASCII 영역의 문자들로만 이루어진 문자열로만 인코딩 합니다.

 

base64 는 64진법 이라는 의미를 가지고있습니다.

총 64개의 문자를 표현하는 방법인 것이죠.

64 = 2^6 임으로 비트로 표현한다면 한 문자 당 6bit 를 차지합니다.

하지만 ASCII 코드는 한 문자 당 1byte(8bit) 를 사용합니다.

 

base64 는 ASCII 코드를 호환하기 위해서, 인코딩 할때 혼선을 방지하고자 6과 8의 최소공배수인 24비트 단위로 끊어 인코딩합니다.

 

64진법에서 표현할 수 있는 문자를 표로 나타낸 것입니다.

A-Z,a-z,0-9,+,/ 으로 이루어져있습니다. 그리고 특별하게 "=" 는 끝을 알리거나, 갯수를 맞추기 위한 패딩 문자로 사용됩니다.

 

예시

예시를 가지고 살펴보겠습니다.

Man 이라는 텍스트를 base64 로 인코딩하는 방법입니다.

 

1. Man 을 ASCII 코드 숫자로 변환한다.

2. 변환된 숫자를 1byte 로 변환한다.

3. 총 3byte(24bit) 를 6bit 로 끊어서 다시, 문자열로 변환한다.

4. 만약 총 문자열이 24bit 가 아니라면, 패딩 문자열 = 를 추가한다.

 

결과적으로 "Man" 이라는 텍스트가 "TWFu" 라는 텍스트로 인코딩 되었고, 이를 "base64 로 인코딩했다." 라고 할 수 있습니다.

 

결국, base64 로 인코딩 했을때 데이터가 불필요하게 증가했는데, 왜 사용할까요?

Base64 인코딩을 사용하는 이유

결국에 Man 이라는 3개의 문자열이 4개의 문자열로 늘어나게 되었습니다.

왜 이렇게 인코딩을 하여 사용할까요?

이유는 통신과정에서 이진 데이터의 손실을 막기위해 사용됩니다.

현대에는 웹을 비롯해서 대부분이 ASCII 코드를 사용하고있습니다. Unicode, utf-8 조차 처음 128개는 ASCII 와 100% 호환하고있죠.

 

ASCII 코드는 8비트를 사용하지만, 문자를 표현하는데는 7비트를 사용하고, 나머지 1비트는 오류검증을 위한 비트로 사용됩니다.

그런데 1비트를 처리하는 방식이 시스템별로 상이하다는 문제가 있습니다.

이러한 문제로 공통된 규격을 위해서, 최초의 이진 데이터를 보존하기 위해서 base64 로 인코딩을 한번 거치게 되는 것이에요.

즉, 안전하게 이진 데이터를 전달하기 위해서 사용하는 것입니다!

 

Javascript 에서 base64 encoding, ecoding 하기

btoa : binary to ASCII 의 약자로, 이진 데이터를 base64 인코딩된 ASCII 문자열을 생성합니다.

atob : ASCII to Binary 의 약자로, base64 로 인코딩 된 문자열을 이진 데이터로 디코딩 합니다.

두 가지 API 를 사용할 수 있습니다.

const str = 'abc';
console.log(btoa(str)) // YWJj

const BASE64 = 'YWJj';
console.log(atob(BASE64)) // abc