🟨 2-5. JSON 다루기 완벽 가이드 — 자바스크립트에서 데이터를 구조적으로 관리하는 법

---

1. JSON이란 무엇인가

JSON (JavaScript Object Notation) 은
데이터를 구조화해서 문자열로 표현하는 형식이다.

자바스크립트 객체 문법을 기반으로 만들어졌지만,
지금은 언어를 가리지 않고 전 세계에서 표준 데이터 포맷으로 쓰인다.

예시 👇

{
  "name": "홍길동",
  "age": 25,
  "isStudent": true,
  "skills": ["JavaScript", "HTML", "CSS"],
  "address": { "city": "서울", "zip": "12345" }
}

✅ 특징 정리

• 키와 값은 "쌍따옴표"로 감싼다.
• 객체({})와 배열([])을 자유롭게 중첩 가능.
• 언어에 독립적 → Python, Java, C#, Go 등 어디서나 사용 가능.

---

2. 자바스크립트에서 JSON을 사용하는 이유

웹 개발에서는 클라이언트(브라우저)와 서버가 항상 데이터를 주고받는다.
이때, 양쪽이 모두 이해할 수 있는 형식이 필요하다.
그게 바로 JSON이다.

예를 들어, 서버가 다음과 같이 응답한다고 해보자.

{ "title": "프론트엔드 입문", "views": 1540 }

이걸 자바스크립트에서 쓰려면 이렇게 변환해야 한다.

const json = '{ "title": "프론트엔드 입문", "views": 1540 }';
const obj = JSON.parse(json);
console.log(obj.title); // "프론트엔드 입문"

---

3. JSON과 객체의 관계

구분 JSON JS 객체

형태	문자열(String)	구조화된 데이터
목적	전송 및 저장	코드 내 로직 처리
변환 함수	JSON.parse()	JSON.stringify()

즉,

• 서버 → 클라이언트 : JSON.parse()
• 클라이언트 → 서버 or 저장소 : JSON.stringify()

---

4. JSON.stringify() — 객체를 문자열로 바꾸기

const user = {
  name: "기범",
  age: 27,
  skills: ["React", "Next.js"],
};

const str = JSON.stringify(user);
console.log(str);

결과 👇

{"name":"기범","age":27,"skills":["React","Next.js"]}

이제 이 문자열은 그대로 localStorage나 API 요청에 쓸 수 있다.

---

✅ 포맷팅 옵션

JSON.stringify(value, replacer, space)

console.log(JSON.stringify(user, null, 2));

결과 👇

{
  "name": "기범",
  "age": 27,
  "skills": [
    "React",
    "Next.js"
  ]
}

→ space 인자를 주면 들여쓰기된 예쁜 JSON이 된다. (디버깅할 때 필수)

---

5. JSON.parse() — 문자열을 다시 객체로

const data = '{"name": "홍길동", "age": 20}';
const obj = JSON.parse(data);
console.log(obj.name); // "홍길동"

✅ 주의
문법 오류가 있으면 SyntaxError 발생.
따라서 try-catch로 감싸는 게 안전하다.

try {
  const user = JSON.parse('{ name: "홍길동" }'); // ❌ 따옴표 누락
} catch (error) {
  console.error("JSON 파싱 오류:", error.message);
}

---

6. 실전 예시 — localStorage와 함께 사용

localStorage는 문자열만 저장 가능하므로 JSON이 필수다.

// 저장
const settings = { darkMode: true, fontSize: 16 };
localStorage.setItem("settings", JSON.stringify(settings));

// 불러오기
const saved = JSON.parse(localStorage.getItem("settings"));
console.log(saved.darkMode); // true

이 구조는 프론트엔드 상태 관리의 기본 패턴이다.

---

7. JSON을 서버와 주고받는 예시 (fetch 사용)

// 서버에 데이터 전송
const postData = {
  title: "JSON 학습하기",
  body: "오늘은 JSON을 배웠습니다.",
  userId: 1,
};

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(postData),
})
  .then((res) => res.json())
  .then((data) => console.log("서버 응답:", data));

✅ 흐름

1. 객체 → JSON 문자열 변환 (stringify)
2. 서버 전송
3. 서버 응답(JSON) → JS 객체로 변환 (res.json() 자동 파싱)

---

8. JSON의 변형 — 중첩, 배열, 필터링

JSON은 중첩 구조가 자유롭기 때문에
복잡한 데이터도 깔끔하게 표현할 수 있다.

{
  "user": {
    "name": "기범",
    "skills": [
      { "name": "React", "level": "high" },
      { "name": "Vue", "level": "mid" }
    ]
  }
}

이걸 불러와서 특정 데이터만 필터링할 수도 있다.

const jsonData = '{"user":{"name":"기범","skills":[{"name":"React","level":"high"},{"name":"Vue","level":"mid"}]}}';
const obj = JSON.parse(jsonData);
const topSkill = obj.user.skills.find((s) => s.level === "high");
console.log(topSkill.name); // "React"

---

9. JSON으로 API 데이터 가공하기

실무에서 API 응답을 직접 가공하는 일도 많다.

예시: 게시글 목록 불러오기

fetch("https://jsonplaceholder.typicode.com/posts?_limit=3")
  .then((res) => res.json())
  .then((posts) => {
    const titles = posts.map((p) => p.title);
    console.log("게시글 제목 3개:", titles);
  });

이런 식으로 fetch → JSON.parse → 가공 흐름이 자바스크립트 데이터의 핵심이다.

---

10. JSON vs XML — 왜 JSON이 이겼는가

항목 JSON XML

가독성	✅ 쉽고 짧음	❌ 태그 중복
크기	작음	큼
언어 호환	전 세계 지원	구식 포맷
JS 연동	자연스러움	불편함

→ 과거에는 XML이 표준이었지만,
지금은 거의 모든 API와 브라우저가 JSON을 기본으로 채택하고 있다.

---

11. 마무리

이제 JSON.stringify와 JSON.parse의 의미를 완벽히 이해했을 거야.
이 두 함수는 사실상 “프론트엔드 개발자의 숨은 기본기”다.

JSON은 데이터를 전달하기 위한 최소 단위이자,
프론트엔드-백엔드가 서로 대화하는 공통 언어다.

---