📦 `Blob` vs 🧾 `FormData` 차이점 정리

blob vs file vs arraybuffer 이 글에 이어 궁금증이 생겨서 적어보았다.

✅ 개요

Blob과 FormData는 자바스크립트에서 파일 및 데이터 전송 시 자주 사용되지만, 목적과 역할이 다르다.

---

🔍 주요 차이점

항목	Blob	FormData
📌 정체	바이너리 데이터의 덩어리	HTML form을 시뮬레이션하는 키-값 쌍의 컬렉션
📂 타입	파일, 이미지, 텍스트 등 이진 데이터	텍스트 데이터, 파일 등 폼 입력값
📤 용도	파일, 이미지 등 전송 또는 로컬 저장	서버에 폼 데이터를 전송할 때 주로 사용
📦 내부 구조	하나의 덩어리 (stream 가능한 이진 데이터)	여러 개의 필드 (multipart/form-data로 전송)
🔄 관계	Blob 객체를 FormData에 첨부할 수 있음	FormData는 Blob을 하나의 필드로 포함할 수 있음

---

🔹 Blob 예시

const blob = new Blob(["Hello World"], { type: "text/plain" });
// blob 자체는 아무 key를 가지지 않아, 그냥 데이터 덩어리야

---

🔹 FormData 예시 + Blob 추가

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

const formData = new FormData();
formData.append("myTextFile", blob, "hello.txt");

// 서버로 전송
fetch("/upload", {
  method: "POST",
  body: formData, // Content-Type: multipart/form-data
});

---

📍 핵심 요약

• Blob은 데이터 그 자체
• FormData는 서버 전송을 위한 컨테이너
• FormData는 Blob 또는 File을 필드로 포함 가능

---

🧠 비유로 이해하기

Blob은 그냥 파일 하나이고,
FormData는 택배 상자이다.
상자 안에 Blob이나 File, 텍스트 같은 여러 데이터를 포장해서 서버로 보내는 용도이다. 📦📤

---