Base64, Blob, ArrayBuffer, File 이해하기

개발하다 이미지 같은 멀티미디어 파일을 다룰 때 Blob과 같은 형식을 다루게 되는데

기존에 그냥 생각하고 넘겼던 것들을 다시 찾아 정리해 보았다

 

Base64

• 우리가 사용하는 파일(이미지 등)은 결국 컴퓨터의 이진(binary, 01010... 0과 1로 다루어지는) 데이터임
• 그래서 이미지 같은 파일을 이진수의 모양에 따라 문자를 할당하여 이진데이터를 문자열로 변환하는 것임 (ex. 01000001 > Q)
• 이렇게 문자열로 변환하여 만든 데이터가 Base64이며, 이미지 파일을 외부에서 불러오지 않고도 문자열 변수로 저장이 가능함
• 하지만 원본보다 약 33% 정도의 용량이 증가하여 저용량 이미지나 네트워크에 영향을 받지 않기 위할 때 적합한 사용법

Blob (Binary Large Object)

• 멀티미디어 파일(이미지, 오디오, 비디오 등) 바이너리를 객체 형태로 저장한 것
• 데이터 베이스에 효과적으로 저장하고 다루기 쉽게 하기 위해 객체화된 데이터 형식
• Blob을 ObjectURL로 변환해 줘야 <a>, <img>와 같은 태그에서 사용 가능
• URL로 변환하면 브라우저의 메모리에 이미지가 올라가기 때문에 이미지가 불필요해질 경우 URL을 revoke 하여 메모리 누수를 방지할 수 있음

// Create Blob URL
const objectURL = window.URL.createObjectURL(blob);

// Revoke Blob URL after DOM updates..
window.URL.revokeObjectURL(objectURL);

 

 

ArrayBuffer

• 오디오나 비디오 같은 바이너리 데이터를 다루는 일들이 많아져 생겨남
• 필요한 메모리 공간을 적절하게 할당하여 사용할 수 있는 유연성 제공
• 원시 데이터(바이너리 데이터)를 직접 다루는 수단
• Base64, Blob은 사람이 읽고 다루기 편한 타입 > ArrayBuffer는 오리지널에 가까운 타입
• 영상 스트리밍 같이 용량이 크거나 성능에 민감한 파일을 다룰 경우 사용함

Buffer

• 서버단(Node.js)에서 멀티미디어 파일을 다루는 타입
• 클라이언트단의 ArrayBuffer와 같이 백엔드단에서 이진 데이터를 다루는 타입
• api나 로컬에서 받아온 파일(blob, arraybuffer)을 buffer로 변환하여 사용하자

FileReader 객체

• Blob, File과 같은 객체로부터 데이터를 읽어 들이기 위한 목적으로 사용됨
• 이벤트를 사용하여 필요한 타이밍에 데이터 전달 가능

const reader = new FileReader();

reader.readAsArrayBuffer(blob) // ArrauBuffer 형태로 데이터를 읽어 변환

reader.readAsText(blob, [encoding]) // encoding 방식에 맞게 텍스트 형태로 데이터를 읽어 변환 (기본 인코딩 방식 - utf-8)

reader.readAsDataURL(blob) // base64 형태의 data url로 데이터를 읽어 변환

 

 

 

참고문헌

• https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-Base64-Blob-ArrayBuffer-File-%EB%8B%A4%EB%A3%A8%EA%B8%B0-%EC%A0%95%EB%A7%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85#buffer