대용량 이진 데이터를 다루는 자바스크립트의 파일 컨테이너

웹에서 파일을 업로드하거나 다운로드할 때, 또는 API 응답으로 온 데이터를 다룰 때 자주 마주치는 개념이 Blob입니다.

이번 글에서는 다음과 같은 순서로 Blob을 이해해보겠습니다:

• Blob이 뭔지 한 줄로 요약
• 왜 필요한지
• 어떻게 동작하는지 (구조와 API)
• 자주 쓰이는 활용 예시

---

1. Blob이란?

Blob(Binary Large Object)은 하나 혹은 여러 개의 이진 데이터를 불변(immutable) 객체로 묶어 관리할 수 있는 자바스크립트 객체입니다.

쉽게 말해, "파일" 같은 덩어리 데이터를 메모리 상에서 하나의 객체처럼 다루기 위한 도구입니다.

---

2. 왜 Blob이 필요할까?

웹에서는 이런 상황이 자주 발생합니다:

• 사용자가 업로드한 이미지를 서버로 보내야 할 때
• 서버에서 받은 파일을 브라우저에서 다운로드 처리해야 할 때
• 영상, 이미지, JSON 등의 대용량 이진 데이터를 직접 다뤄야 할 때

Blob을 이용하면 이 데이터를 FormData에 넣거나, URL.createObjectURL(blob)을 통해 다운로드 링크를 만들거나, 파일명까지 지정해줄 수 있습니다.

즉, "이진 데이터를 추상화"하고 "편리하게 다룰 수 있게" 해주는 도구가 바로 Blob입니다.

---

3. Blob은 어떻게 동작할까?

✅ 구조

• Blob은 생성 시점에 넘겨준 ArrayBuffer, TypedArray, string, 또는 기존 Blob을 스냅샷 형태로 복사해 내부에 저장합니다.
• 저장된 데이터는 불변(immutable)이며, 나중에 수정할 수 없습니다.
• 내부의 이진 데이터는 직접 접근할 수 없고, 오직 메서드를 통해 읽을 수 있습니다.

const blob = new Blob(["Hello World"], { type: "text/plain" });

✅ 속성과 메서드

속성/메서드	설명
blob.size	총 byte 크기
blob.type	MIME 타입 (예: image/png, text/plain 등)
blob.text()	문자열로 읽기 (Promise)
blob.arrayBuffer()	ArrayBuffer로 읽기 (Promise)
blob.stream()	ReadableStream으로 청크 단위로 읽기
blob.slice()	부분적으로 자른 새 Blob 생성

---

4. Blob은 실제 데이터를 어떻게 저장하나?

• Blob은 넘겨받은 데이터를 복사하여 내부에 저장하는 불변 객체입니다.
• 복사된 데이터는 자바스크립트 코드에서 직접 접근할 수 없고, 오직 .text(), .arrayBuffer() 등의 메서드를 통해서만 읽을 수 있습니다.
• 이 과정은 브라우저 메모리 상에서 비동기적으로 처리되며, 대용량 멀티미디어 데이터를 안전하게 다루기 위한 방식입니다.

📌 정리하자면:
Blob은 원본 객체를 참조하지 않고, 복사본을 내부에 저장하여 안전하게 관리합니다.

---

5. Blob의 실전 활용 예시

📁 파일 다운로드 URL 생성

const blob = new Blob(["Hello world"], { type: "text/plain" });
const url = URL.createObjectURL(blob);

const link = document.createElement("a");
link.href = url;
link.download = "hello.txt";
link.click();

📤 FormData로 업로드할 때

const formData = new FormData();
formData.append("file", new Blob([imageData], { type: "image/png" }), "myImage.png");

---

6. 마무리 요약

• Blob은 이진 데이터를 다루기 위한 추상화 객체
• 내부 데이터를 복사해 불변 상태로 저장하며, 안전하고 효율적인 데이터 관리 가능
• 다양한 API (text(), arrayBuffer(), stream(), slice())로 데이터 읽기 가능
• 파일 다운로드/업로드, 미디어 처리 등에서 매우 자주 쓰임