📌 핵심 요약
REST API 및 프론트엔드-백엔드 연동에서 필수적인 JSON 데이터의 유효성 검사 노하우와 트레일링 콤마, 따옴표 탈출 등 주요 오류 원인을 분석합니다.
1. 서론: 전 세계 웹을 연결하는 공용어, JSON
JSON(JavaScript Object Notation)은 경량의 데이터 교환 포맷으로, 인간이 읽고 쓰기에 편하며 기계가 파싱하고 생성하기 쉬운 텍스트 기반 구조입니다.
과거 복잡하고 무거웠던 XML을 완벽히 대체하여, 현재 전 세계 거의 모든 RESTful API, GraphQL, NoSQL 데이터베이스, 프론트엔드-백엔드 간 통신에서 사실상의 표준으로 자리 잡았습니다.
2. 본론: 엄격한 JSON 문법의 4대 핵심 규칙
일반적인 자바스크립트 객체 리터럴과 달리, JSON 표준은 매우 엄격한 문법을 요구합니다.
키(Key)는 반드시 큰따옴표(")로 감싸야 함: 작은따옴표(')나 따옴표가 생략된 키는 유효하지 않은 JSON입니다.
문자열 값도 반드시 큰따옴표(") 사용: 작은따옴표는 파싱 에러를 유발합니다.
지원 데이터 타입의 한계: 문자열, 숫자, 불리언(true/false), null, 배열([]), 객체({})만 허용됩니다. undefined, NaN, Function, Date 객체는 직접 표현할 수 없습니다.
후행 쉼표(Trailing Comma) 절대 금지: 마지막 요소 뒤에 붙는 쉼표는 브라우저 엔진에 따라 심각한 구문 오류(SyntaxError)를 일으킵니다.
3. 자주 발생하는 파싱 에러 TOP 4
| 오류 유형 | 잘못된 코드 예시 | 올바른 수정 예시 |
|---|
| Trailing Comma | {"a": 1, "b": 2, } | {"a": 1, "b": 2} |
| Single Quote | {'title': 'Article'} | {"title": "Article"} |
| 줄바꿈/특수문자 미탈출 | {"text": "Line1\\nLine2"} | {"text": "Line1\\\\nLine2"} |
| 정의되지 않은 값 | {"data": undefined} | {"data": null} |
4. 포맷팅 및 뷰어 툴을 통한 디버깅 효율화
실무에서 수천 줄에 달하는 비정형 JSON 데이터를 한 줄로 전달받았을 때, 육안으로 구조를 파악하기는 불가능합니다.
Prettier / Beautifier: 들여쓰기(2스페이스 or 4스페이스)를 적용해 트리 구조를 시각화합니다.
JSON Schema 검증: 데이터 타입과 필수 필드가 누락되지 않았는지 자동으로 유효성 검사를 수행합니다.
포털 내 유틸리티 활용: VERA 포털의 [JSON 포맷터] 도구를 활용하면 별도의 설치 없이 브라우저에서 즉시 문법 오류 위치를 찾고 정렬할 수 있습니다.
5. 결론: 견고한 데이터 계약이 버그 없는 시스템을 만든다
API 통신에서 JSON 포맷의 사소한 문법 불일치는 전체 프론트엔드 렌더링 붕괴로 이어질 수 있습니다.
데이터의 표준 규격을 정확히 이해하고, 개발 및 테스트 단계에서 유효성 검증 도구를 적극적으로 활용하는 습관이 안정적인 웹 서비스를 구축하는 지름길입니다.