JSON을 이해하는 JavaScript 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 개발자, API 통신 및 데이터 처리에 관심 있는 중급~고급 개발자
핵심 요약
- JSON은 JavaScript 객체와 유사하지만 문자열 형식으로, API 통신 및 데이터 교환에 널리 사용됨
- JSON.stringify()와 JSON.parse()를 사용하여 JavaScript 객체와 JSON 간 변환 가능
- JSON은 함수, 주석, 따옴표 생략 등 JavaScript 객체와의 차이점이 존재하며, 문법 오류 주의 필요
섹션별 세부 요약
- JSON의 정의와 특징
- JSON은 가볍고 인간/기계 모두 쉽게 처리 가능한 데이터 교환 형식
- 예시:
{"name":"Alice","age":25,"skills":["HTML","CSS","JavaScript"]}
- 주요 특징: 문자열 기반, 함수/주석 불가, 키는 항상 따옴표 필수
- JavaScript 객체 vs JSON 비교
- 데이터 타입: JavaScript 객체는
Object
, JSON은String
- 함수 포함: JavaScript 객체는 가능, JSON은 불가능
- 따옴표: JavaScript 객체는 선택적, JSON은 반드시 필수
- 주석: JavaScript 객체는 허용, JSON은 허용되지 않음
- JSON 변환 메서드
- JavaScript 객체 → JSON 문자열:
JSON.stringify(user)
- JSON 문자열 → JavaScript 객체:
JSON.parse(jsonString)
- 예시:
console.log(JSON.stringify({name: "Bob"})); // '{"name":"Bob"}'
- API 통신에서의 JSON 사용
fetch()
사용 시.json()
메서드로 JSON 응답 파싱- 예시:
fetch('...').then(response => response.json())
- JSON 사용 시 주의사항
- 키 생략 시 오류:
{name:"John"}
→ 무효,{"name":"John"}
→ 유효 - 함수 제거:
JSON.stringify({sayHi: () => "Hi"})
→sayHi
속성은 생략됨
결론
JSON은 웹 개발에서 필수적인 데이터 형식이므로, JSON.stringify()
와 JSON.parse()
의 정확한 사용과 문법 규칙 준수가 중요합니다. JSON 유효성 검증 도구(예: jsonformatter.org)를 활용하여 오류를 사전에 방지하세요.