🟨 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을 이해하는 것은 데이터를 이해하는 것이다.
데이터를 이해하는 사람은, 결국 시스템을 설계할 수 있다.