자바스크립트에서 바이너리 데이터로 작업하는 경우 Blob API가 유용한 도구가 될 수 있다. 이 인터페이스를 사용하면 파일을 읽고 쓰거나 네트워크를 통해 전송하는 등 바이너리 데이터를 처리할 수 있다. Blob API의 정의, 작동 방식, 몇 가지 사용 사례에 대해 정리해 보려고 한다.
Blob API란 무엇인가?
Blob API는 바이너리 데이터를 조작하기 위한 JavaScript 인터페이스이다. Blob 객체는 불변의 바이너리 데이터 청크를 나타내며 크기 및 유형 속성을 가지고 있다. 이는 파일 객체의 특수한 형태이며 모든 Blob 타입의 컨텍스트에서 사용할 수 있다.
Blob 객체 만들기
Blob 생성자 또는 URL.createObjectURL() 메서드를 사용하여 블롭 객체를 만들 수 있다. Blob 생성자는 ArrayBuffer나 문자열과 같은 다른 데이터 타입을 가져와 Blob 객체로 변환한다.
한 가지 주목할 점은 단순히 ArrayBuffer나 문자열 하나만 인자로 받는 것이 아니라, 배열의 형태로 받는다는 점이다. 즉, 여러 개의 ArrayBuffer나 문자열을 이어서 하나의 Blob 객체로 만든다는 의미다.
// Creating a Blob object from a string
const myBlob = new Blob(['Hello, world!'], {type: 'text/plain'});
// Creating a Blob object from an ArrayBuffer
const buffer = new Uint8Array([72, 101, 108, 108, 111]).buffer;
const myBlob = new Blob([buffer], {type: 'application/octet-stream'});Blob 속성
Blob 객체에는 size와 type이라는 두 가지 주요 속성이 있다.
size 속성은 blob 객체가 나타내는 데이터의 크기를 바이트 단위로 나타내는 데 사용된다. 읽기 전용 속성이며 .size 속성을 사용하여 접근할 수 있다.
type 속성은 blob 객체가 나타내는 데이터의 MIME 유형을 나타낸다. 이 속성은 선택 사항이며 blob 객체의 콘텐츠에 대한 추가 정보를 제공하는 데 사용할 수 있다. type 속성은 .type 속성을 사용하여 접근할 수 있다.
// create a Blob object from an image file
const file = document.querySelector('input[type="file"]').files[0];
const blob = new Blob([file]);
// log the size and type properties
console.log(blob.size); // outputs the size of the Blob object in bytes
console.log(blob.type); // outputs the MIME type of the Blob objectBlob 객체 자르기
slice() 메서드를 사용하면 다른 blob 객체의 일부에서 새 blob 객체를 만들 수 있다. 이 메서드는 시작 인덱스와 끝 인덱스를 받아 해당 범위에 대한 바이트 데이터를 반환한다.
Blob 객체의 읽기 및 변환
FileReader 객체를 사용하여 blob 객체의 내용을 읽거나 변환할 수 있다. FileReader 객체는 비동기적으로 작동하며 이벤트 리스너 또는 프로미스를 통해 결과를 수신할 수 있다.
const blob = new Blob(['This is a sample blob.']);
// Slice the blob from the 5th byte to the 10th byte
const slicedBlob = blob.slice(5, 10);
// Read the sliced blob as text
const reader = new FileReader();
reader.readAsText(slicedBlob);
reader.onload = () => {
console.log(reader.result); // Outputs "is a"
};앞의 예제는 blob 객체의 자르기 및 읽기 변환을 함께 보여주는 예제이다. “This is a sample blob.”라는 문자열을 포함한 blob 객체를 만든다. 그런 다음 slice() 메서드를 사용하여 “is a”라는 문자열을 포함하는 새 blob 객체를 만든다. 마지막으로 FileReader 객체를 사용하여 슬라이스된 blob 객체를 문자열로 읽고 결과를 콘솔에 출력한다.
Blob URL
Blob URL(또는 Object URL)은 웹 애플리케이션에서 blob 또는 file 객체를 URL의 소스로 사용할 수 있도록 하는 URL 타입이다. Blob 객체에 대한 임시 URL을 생성하여 이미지, 비디오, 오디오 등의 소스로 사용하거나 바이너리 데이터의 다운로드 링크로 사용할 수 있도록 하는 의사(pseudo) 프로토콜이다.
Blob URL은 JavaScript의 URL.createObjectURL() 메서드를 사용하여 생성한다. 이 메서드는 Blob 객체를 가져와서 “blob:<origin>/<uuid>” 형식의 고유 URL을 만든다. origin은 blob을 생성한 페이지의 URL이며, UUID는 blob의 고유 식별자이다.
Blob URL이 만들어지면 웹 애플리케이션에서 다른 URL처럼 사용할 수 있다. 예를 들어 이미지 태그의 소스로 설정하거나 다운로드 링크의 href로 사용할 수 있다. 사용자가 링크를 클릭하면 브라우저가 블롭 데이터를 파일로 다운로드한다.
Blob URL은 임시적이며 blob을 생성한 페이지가 열려 있는 동안에만 유효하다는 점에 유의할 필요가 있다. 페이지가 닫히면 URL이 유효하지 않게 되고 blob 데이터에 더 이상 접근할 수 없다. 따라서 blob URL은 단기간 데이터를 저장하거나 전송하는 용도로만 사용해야 한다.
URL.createObjectURL()을 사용하여 URL 객체를 생성하면 URL.revokeObjectURL() 사용하여 URL이 명시적으로 해제될 때까지 객체는 브라우저의 메모리에 남아 있게 된다. URL 개체가 해제되지 않으면 브라우저에서 메모리 누수가 발생할 수 있다.
// Assume data contains binary data to be downloaded
const data = new Uint8Array([1, 2, 3, 4, 5]);
// Create a new Blob object from the data
const blob = new Blob([data]);
// Create a new URL for the Blob object
// for example, blob:http://example.com/3d4fe4ce-b93a-45f2-a5f5-5d5df9f5e6b5
const url = URL.createObjectURL(blob);
// Create a link with the URL and set the download attribute to specify the filename
const link = document.createElement('a');
link.href = url;
link.download = 'myfile.bin';
// Append the link to the document body and trigger a click to download the file
document.body.appendChild(link);
link.click();
// Clean up the URL object
URL.revokeObjectURL(url);Blob API의 사용 사례
Blob API는 데이터 업로드, 파일 다운로드, 이미지 압축 및 변환, 동영상 스트리밍 및 녹화 등 다양한 용도로 유용하게 사용할 수 있다. 웹 앱에서 바이너리 데이터로 작업할 때 Blob API는 이러한 유형의 데이터를 처리할 수 있는 강력하고 유연한 인터페이스를 제공한다.
