JSON이란?

JSON이란?

JSON (JavaScript Object Notation)
→ 자바스크립트 객체 문법을 기반으로 한 데이터 표현 방식

✔ 사람도 읽기 쉽고,
✔ 기계도 처리하기 쉽고,
✔ 언어에 구애받지 않음

데이터 저장이나 서버 ↔ 클라이언트 통신 시 주고받는 포맷으로 가장 널리 쓰입니다.

 

JSON vs 자바스크립트 객체

구분	Javascript 객체	JSON
키	따옴표 없어도 OK	항상 "따옴표" 필요
값	함수, undefined도 가능	문자열, 숫자, 배열, 객체만 가능
표현방식	코드의 일부	문자열 형태 (데이터 자체)

// JS 객체
const user = { name: "Lee", age: 25 };

// JSON (문자열)
const jsonStr = '{ "name": "Lee", "age": 25 }';

 

JSON 사용 흐름

// JSON 문자열 → 객체
const obj = JSON.parse(jsonStr);

// 객체 → JSON 문자열
const newJsonStr = JSON.stringify(obj);

• JSON.parse() : 문자열을 JS 객체로 변환
• JSON.stringify() : 객체를 JSON 문자열로 변환

-> 이게 서버 통신 시 핵심 포인트

 

JSON은 어디에 쓰이나?

활용 분야	예시
API 통신	fetch(), axios() 응답/요청 데이터
데이터 저장	로컬 스토리지, DB에서 저장 구조
설정파일	package.json, tsconfig.json, .babelrc 등
백엔드 ↔ 프론트	REST API 응답 본문 (Response Body)

 

예시

fetch('/api/user')
  .then(res => res.json())    // JSON 파싱
  .then(data => console.log(data));

 

JSON의 장점

✔ 가독성 좋음 (사람이 보기 쉬움)
✔ 언어 독립적 → Python, Java, C#, Go 등 어디서든 사용
✔ 경량 데이터 포맷 → 빠르고 효율적
✔ 웹표준으로 자리 잡음

 

주의할 점

• JSON에는 함수, 날짜 객체, undefined 등은 포함 불가
• JSON.stringify()할 때 객체 순환 참조(Circular Reference) 있으면 에러 발생

const obj = {};
obj.self = obj; // 순환 참조

JSON.stringify(obj); // ❌ TypeError 발생

 

 

JSON 실전 활용 예시

// 예: 사용자 정보 JSON
{
  "id": 101,
  "name": "Lee",
  "email": "lee@example.com",
  "isAdmin": false,
  "skills": ["HTML", "CSS", "JavaScript"]
}

-> 이걸 fetch() 응답으로 받았다면 바로 화면에 뿌릴 수 있음

 

Tip: JSON → Python에서는?

import json

# 문자열 → 딕셔너리
json_str = '{"name": "Lee", "age": 25}'
data = json.loads(json_str)

# 딕셔너리 → 문자열
json_string = json.dumps(data)

➡ JSON은 JavaScript 뿐 아니라 Python, Java 등 모든 언어에서 표준 지원