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

이 토픽을 마치면

JSON이 뭔지, 왜 XML이나 CSV 대신 이걸 쓰는지 설명할 수 있고, JavaScript에서 JSON을 다루는 두 가지 메서드를 알게 됩니다.

서버에서 데이터가 왔습니다

API를 호출하면 서버에서 이런 게 날아옵니다:

json

{"name": "Alex", "age": 30, "skills": ["Python", "React"]}

이게 JSON입니다. 어디서 많이 본 모양이죠? JavaScript 객체랑 거의 똑같이 생겼습니다. 실제로 JavaScript Object Notation의 줄임말입니다.

근데 JSON은 자바스크립트 전용이 아닙니다. Python이든 Java든 Go든, 거의 모든 언어에서 JSON을 읽고 쓸 수 있습니다. 그래서 "공용어"입니다.

왜 하필 JSON이 이겼을까

데이터를 주고받는 형식은 JSON 말고도 있습니다.

XML — HTML이랑 비슷하게 태그로 감쌉니다:

xml

<user>
  <name>Alex</name>
  <age>30</age>
</user>

작동은 합니다. 근데 보세요 — name이라는 단어가 세 번 나옵니다. 태그 열고 닫고 하느라 데이터보다 포장이 더 많습니다. 파일이 커지고, 읽기도 귀찮습니다.

CSV — 콤마로 구분하는 표 형식:

text

name,age
Alex,30
Jordan,25

가볍고 엑셀이랑 호환도 좋습니다. 근데 "skills 안에 Python, React" 같은 중첩 데이터를 표현할 수가 없습니다. 2차원 표가 한계입니다.

JSON은 이 둘의 장점만 가져갔습니다:

XML처럼 중첩 가능 (객체 안에 배열, 배열 안에 객체)
CSV처럼 가벼움 (태그 없이 키: 값)
사람이 읽어도 뭔 말인지 바로 보임

그래서 2010년대 이후로 웹 API의 사실상 표준이 됐습니다.

JSON 규칙 네 가지

JSON은 자유로워 보이지만 규칙이 엄격합니다. 하나라도 틀리면 파싱 에러가 납니다.

json

{
  "name": "Alex",
  "age": 30,
  "isAdmin": false,
  "skills": ["Python", "React"],
  "address": null
}

문자열은 반드시 큰따옴표 " — 작은따옴표 '를 쓰면 에러
키(key)도 반드시 큰따옴표 — JavaScript 객체는 안 써도 되지만 JSON은 필수
마지막 항목 뒤에 콤마 금지 — "React"], 처럼 쓰면 에러 (이거 자주 실수함)
쓸 수 있는 값: 문자열, 숫자, boolean(true/false), null, 배열, 객체 — 함수는 안 됨

JavaScript에서 다루기

JSON을 다루는 메서드는 딱 두 개입니다:

javascript

// 객체 → JSON 문자열 (서버에 보낼 때)
const str = JSON.stringify({ name: "Alex", age: 30 });
// '{"name":"Alex","age":30}'

// JSON 문자열 → 객체 (서버에서 받았을 때)
const obj = JSON.parse(str);
console.log(obj.name);  // "Alex"

stringify는 포장, parse는 개봉이라고 생각하면 됩니다. 서버에 보낼 때 포장하고, 받으면 개봉합니다.

어디서 쓰이나

JSON은 API 통신 말고도 온갖 곳에 쓰입니다:

package.json — Node.js 프로젝트의 설정 파일
tsconfig.json — TypeScript 설정
VS Code 설정 — 에디터 설정이 전부 JSON
브라우저 localStorage — 클라이언트 저장소
Firebase — 실시간 데이터베이스가 JSON 기반

개발하면서 JSON을 안 마주치는 날은 거의 없습니다.

자주 하는 실수

JSON 에러의 대부분은 이 세 가지 중 하나입니다:

json

{
  "name": 'Alex',           // ❌ 작은따옴표 — 큰따옴표만 됩니다
  "age": 30,
  "skills": ["Python",],    // ❌ 마지막 콤마 — JavaScript는 되지만 JSON은 안 됩니다
  name: "Alex"              // ❌ 키에 따옴표 없음 — JavaScript는 되지만 JSON은 안 됩니다
}

JavaScript 객체 문법에 익숙하면 오히려 더 자주 실수합니다. JSON은 JavaScript 객체보다 더 엄격합니다. "왜 갑자기 파싱 에러가 나지?" 싶으면 이 세 가지부터 확인하세요.

참고로 JSON에 주석을 쓸 수 없습니다. // 도 /* */ 도 안 됩니다. 설정 파일에 설명을 달고 싶으면 YAML을 쓰거나, "_comment" 같은 키를 관례적으로 쓰기도 합니다. tsconfig.json처럼 JSONC(JSON with Comments)를 별도로 지원하는 도구도 있지만, 표준 JSON은 주석을 허용하지 않습니다.

핵심

JSON은 프로그램끼리 데이터를 주고받는 공용 포장 규격입니다. 큰따옴표 필수, 마지막 콤마 금지 — 이 두 가지만 기억하면 파싱 에러의 80%는 피할 수 있습니다. JSON.stringify(포장)와 JSON.parse(개봉), 이 두 메서드가 전부입니다.