Blob 이해해보기

회사 동료분이 맡은 프로젝트에서 blob을 사용하여 로직을 구현 중인데 처리에 대해 고민하신다고 하셨다. 흠.. 생각해보니 나는 blob을 모르잖아..? 하는 아찔한 깨달음과 함께 blob을 공부해보기로 했다.

그럼 가보자고~!

Blob이란?

Binary Large Object의 약자로 블랍 또는 비랍이라고도 발음한다.
이미지, 사운드, 비디오와 같은 멀티 미디어 데이터를 다룰 때 사용한다.

생성하기

const newBlob = new Blob(array, options);

생성자 파라미터

array : ArrayBuffer, ArrayBufferView, Blob(file), DOMString을 타입으로 가짐

option : option에는 type과 endings 속성을 가진다.

• type) 데이터의 MIME 설정
• endings) \n을 포함하는 문자열 처리를 tansparent와 native를 지정할 수 있다. transparent를 기본값으로 가진다.

객체의 속성

size : Byte단위의 크기

type : 객체의 MIME 타입

Blob 조각내기/합치기

slice 함수

큰 blob 객체를 작게 조각내서 사용할 수 있다.

newBlob.slice(0, 3432, 'img/png');

Blob 합치기

const mergeBlob = new Blob(chunks, {type:newBlob.type});

Blob URL

1. URL.createObjectURL();
   생성된 window의 document에서만 유효하다.
   file:URL과 다르게 보안 이슈에서 벗어날 수 있다.

2. URL.revokeObectURL()
   createObjectURL을 통해 생성된 URL을 해제한다.
   메모리 누수 방지를 위해 반드시 해제하는 과정을 거친다.

Blob 최대 용량

blob 최대 용량은 OS에 따라 다르다.
아래 코드로 최대 용량을 확인할 수 있다.

var byteLength = 999999999;
var buffer = new ArrayBuffer(byteLength);
var blob = new Blob([buffer]);

// Blob의 최대 용량을 byte단위로 알 수 있다.
var blobMaxSize = blob.size;

---

참고 자료

https://heropy.blog/2019/02/28/blob/
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=magnking&logNo=220950061851
https://jw910911.tistory.com/120