JavaScript Blob 개념 이해

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 웹 애플리케이션에서 파일 처리, 이미지/데이터 다운로드/업로드 기능 구현을 담당하는 개발자

- 중급 수준 (Blob API, 스트림 처리, URL 생성 등 기본 개념 이해 필요)

핵심 요약

• Blob은 이진 데이터를 메모리에 저장하는 불변 객체로, new Blob() 생성 후 데이터 변경 불가
• URL.createObjectURL()을 통해 생성된 blob:// URL은 파일 다운로드, 브라우저 내 파일 생성에 활용 가능
• stream() 메서드를 통해 ReadableStream으로 데이터 처리 가능 (대규모 데이터 처리 시 유리)

섹션별 세부 요약

1. Blob의 정의 및 특성

• Binary Large Object로, 이진 데이터를 메모리에 저장
• 불변성을 가지며, 데이터 수정은 새로운 Blob 생성을 통해 이루어짐
• 브라우저 메모리에 저장되며, URL.revokeObjectURL()을 통해 수동으로 제거 가능

2. Blob URL 생성 및 활용

• URL.createObjectURL()을 사용해 생성된 URL은 blob:// 형식으로 나타남
• 예시:

```javascript

const myCustomBlob = new Blob(["Olá, Dev!"], {type: "text/plain"});

const url = URL.createObjectURL(myCustomBlob);

```

• 생성된 URL은 a 태그의 href에 할당해 사용자에게 파일 다운로드 가능

3. Blob과 스트림 처리 (Stream)

• stream() 메서드를 통해 ReadableStream 생성 가능
• 예시:

```javascript

const readable = blobHtml.stream();

const textDecoded = readable.pipeThrough(new TextDecoderStream());

for await (let myChunk of textDecoded) { console.log(myChunk); }

```

• 스트림은 대규모 데이터 처리 시 메모리 효율성 향상에 유리

4. Blob의 배열 버퍼(ArrayBuffer) 변환

• arrayBuffer() 메서드로 ArrayBuffer 생성 가능 (이진 데이터 직접 조작 가능)
• TypedArray (e.g., Uint8Array, Float64Array)를 통해 배열 버퍼의 데이터 조작 가능

5. DataURL 활용 및 한계

• DataURL을 통해 이미지 등 이진 데이터를 Base64 문자열로 변환 가능
• 예시:

```javascript

const dataUrl = URL.createObjectURL(blob); // HTML/CSS 등 텍스트 기반 파일에 활용

```

• 대규모 파일 사용 시 성능 저하 가능성 (메모리 사용량 증가)

결론

• Blob은 브라우저 내 이진 데이터 처리에 유리한 객체로, 파일 다운로드/업로드, 스트림 처리 등에 적합
• 대규모 데이터 처리 시 스트림(Stream) 활용이 권장되며, DataURL은 소규모 파일에 한해 사용
• URL.revokeObjectURL()로 생성된 URL 메모리 해제 필수 (메모리 누수 방지)