[Javascript] Base64를 Blob으로 변환하기

Binary Data

• 바이너리 데이터는 0과 1로 이루어진 데이터를 말하며, 일반적으로 텍스트 에디터로는 읽을 수 없다.
• 이러한 데이터는 주로 이미지, 오디오, 비디오, 실행 가능 파일 등에 사용된다.
• 바이너리 데이터는 문자열로 표현되지 않기 때문에, 통신이나 저장 시 특별한 인코딩 방법이 필요할 수 있다.
• ex) Base64 인코딩은 바이너리 데이터를 ASCIII 문자열로 변환하는 방법 중 하나이다.

Binary Data와 "문자열 데이터"의 차이점

• 표현 방식: 문자열 데이터는 텍스트로 표현되며, 바이너리 데이터는 비트로 표현된다.
• 읽기 가능성: 문자열 데이터는 사람이 읽을 수 있으며, 바이너리 데이터는 일반적으로 사람이 읽을 수 없다.
• 용도: 문자열 데이터는 주로 텍스트 정보를 저장하거나 전송하는데 사용되며, 바이너리 데이터는 다양한 형태의 미디어나 파일을 저장하거나 전송하는데 사용된다.

 

ASCII 문자 집합

소스 문자 집합은 소스 파일에 나타날 수 있는 올바른 문자 집합입니다.

 

•  

 

Base64

바이너리 데이터를 64진법 표현으로 변환하여 정해진 ASCII 문자 집합으로 표현하는 바이너리-텍스트 인코딩 체계입니다. 이는 일반적으로 바이너리 데이터를 전송할 수 없는 미디어에서 전송 작업을 할 수 있도록 바이너리 데이터를 문자열로 인코딩하는데 사용됩니다. Base64는 전송 중에 이진 데이터가 손실되지 않도록 합니다.

 

Base64는 암호화나 압축하는 체계가 아닙니다. 그저 네트워크를 통해 난독화된 문자열을 전송할 수 있도록 바이너리 데이터를 ASCII 문자 집합으로 변환합니다. 예를 들면 텍스트 데이터를 받는 이메일 서버에 이미지나 파일을 보내는 경우가 있습니다. 이 때 파일을 텍스트 형식으로 인코딩해야 합니다.

이 글에서는 JavaScript에서 Base64 문자열을 인코딩 및 디코딩 하는 방법을 설명합니다. 원시 바이너리 데이터를 Base64 문자열로 인코딩 및 디코딩하기 위해 JavaScript에서는 두 가지 내장 함수를 지원합니다.

 

 

 

atob() - Base64 Decoding

atob() 메소드(ascii to binary의 약자)는 Base64로 인코딩된 문자열을 일반 문자열로 디코딩합니다. 다음은 atob() 메소드로 Base64 문자열을 디코딩하는 예제입니다.

const encodedStr = "SmF2YVNjcmlwdCBpcyBmdW4hIQ==";

// decode the string
const str = atob(encodedStr);

// print decoded string
console.log(str);

// output: JavaScript is fun!!

 

atob() 메소드는 Base64 문자열이 순수하게 8비트로 이루어진 문자열일때만 완벽하게 작동합니다. 

인코딩된 입력 값이 16비트 유니코드 문자가 포함되어있다면 다음 예제 처럼 제대로 디코딩되지 않습니다.