📦 자바스크립트의 `Blob`, `File`, `ArrayBuffer` 완벽 정리

heic파일을 jpeg로 변환하는 과정에서 알게된 새로운 용어들이 있어서 정리해보았다.

🔹 1. Blob (Binary Large Object)

✅ 개념

• Blob은 바이너리 데이터의 덩어리이다.
• 이미지, 오디오, 비디오, 텍스트 등 다양한 형식의 데이터를 담을 수 있다.
• 읽기 전용이며, 데이터를 처리하려면 FileReader, fetch().blob(), URL.createObjectURL() 등을 사용해야 한다.

✅ 생성 예시

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

---

🔹 2. File

✅ 개념

• File은 Blob을 상속한 객체이다.
• Blob의 데이터 외에도 파일명, MIME 타입, 최종 수정일 같은 메타정보를 포함한다.
• 주로 사용자 업로드 파일을 다룰 때 사용된다.

✅ 생성 예시

const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });

---

🔹 3. ArrayBuffer

✅ 개념

• ArrayBuffer는 고정 길이의 원시 바이너리 버퍼이다.
• 단독으로는 데이터를 읽거나 쓸 수 없고, TypedArray (Uint8Array, Float32Array 등)와 함께 사용해야 한다.
• 정밀한 이진 데이터 조작에 적합하다.

✅ 생성 예시

const buffer = new ArrayBuffer(8); // 8바이트짜리 버퍼
const view = new Uint8Array(buffer);
view[0] = 255;

---

🔄 Blob, File, ArrayBuffer 간의 관계

관계	설명
File → Blob	File은 Blob을 상속해서 만들어진다.
Blob ↔ ArrayBuffer	Blob의 데이터를 ArrayBuffer로 읽거나, ArrayBuffer를 Blob으로 만들 수 있다.

📌 예시 1: Blob → ArrayBuffer

const blob = new Blob(["Hello"]);
blob.arrayBuffer().then(buffer => {
  console.log(new Uint8Array(buffer)); // [72, 101, 108, 108, 111]
});

📌 예시 2: ArrayBuffer → Blob

const buffer = new ArrayBuffer(5);
const view = new Uint8Array(buffer);
view.set([72, 101, 108, 108, 111]); // "Hello"
const blob = new Blob([buffer], { type: "text/plain" });

---

🧠 정리

객체	핵심 역할	주요 용도
Blob	바이너리 데이터 묶음	이미지, 텍스트, 파일 생성 등
File	이름과 메타정보가 있는 Blob	사용자 업로드 파일
ArrayBuffer	낮은 수준의 이진 데이터 버퍼	정밀한 바이너리 처리, Web APIs

---

이 3가지 개념을 조금더 응용하고 싶다면 영상을 참조 할 것