[서버 기초] JSON과 Form Data, 뭐가 다른 거야?

---

💡 “프론트에서 백엔드로 데이터를 보낼 때, 어떤 형식을 써야 해요?”

프론트엔드에서 서버에 요청을 보낼 때,
두 가지 방식 많이 보셨죠?

• Content-Type: application/json
• Content-Type: multipart/form-data

“둘 다 데이터 보내는 건데, 왜 방식이 다르고 언제 뭘 써야 하는 거지?”

오늘은 JSON과 Form Data 차이를 완전 깔끔하게 정리해드릴게요! 😊

---

📦 JSON이란?

JSON (JavaScript Object Notation)은

데이터를 객체 형태로 주고받는 가장 일반적인 형식입니다.

 

📌 특징:

• 가볍고 읽기 쉬움
• API 대부분이 JSON 기반
• 서버에서 파싱하기 쉬움

예시:

{
  "name": "Alice",
  "age": 25
}

HTTP 요청 예:

Content-Type: application/json
Body:
{
  "email": "test@example.com",
  "password": "1234"
}

✅ 로그인, 회원가입, 글 작성 등 대부분의 요청에 사용!

---

📦 Form Data란?

Form Data (multipart/form-data)는

파일 업로드나 폼 기반 전송에 쓰이는 형식입니다.

 

📌 특징:

• HTML <form>과 잘 어울림
• 텍스트 + 파일 동시 전송 가능
• 복잡한 경계(boundary)로 구성됨

예시 (브라우저 전송 구조):

------WebKitFormBoundary...
Content-Disposition: form-data; name="username"

Alice
------WebKitFormBoundary...
Content-Disposition: form-data; name="file"; filename="cat.jpg"
Content-Type: image/jpeg

✅ 파일 업로드, 이미지 첨부, 폼 제출 등에 사용!

---

🆚 JSON vs Form Data 비교표

항목	JSON	Form Data
MIME 타입	application/json	multipart/form-data
주요 용도	일반 데이터 전송 (텍스트)	파일 + 텍스트 전송
파일 전송	❌ 불가	✅ 가능
가독성	높음	낮음 (복잡한 경계 문자열)
프론트엔드 처리	fetch(..., body: JSON.stringify())	FormData 객체 사용

 

---

🧪 프론트엔드 예시 코드

✅ JSON 방식

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'a@test.com',
    password: '1234'
  })
});

✅ Form Data 방식 (파일 업로드)

const form = new FormData();
form.append('title', '고양이 사진');
form.append('file', fileInput.files[0]);

fetch('/api/upload', {
  method: 'POST',
  body: form
});

---

🤔 언제 어떤 걸 써야 할까?

상황	추천 방식
일반 텍스트 기반 API 요청	JSON
파일 업로드 + 텍스트 같이 보냄	Form Data
HTML <form> 직접 사용	Form Data
리액트 등 JS 프레임워크로 AJAX 요청	JSON 또는 FormData 선택 가능

 

---

🧠 정리 한마디!

구분	JSON	Form Data
구조	단순한 객체	폼 기반 구조
파일 전송	❌ 안 됨	✅ 가능
전송 대상	일반 텍스트 데이터	텍스트 + 이미지/파일
실무 팁	API → JSON / 업로드 → FormData

 

텍스트만 보낼 땐 JSON,
파일이 포함되면 무조건 Form Data! 📎

---

📌 다음 예고: 9편 – "Webhook이란? API랑 뭐가 다른 건데?"

• API는 내가 요청하는 건데,
• Webhook은 서버가 먼저 알려주는 구조?
• 둘의 차이를 예시 중심으로 설명드릴게요!