Base 64 를 알아보자

서론

어떻게든 파일을 base64 로 FileReader 했지만... base64를 제대로 아는 상태가 아니므로 알아가는 시간이 필요함을 느꼈다!

 

Base64란

64진법 (2^6)

2의 제곱수에 기반한 진법들 중 화면에 표시되는 아스키문자들을 써서 표현할 수 있는 가장 큰 진법

 

바이너리 데이터를 텍스트로 변경하는 인코딩 방식 중 하나

공통 64개의 아스키 영역의 문자들로 이루어진 문자열로, 바이너리 데이터를 변경한다.

A-Z, a-z, 0-9, +, / 로 구성되며 총 64 개의 아스키 문자가 있다.

 

보안을 위한 것이 아닌 바이너리 데이터를 텍스트로 다루고자 할 때 사용하며, 신뢰할 수 없는 통신 채널을 통해 바이너리 데이터를 안전하게 전송할 수 있도록 사용해준다.

 

6비트 당 2비트씩 오버헤드가 발생하여, 약 33퍼센트가 증가하므로 전송해야될 데이터 크기가 증가하지만 그럼에도

바이너리 데이터의 통신 중 손실을 막기 위해 사용

 

 

자바스크립트에서 base64를 다루기

btoa()

바이너리 데이터 -> base64(아스키)로 인코딩

• 매개변수에 바이너리 데이터 또는 8비트 이하의 크기를 가지는 문자를 넣어줘서 사용
• 8비트 이상의 문자가 포함되면(유니코드 문자 등) exception을 발생시킨다.
• 혹여 유니코드 문자를 인코딩하고자 하면, 입력한 문자열을 8비트 바이트 배열(utf-8 등)로 변환하여 btoa() 메서드를 사용해준다.

encodeURIComponent(str).replace(/%([0-9A-F]{2})/g)

 

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

 

atob()

base64 -> 바이너리 데이터 디코딩

function decodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(function (c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

 

 

base64 -> 바이너리 데이터 -> Array -> Uint8Array

function b64toArray(b64Data) {
    var byteCharacters = atob(b64Data.split(',')[1]);

    var byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);
    fs.writeFile('./routers/byteArray', byteArray.toString(), (err) => {});
    return byteArray;
  }

b64Data.split(',')[1] 으로 data:Content-Type;데이터타입,  이후의 실질적인 데이터를 뽑아내준다.

 

뽑아준 Uint8Array의 형태는 대략적으로 이렇다.

 

일단은 이렇게 데이터를 다루기로 하였고 ... postgresSQL 에서 bytea 와 위의 정보들을 어케저케 해보려고 했는데...

결국 안되었다 ㅜㅜ