JSON — 데이터를 주고받는 공용어

이 토픽을 마치면

JSON이 무엇인지, 왜 쓰이는지, 그리고 JavaScript에서 어떻게 다루는지 알게 됩니다.

왜 JSON인가

서버와 클라이언트가 데이터를 주고받으려면 형식을 맞춰야 합니다. 서버가 Python이고 클라이언트가 JavaScript여도 둘 다 이해할 수 있는 형식이 필요합니다.

JSON(JavaScript Object Notation)은 그 공용어입니다. 텍스트 기반이라 어떤 언어에서든 읽고 쓸 수 있습니다. 사실상 웹 API의 표준 데이터 형식입니다.

JSON의 구조

{
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "scores": [85, 92, 78],
  "address": {
    "city": "Seoul",
    "zip": "06000"
  },
  "phone": null
}

규칙은 단순합니다:

• 키는 반드시 쌍따옴표로 감쌉니다 (홑따옴표 불가)
• 값은 문자열, 숫자, boolean, 배열, 객체, null만 됩니다
• 함수, undefined, 주석은 안 됩니다
• 마지막 쉼표(trailing comma) 불가

JavaScript 객체와 비슷하지만, 더 엄격합니다.

JSON.stringify: 객체 → 문자열

const user = { name: "Alice", age: 25 };
const json = JSON.stringify(user);
console.log(json); // '{"name":"Alice","age":25}'
console.log(typeof json); // "string"

JavaScript 객체를 JSON 문자열로 변환합니다. 이걸 **직렬화(serialization)**라고 합니다. 서버에 데이터를 보낼 때 씁니다.

보기 좋게 출력하려면:

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

세 번째 인자가 들여쓰기 칸 수입니다.

JSON.parse: 문자열 → 객체

const json = '{"name":"Alice","age":25}';
const user = JSON.parse(json);
console.log(user.name); // "Alice"
console.log(typeof user); // "object"

JSON 문자열을 JavaScript 객체로 변환합니다. 이걸 **역직렬화(deserialization)**라고 합니다. 서버에서 받은 데이터를 쓸 때 필요합니다.

잘못된 JSON을 파싱하면 에러가 납니다:

JSON.parse("not json"); // SyntaxError

그래서 API 응답을 파싱할 때는 try-catch를 쓰는 게 안전합니다.

API 통신에서의 JSON

// 데이터 보내기 (POST)
await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice", age: 25 }),
});

// 데이터 받기 (GET)
const res = await fetch("/api/users/1");
const user = await res.json(); // JSON.parse를 자동으로 해줌

fetch의 res.json()은 JSON.parse를 자동으로 호출합니다. 보낼 때는 JSON.stringify로 직접 변환해야 합니다.

핵심

JSON은 텍스트 기반의 데이터 교환 형식이며 웹 API의 사실상 표준입니다. JSON.stringify로 객체를 문자열로, JSON.parse로 문자열을 객체로 변환합니다. 키는 쌍따옴표 필수, 함수와 undefined는 사용할 수 없습니다.