🌐
웹개발
JSON
JavaScript Object Notation
JSON은 사람이 읽고 쓰기 쉬운 경량 데이터 교환 형식입니다. 키-값 쌍으로 구성되어 REST API의 표준 데이터 포맷으로 사용되며, JavaScript에서 유래했지만 언어 독립적입니다.
📖 상세 설명
JSON(JavaScript Object Notation)은 2001년 Douglas Crockford가 처음 명세화한 텍스트 기반의 경량 데이터 교환 형식입니다. JavaScript의 객체 리터럴 문법에서 영감을 받았지만, 언어에 독립적이어서 Python, Java, C#, Go 등 거의 모든 프로그래밍 언어에서 네이티브로 지원됩니다.
JSON은 두 가지 구조로 이루어져 있습니다. 첫째는 이름/값 쌍의 컬렉션(객체)이고, 둘째는 값의 순서 있는 리스트(배열)입니다. 지원하는 데이터 타입은 문자열, 숫자, 불리언, null, 객체, 배열로 제한되어 있어 단순하면서도 강력합니다. 주석을 지원하지 않는다는 점이 특징입니다.
JSON이 XML을 대체하게 된 이유는 명확합니다. XML에 비해 파싱이 빠르고, 데이터 크기가 작으며, 읽기 쉽습니다. 같은 데이터를 표현할 때 JSON은 XML의 절반 이하 크기로 충분합니다. 이로 인해 REST API, 설정 파일(package.json, tsconfig.json), NoSQL 데이터베이스(MongoDB, CouchDB) 등에서 표준 포맷으로 자리잡았습니다.
실무에서 JSON은 HTTP API 통신의 표준 포맷입니다. 프론트엔드와 백엔드 간 데이터 교환, 서버 간 마이크로서비스 통신, 설정 파일 저장, 로그 데이터 구조화 등에 널리 사용됩니다. JSON5, JSONC 같은 확장 포맷은 주석과 trailing comma를 허용하여 설정 파일 용도로 활용되며, JSON Schema는 JSON 데이터의 유효성 검사에 사용됩니다.
💻 코드 예제
// JSON 기본 구조와 JavaScript에서의 활용
// 1. JSON 데이터 구조
const userJson = `{
"id": 1,
"name": "홍길동",
"email": "hong@example.com",
"isActive": true,
"age": 28,
"roles": ["admin", "editor"],
"profile": {
"avatar": "https://example.com/avatar.png",
"bio": "소프트웨어 개발자"
},
"lastLogin": null
}`;
// 2. JSON 파싱 (문자열 → 객체)
const user = JSON.parse(userJson);
console.log(user.name); // "홍길동"
console.log(user.roles[0]); // "admin"
console.log(user.profile.bio); // "소프트웨어 개발자"
// 3. JSON 직렬화 (객체 → 문자열)
const newUser = {
id: 2,
name: "김철수",
email: "kim@example.com",
createdAt: new Date() // Date는 문자열로 변환됨
};
// 기본 직렬화
const jsonString = JSON.stringify(newUser);
console.log(jsonString);
// {"id":2,"name":"김철수","email":"kim@example.com","createdAt":"2024-01-15T..."}
// 가독성 있는 포맷팅 (들여쓰기 2칸)
const prettyJson = JSON.stringify(newUser, null, 2);
console.log(prettyJson);
// 4. replacer로 특정 필드만 포함
const publicData = JSON.stringify(user, ['id', 'name', 'email'], 2);
// 5. reviver로 파싱 시 데이터 변환
const jsonWithDate = '{"name": "이벤트", "date": "2024-01-15T10:00:00Z"}';
const event = JSON.parse(jsonWithDate, (key, value) => {
if (key === 'date') return new Date(value);
return value;
});
console.log(event.date instanceof Date); // true
// 6. API 응답에서 JSON 처리 (실무 패턴)
async function fetchUser(userId: number) {
try {
const response = await fetch(`/api/users/${userId}`, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json(); // 자동으로 JSON.parse 수행
return data;
} catch (error) {
console.error('JSON 파싱 오류:', error);
throw error;
}
}
// 7. 깊은 복사에 JSON 활용 (주의: 함수, undefined, Symbol 손실)
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3;
console.log(original.b.c); // 2 (원본 유지)🗣️ 실무 대화 예시
💬 상황: API 응답 포맷에 대한 팀 논의
백엔드
"새로운 API 응답을 설계하고 있는데, JSON 구조에 대해 의견 주세요. 에러 응답도 일관된 포맷을 유지하려고요."
프론트엔드
"성공과 에러 응답 모두 { success: boolean, data: T, error?: { code: string, message: string } } 같은 래퍼 형태면 좋겠어요. 프론트에서 타입 가드 처리가 쉬워집니다."
백엔드
"좋아요. 그리고 날짜는 ISO 8601 포맷(2024-01-15T10:00:00Z)으로 통일하고, 금액 같은 숫자는 정밀도 문제로 문자열로 보내면 어떨까요?"
프론트엔드
"동의합니다. JavaScript에서 큰 정수는 Number.MAX_SAFE_INTEGER를 넘으면 정밀도가 손실되니까요. 그리고 JSON Schema로 응답 구조를 문서화하면 프론트에서 Zod나 io-ts로 런타임 검증도 할 수 있을 것 같아요."
⚠️ 주의사항
- 순환 참조 오류: JSON.stringify()는 순환 참조가 있는 객체를 처리할 수 없습니다. TypeError가 발생하므로, 순환 참조가 있는 경우 flatted 라이브러리를 사용하거나 직접 처리 로직을 구현하세요.
- 큰 정수 정밀도 손실: JSON의 숫자는 JavaScript Number(IEEE 754)로 파싱되므로 2^53 이상의 정수는 정밀도를 잃습니다. 큰 ID나 금액은 문자열로 전송하고, BigInt가 필요하면 별도 파싱 로직을 구현하세요.
- 특수 값 처리: undefined, Function, Symbol은 JSON.stringify()에서 제거되고, Infinity와 NaN은 null로 변환됩니다. Date는 ISO 문자열로 변환되지만 파싱 시 자동으로 Date 객체가 되지 않으므로 reviver 함수를 사용해야 합니다.