Blob 객체 학습

Blob 객체를 사용하는 경우가 꽤 되는데 대충 큰 데이터를 다룰 때 쓴다! 정도는 알지만 명확하게 파악하진 못하고 있어서 이번 기회에 학습해본다.

 

Blob이란?

Blob은 Binary Large Object의 약자로, 문자 그대도 커다란 바이너리 객체라는 의미이다. blob이라는 영어 단어는 덩어리라는 뜻을 가지고 있기도 해서 텍스트나 정수같이 특정 포맷을 가진 데이터 유형과 달리 덩어리 자체를 저장한다라는 느낌으로도 볼 수 있을 것 같다.

과거에는 정수나 텍스트같이 특성이 뚜렷한 데이터만 저장하면 되었지만 이미지, 비디오 등 텍스트로만 처리할 수 없는 크고 다양한 데이터들이 등장하기 시작하였고 이를 처리하기 위해서 Blob 타입이 도입되었다.

Blob은 이러한 대용량의 이진 데이터를 웹브라우저나 JS에서 다룰 수 있는 형태로 감싼 객체이다. 이를 이용하면 파일의 이진데이터들을 쉽게 조작하고 처리할 수 있어서 웹에서 대용량 이진 데이터를 다루기에 편해지는 것이다.

< 대용량 이진 데이터 예시 >

이미지 파일: 각 픽셀의 색상 정보, 압축 정보 등
오디오 파일: 소리의 파형, 볼륨 정보 등

 

 

Blob 생성

Blob이 아닌 데이터를 Blob으로 만드려면 Blob() 생성자를 사용해야 한다. 

new Blob(array, option)

 

1. array: Blob에 포함할 데이터를 넣는 배열이다. 여기엔 ArrayBuffer, ArrayBufferView, Blob, 문자열(DOMString) 또는 이러한 객체가 혼합된 배열을 넣을 수 있다. 

< ArrayBuffer, ArrayBufferView >

이는 JS에서 이진데이터를 다루기 위한 객체들로 대용량 이진 데이터를 조작하고 저장하는데 유용하다. 
ArrayBuffer은 고정된 크기의 이진 데이터 버퍼이다. 메모리 공간을 일정 크기만큼 할당하고 그 공간에 이진 데이터를 저장하는 용도이다. ArrayBufferView는 ArrayBuffer의 데이터를 읽고 쓰는 등 조작하기 위한 여러가지 View 객체들을 모아놓은 그룹 이름이라 할 수 있는데ArrayBufferView 뷰 객체에는 Uint8Array, Init16Array, DataView 등이 다양한 뷰 객체가 존재한다. 

 

2. option: Blob의 MIME 타입을 설정하는 type과 텍스트 줄바꿈 모드를 설정하는 endings로 이루어져있다. 
type에 MIME 타입을 설정해줌으로써 첫번째 파라미터에 있는 데이터를 어떤식으로 처리해야할 지 브라우저나 서버에 알려주고, ending의 경우 "transparent"(기본값) 또는 "native"가 있는데, 전자는 줄바꿈을 그대로 유지하고 후자는 운영체제에 맞는 줄바꿈을 사용한다는 의미이다. 데이터를 다운로드하거나 이동시켜서 읽으려할 때 줄바꿈 형식이 맞지 않아 가독성이 떨어지거나 파일이 제대로 읽히지 않을 수 있는데 이 때 native를 활용할 수 있을 것 같다.

< MIME 타입 >

파일의 형식을 나타내는 표준화된 문자열로 데이터의 종류를 식별하는데 사용된다. "타입/서브타입"의 형식으로 표기되며 타입은 데이터의 일반적인 분류를 나타내고 서브타입은 보다 구체적인 형식을 설명한다.
ex: text/plain, image/png, application/json, audio/mpeg
MIME 타입은 IANA에서 관리하여 모든 타입은 이 곳에서 볼 수 있지만(진짜많다!!), MDN에서 자주 사용되는 목록만 나열해놨기에 여기가 더 참고하기 좋을 것 같다. 

(IANA), (MDN)

 

 

Blob 객체의 프로퍼티와 메소드

1. 프로퍼티

 

Blob 객체는 size와 type 속성을 가진다. size는 Blob 객체 데이터 크기를 바이트 단위로 나타낸 것으로 이 프로퍼티를 통해 파일의 용량을 알 수 있다. type은 Blob 객체의 MIME 타입을 나타내는 문자열로, 설정하지 않으면 빈 문자열로 설정된다.

 

2. 주요 메소드

1) URL.createObjectURL(blob)

Blob 데이터를 브라우저에서 사용할 수 있는 URL로 변환해준다. 이 URL은 브라우저 메모리 내에서 임시로 생성된 주소로 이미지를 띄우거나 파일을 다운로드 할 수 있는 링크로 사용된다.

2) URL.revokeObjectURL(blobURL)

createObjectURL로 생성한 URL을 더 이상 사용하지 않을 경우 브라우저 내 메모리를 해제하기 위해 호출하는 메소드이다. 

3) blob.slice(start, end, contentType)

Blob 데이터의 특정 부분을 잘라서 새로운 Blob 객체로 반환한다. start~end까지가 잘라내는 범위이고 contentType은 잘라낸 데이터의 타입을 지정한다. 

대용량 파일을 나누어 업로드하거나, 파일의 일부 부분만 필요할 때(이미지의 헤더 정보만 필요할 시 등), 파일의 미리보기 기능을 제공 할 때(PDF의 앞부분만 보여주는 등), 큰 파일을 일정 크기씩 나눠 스트리밍 방식으로 처리할 떄 등 사용 방법은 다양각색하다.

 

+ File 객체와 Blob 객체

일반적으로 Blob 객체를 사용할 때 자주 사용되는 경우가 파일을 다루는 것이다. 파일은 파일에 특화된 속성과 기능을 제공하는 File 객체를 활용하게 되는데 이는 웹에서 파일을 다루기 위해 만들어진 객체이며 브라우저에서 파일을 업로드, 다운로드할 때 사용된다.

File 객체는 Blob 객체를 상속하여 Blob 정보에다가 파일에 대한 추가 속성과 메타데이터가 포함된 객체이다. File 객체는 Blob의 속성과 메서드를 모두 상속받아 사용할 수 있다.

 

 

 

---

참고 문서

• JS Blob(블랍) 이해하기 - https://www.heropy.dev/p/QlwiuS