💡 API 응답을 읽기 위한 JSON 문법 및 디버깅 가이드
현대의 웹 개발 환경에서 클라이언트(React, Vue, iOS, Android 등)와 서버(Node.js, Spring, Django 등)가 데이터를 주고받을 때 가장 널리 쓰이는 포맷이 바로 JSON입니다. 과거에는 마크업 언어인 XML을 주로 사용했지만, 태그가 복잡하고 파일 용량이 커지는 단점 때문에 현재는 가볍고 직관적인 JSON이 사실상 글로벌 표준으로 자리 잡았습니다.
1. JSON(제이슨)의 핵심 문법 규칙
JSON은 자바스크립트(JavaScript)의 객체 표기법에서 유래했지만, 언어에 종속되지 않는 독립적인 데이터 포맷입니다. 따라서 파싱(Parsing) 에러를 막기 위해서는 아래의 엄격한 문법을 반드시 지켜야 합니다.
- 반드시 쌍따옴표 사용: 모든
"key"와 문자열"value"는 반드시 쌍따옴표(Double Quotes)로 감싸야 합니다. 홑따옴표(' ')를 사용하면 문법 에러(Syntax Error)가 발생합니다. - 마지막 쉼표(Trailing Comma) 금지: 객체나 배열의 마지막 항목 뒤에는 쉼표(,)를 붙일 수 없습니다. 자바스크립트 객체에서는 허용되지만, JSON에서는 엄격하게 금지됩니다. (가장 많이 발생하는 에러 중 하나입니다.)
- 데이터 타입 제한: JSON은 문자열, 숫자, 불리언(true/false), null, 배열([]), 객체({}) 만을 값으로 가질 수 있습니다. 함수(Function), 날짜(Date) 객체, undefined는 사용할 수 없습니다.
2. 개발자를 괴롭히는 "JSON.parse: unexpected character" 에러의 원인
응답을 JSON으로 읽는 단계에서 JSON 파싱 에러가 난다면 응답 상태와 실제 본문을 먼저 확인하세요. 본 포매터(Formatter) 도구는 이러한 에러를 실시간으로 추적하여 알려줍니다. 주요 원인은 다음과 같습니다.
- HTML이나 텍스트가 섞여 들어온 경우: API 서버 측에 에러가 발생하여 정상적인 JSON이 아닌, 500 Internal Server Error를 알리는 HTML 코드를 응답으로 내려보냈을 때 프론트엔드에서 이를
JSON.parse()하려다 발생합니다. - 이스케이프(Escape) 문자 누락: 문자열 값 내부에 쌍따옴표나 백슬래시(\)가 포함되어 있을 때, 이를
\"나\\로 적절히 이스케이프 처리하지 않은 경우입니다. - BOM(Byte Order Mark) 포함: 파일을 UTF-8로 저장할 때 눈에 보이지 않는 BOM 문자가 맨 앞에 추가되어 파서(Parser)가 이를 인식하지 못하는 경우입니다.
3. JSON 포매터(Formatter)와 압축(Minify)의 활용
네트워크 대역폭을 아끼기 위해 서버가 프론트엔드로 JSON 데이터를 보낼 때는 모든 공백과 줄바꿈을 제거한 '압축(Minified)' 상태로 전송합니다. 하지만 개발자가 이를 디버깅하거나 구조를 분석하려면 눈으로 읽기 매우 어렵습니다.
본 JSON 뷰어 & 포매터 도구는 한 줄로 뭉쳐진 데이터를 표준 들여쓰기(Indent) 간격으로 예쁘게 정렬(Beautify)해주고, 키(Key)와 값(Value)의 데이터 타입에 따라 직관적인 신택스 하이라이팅(Syntax Highlighting)을 적용하여 개발자의 퇴근 시간을 앞당겨줍니다.