Blob
- Javascript에서 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있다.
- 대개 데이터의 크기(Byte)및 MIME 타입을 알아내거나, 데이터 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용한다.
- File 객체도 name과 lastModifiedDate 속성이 존재하는 Blob 객체이다.
Blob vs File
- Blob : 주로 “파일 형태가 아닌” 바이너리 데이터(마이크 소리, canvas 그림 등)을 다룬다.
- File : Blob을 상속 받는 객체로, 주로 “파일 형태”의 바이너리 데이터(mp3, png 파일 등)을 다룬다.
Blob 생성
const newBlob = new Blob(array, options);- array : Blob 생성자의 첫번째 인수로 ArrayBuffer, ArrayBufferView, Blob(File), DOMString 객체 또는 이러한 객체가 혼합된 Array를 사용할 수 있다.
- options : type과 endings를 설정할 수 있다.
Properties
- 생성자를 통해 만들어진 Blob 객체는 size, type의 속성을 가진다.
- size는 Blob 객체의 바이트(Byte) 단위 크기를 의미하며, type은 객체의 MIME 타입을 의미한다.
Methods
(1) slice
- 지정된 바이트 범위의 데이터를 포함하는 새로운 Blob 객체를 만드는데 사용된다.
- 사이즈가 큰 Blob 객체를 작게 쪼개어 사용할 때 유용한다.(Chunk)
- 쪼개어진 Chunks들은 필요에 의해 간단하게 다시 합쳐질 수 있다.
Blob URL
- Blob 객체를 가리키는 URL을 생성하기 위해 URL 객체의 static 메서드로 createObjectURL과 revokeObjectURL을 사용할 수 있다.
(1) URL.createObjectURL
- Blob 객체를 나타내는 URL을 포함한 DOMString을 생성한다(blob:URL)
- Blob URL은 생성된 window의 document에서만 유효하다.
- 다른 window에서 재활용할 수 없으며, URL의 수명이 한정되어 있기 때문에 file:URL과 다르게 보안에 좋다.
(2) URL.revokeObjectURL
- URL.createObjectURL을 통해 생성한 기존의 URL을 해제(폐기)한다
- revokeObjectURL을 통해 해제하지 않으면 기존 URL을 유효하다고 판단하고 자바스크립트 엔진에서 가비지컬렉션되지 않는다.
- 메모리 누수 방지를 위해 생성된 URL을 DOM과 바인딩한 후에는 해제하는 것이 좋다.
참고 자료
개발 일지를 작성합니다