[Blob] 브라우저에서 파일 데이터를 다루는 핵심 도구

728x90

Blob 

웹 애플리케이션에서 이미지, 동영상, 텍스트 파일 등을 다룰 때, 자바스크립트만으로 데이터를 처리하고 싶은 순간이 자주 생깁니다. 이때 사용하는 강력한 도구가 바로 Blob(Binary Large Object) API입니다. Blob은 브라우저에서 바이너리 데이터를 파일처럼 다룰 수 있도록 해주는 객체로, 이미지 미리보기, 파일 다운로드, 서버 업로드, 미디어 스트리밍 등 다양한 기능을 제공합니다.

 

---

1.  Blob이란?

Blob은 자바스크립트에서 이진 데이터를 표현하는 객체입니다. Blob은 파일의 형태를 갖지만, 실제로는 메모리에 존재하는 데이터 덩어리입니다.

기본 생성 방법

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

• 첫 번째 인자 : 배열 형태의 데이터 (문자열, ArrayBuffer 등)
• 두 번째 인자 : MIME 타입 (예: text/plain, image/png 등)

 

---

2.  Blob의 주요 특징

항목	설명
파일처럼 다룰 수 있음	Blob 객체는 File과 비슷하게 동작함
타입 지정 가능	type 속성으로 콘텐츠 유형 명시 가능
slice 가능	.slice() 메서드로 부분 잘라내기 가능
읽기 전용	한 번 생성된 Blob의 내용은 변경 불가

 

---

3.  실전 예제

a.  Blob으로 텍스트 파일 생성 후 다운로드

const text = "이것은 텍스트 파일입니다.";
const blob = new Blob([text], { type: "text/plain" });

const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "sample.txt";
a.click();

URL.revokeObjectURL(url); // 메모리 해제

• Blob 객체를 만들어 URL로 변환하고, a 태그를 동적으로 만들어 다운로드 트리거를 만듭니다.

b.  Blob으로 이미지 미리보기

const fileInput = document.querySelector("input[type='file']");
const img = document.querySelector("img");

fileInput.addEventListener("change", (e) => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  img.src = url;
});

• 사용자가 선택한 이미지 파일을 Blob URL로 바꿔 <img>에 미리보기로 만들 수 있습니다.
• File도 사실은 Blob의 확장형입니다. (File extends Blob)

c.  서버에서 받아온 바이너리 데이터로 파일 저장

fetch("/download/pdf")
  .then(res => res.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "document.pdf";
    a.click();
    URL.revokeObjectURL(url);
  });

• 서버에서 응답을 .blob()으로 파싱하면 Blob 객체가 생성됩니다.
• 다운로드, 처리, 미리보기 등 다양하게 활용 가능합니다.

 

---

4.  Blob vs File 차이점

항목	Blob	File
정의	일반적인 이진 데이터 덩어리	사용자 또는 시스템에서 생성된 파일
생성 방법	new Blob([...])	new File([...], filename)
파일 이름	없음	있음 (name, lastModified 등)
주 사용 용도	텍스트/이미지 생성, 다운로드 등	업로드용 파일, 파일 정보 포함

 

---

5.  Blob 관련 API 요약

메서드 / 속성	설명
new Blob(parts, options)	Blob 생성
blob.size	Blob의 크기 (byte)
blob.type	MIME 타입
blob.slice(start, end)	일부 Blob만 잘라냄
URL.createObjectURL(blob)	Blob을 가리키는 URL 생성
URL.revokeObjectURL(url)	URL 메모리 해제

 

---

6.  마무리

• Blob은 브라우저에서 바이너리 데이터를 파일처럼 다룰 수 있게 해주는 객체입니다.
• 텍스트, 이미지, JSON, 바이너리 데이터 등 다양한 타입을 저장하고 조작할 수 있습니다.
• 이미지 미리보기, 다운로드 링크 생성, 서버에서 받아온 파일 처리 등에 매우 유용합니다.
• File은 Blob의 확장 개념이며, 파일 이름과 수정 시간 등의 추가 정보가 포함됩니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - Blob
• MDN Web Docs - File

 

---

반응형