Blob

Blob

Blob(Binary Large Object, 블랍)은 파일류의 불변하는 미가공 데이터를 나타냅니다
데이터의 크기, MIME 타입을 알아내거나, 데이터 송수신을 위해 Blob 객체로 나누는 등의 작업에 사용합니다.

블롭이 아닌 객체와 데이터에서 Blob을 생성하려면 Blob() 생성자를 사용합니다.

 

const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

 

 

생성자를 통해 만들어진 Blob 객체는 size, type의 속성을 가집니다.
size는 데이터의 바이트 단위의 사이즈입니다.

type은 Blob 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다.

유형을 알 수 없는 경우 빈 문자열을 반환합니다.

 

Blob 객체를 가리키는 URL을 생성을 위해 URL의 정적 메소드(Static Method)로 

createObjectURL과 revokeObjectURL를 사용할 수 있습니다.

createObjectURL

URL의 생명주기는 이것이 생성된 윈도우의 document 에 의존합니다.

생성된 URL은 특정 File 개체나 Blob 개체가 됩니다.

revokeObjectURL

URL.revokeObjectURL() 정적 메소드는 이미 존재하고 있는 URL 개체를 해제합니다.

이 개체는 URL.createObjectURL().를 호출하여 이전에 생성된 것입니다. 

메모리 누수를 방지하기 위해 생성된 URL을 DOM과 바인딩한 후에는 해제하는 것이 좋습니다.

 

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

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

References

https://heropy.blog/2019/02/28/blob/

Blob(블랍) 이해하기

https://developer.mozilla.org/ko/docs/Web/API/Blob

https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL

URL.createObjectURL()

https://developer.mozilla.org/ko/docs/Web/API/URL/revokeObjectURL