🟨 2-12. JSON과 데이터 구조 완전 이해 — 서버와 클라이언트 간 데이터 교환의 핵심 포맷

---

1. JSON이란 무엇인가

JSON (JavaScript Object Notation) 은
데이터를 표현하고 교환하기 위한 가볍고 표준화된 텍스트 형식이다.

• JavaScript 객체 표기법을 기반으로 함
• 대부분의 프로그래밍 언어가 JSON을 읽고 쓸 수 있음
• REST API의 요청(Request)과 응답(Response)에서 기본 포맷으로 사용됨

📘 예를 들어, 서버가 게시글 정보를 내려줄 때 이런 형태다.

{
  "id": 1,
  "title": "자바스크립트 JSON 완전 정복",
  "author": "기범",
  "likes": 120,
  "tags": ["JavaScript", "JSON", "프론트엔드"]
}

이게 바로 JSON 데이터 구조다.

---

2. JSON의 기본 문법

요소 설명 예시

문자열	반드시 큰따옴표 " 로 감싸야 함	"name": "기범"
숫자	따옴표 없이	"age": 25
불리언	true / false	"isStudent": true
배열	대괄호 [] 로 표현	"skills": ["HTML", "CSS", "JS"]
객체	중괄호 {} 로 표현	"profile": {"name": "기범"}
null	값 없음	"nickname": null

✅ JSON은 문법적으로 매우 엄격하다.
→ 작은따옴표 불가 (‘X’)
→ 마지막 쉼표 금지
→ 키는 항상 큰따옴표로 감싸야 함

{
  "name": "기범",
  "age": 28,
  "skills": ["HTML", "CSS", "JavaScript"]
}

이건 유효하지만 👆
아래처럼 쓰면 오류가 난다 👇

{
  name: "기범",     // ❌ 따옴표 없음
  "age": 28,        // ✅
}

---

3. JSON과 자바스크립트 객체의 차이

JSON은 JavaScript에서 파생되었지만, 문자열 형식이다.
즉, 아래 두 코드는 완전히 다르다.

// 자바스크립트 객체
const obj = { name: "기범", age: 28 };

// JSON 문자열
const json = '{"name": "기범", "age": 28}';

항목 자바스크립트 객체 JSON

형태	실제 객체	문자열
데이터 타입	자유롭게 사용 가능	문자열, 숫자, 불리언, 배열, 객체, null만 가능
사용 목적	코드 내부에서 로직 처리	데이터 교환용 포맷

---

4. JSON 변환 (직렬화 & 역직렬화)

JSON을 다룰 때 가장 자주 쓰는 두 함수는 다음과 같다.

✅ 객체 → JSON (문자열 변환)

const user = { name: "기범", age: 28 };
const json = JSON.stringify(user);
console.log(json);
// 출력: {"name":"기범","age":28}

✅ JSON → 객체 (파싱)

const jsonData = '{"name":"기범","age":28}';
const obj = JSON.parse(jsonData);
console.log(obj.name); // 기범

💡 용어

• 직렬화 (Serialization) → 객체 → 문자열
• 역직렬화 (Deserialization) → 문자열 → 객체

---

5. 중첩 객체와 배열 다루기

JSON은 계층 구조를 지원하므로 복잡한 데이터도 표현 가능하다.

{
  "user": {
    "id": 7,
    "name": "기범",
    "posts": [
      {
        "id": 1,
        "title": "프론트엔드 개발자의 하루",
        "likes": 230
      },
      {
        "id": 2,
        "title": "React vs Vue 비교",
        "likes": 450
      }
    ]
  }
}

자바스크립트에서 접근할 때는 다음처럼 한다.

console.log(data.user.name); // 기범
console.log(data.user.posts[1].title); // React vs Vue 비교

---

6. JSON과 API 통신

REST API에서는 거의 모든 데이터가 JSON으로 오간다.

// 데이터 전송
fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "기범", age: 28 }),
});

// 데이터 수신
const res = await fetch("/api/users/1");
const data = await res.json();
console.log(data.name); // 기범

✅ Content-Type 헤더는 반드시 "application/json"으로 지정해야 한다.
✅ 서버 응답도 보통 JSON 형태이므로 .json()으로 변환 필요.

---

7. JSON의 장점

1️⃣ 언어 독립적 → Python, Java, Go 등 어디서나 사용 가능
2️⃣ 가볍고 읽기 쉬움
3️⃣ 데이터 구조 표현에 강함 (객체/배열)
4️⃣ REST API와 완벽 호환

📘 예를 들어 백엔드에서 Python으로 이런 응답을 보낼 수 있다.

from flask import jsonify
return jsonify({"name": "기범", "language": "Python"})

프론트엔드는 JavaScript로 그대로 받을 수 있다.

const res = await fetch("/api");
const data = await res.json();
console.log(data.language); // "Python"

---

8. JSON의 단점

1️⃣ 주석을 지원하지 않는다 (//, /* */ 불가)
2️⃣ 큰 데이터에서는 가독성이 떨어질 수 있다
3️⃣ Date, Function, Undefined 같은 타입을 표현할 수 없다

→ 이런 이유로,
대규모 시스템에서는 JSON 대신 Protobuf, YAML, MessagePack 같은 대안도 사용된다.

하지만 프론트엔드 개발자 입장에서는 JSON이 가장 현실적이고 표준적인 선택이다.

---

9. JSONLint로 구조 검증

JSON은 쉼표 하나 잘못 찍어도 에러가 발생하므로,
https://jsonlint.com 같은 검증 사이트에서 확인하는 습관을 들이자.

VSCode에서도 Ctrl + Alt + M (또는 Command Palette → “Format Document”)으로 자동 포맷 가능하다.

---

10. 실무에서의 JSON 관리 팁

상황 팁

여러 JSON 파일 관리	public/data 폴더로 분리
환경변수(JSON 기반)	.env + process.env 사용
JSON Mock 서버	json-server로 빠른 API 시뮬레이션 가능
복잡한 JSON 응답	TypeScript 인터페이스로 구조화

💡 예시 (json-server)

npm install -g json-server
json-server --watch db.json --port 4000

이렇게 하면 로컬에서 GET /posts, POST /posts 같은 가짜 API 서버를 바로 띄울 수 있다.

---

11. JSON vs XML

항목 JSON XML

가독성	좋음	복잡함
데이터 크기	작음	큼
주석 지원	❌	✅
사용 사례	웹, 앱	레거시 시스템, 문서 기반
구조 표현	배열, 객체	태그 계층

현대 웹에서는 거의 모든 데이터 전송이 JSON으로 통일되어 있다.

---

12. 정리

개념 설명

JSON	데이터 교환 포맷 (JavaScript Object Notation)
직렬화	객체 → JSON 문자열 (JSON.stringify)
역직렬화	JSON 문자열 → 객체 (JSON.parse)
사용처	REST API, 설정 파일, 데이터 저장
주의점	따옴표, 쉼표, 주석 미지원

---

13. 마무리

이제 JSON이 단순히 {} 형태의 문법이 아니라,
웹의 모든 데이터가 오가는 언어라는 걸 이해했을 거야.

React, Next.js, Vue 같은 프레임워크에서 데이터를 받아 렌더링할 때,
그 중심에는 항상 JSON이 있다.

JSON을 이해하는 것은 데이터를 이해하는 것이다.
데이터를 이해하는 사람은, 결국 시스템을 설계할 수 있다.

---