API 응답을 콘솔에 찍어봤더니 한 줄짜리 텍스트 덩어리가 나왔다. 중괄호와 쉼표가 빽빽하게 이어져 있어서 어디가 어떤 값인지 눈으로 따라가기 불가능하다. 개발하다 보면 이런 상황을 하루에도 몇 번씩 만난다.
JSON이 한 줄로 뭉쳐 있는 이유
서버가 JSON 응답을 보낼 때는 보통 minified(압축) 상태로 전송한다. 줄바꿈과 들여쓰기를 빼면 데이터 크기가 줄어들어 전송 속도가 빨라지기 때문이다. 사람이 읽으라고 보내는 게 아니라 프로그램이 파싱하라고 보내는 데이터다.
문제는 디버깅할 때다. 값이 제대로 들어왔는지, 어떤 키가 빠졌는지 확인하려면 사람이 읽을 수 있는 형태로 펼쳐봐야 한다.
JSON 포매팅이 필요한 상황
| 상황 | 필요한 작업 |
|---|---|
| API 응답 확인 | 정렬 (들여쓰기 추가) |
| 설정 파일 정리 | 정렬 + 키 알파벳순 정렬 |
| 에러 원인 찾기 | 검증 (문법 오류 위치 확인) |
| 프로덕션 배포 | 압축 (불필요한 공백 제거) |
| 문서에 예시 첨부 | 정렬 (2칸 또는 4칸 들여쓰기) |
자주 발생하는 JSON 문법 오류
JSON은 형식이 엄격해서 사소한 실수 하나로 전체가 파싱 실패한다. 자주 걸리는 실수 세 가지다.
- 마지막 쉼표(trailing comma):
{"name": "홍길동", "age": 30,}에서 30 뒤의 쉼표. JavaScript에서는 허용되지만 JSON에서는 오류다. - 작은따옴표 사용:
{'name': '홍길동'}은 JSON이 아니다. 반드시 큰따옴표를 써야 한다. - 주석 삽입:
// 이름같은 주석은 JSON에서 지원하지 않는다. 넣는 순간 파싱 에러가 난다.
TIP 에러 메시지에 "Unexpected token" 또는 "SyntaxError"가 나오면 십중팔구 위 세 가지 중 하나다. 검증 도구에 넣으면 오류 위치를 정확히 짚어준다.
브라우저에서 바로 정리하기
JSON 포매터에 데이터를 붙여넣으면 정렬, 압축, 검증을 버튼 하나로 처리할 수 있다. 들여쓰기는 2칸, 4칸, 탭 중에서 고를 수 있고, 키를 알파벳순으로 정렬하는 옵션도 있다. 파일 크기, 데이터 깊이, 키 개수 같은 통계도 실시간으로 보여주기 때문에 대용량 JSON의 구조를 빠르게 파악하는 데 쓸 만하다.
IDE 확장이나 CLI 도구를 따로 설치하지 않아도 브라우저 탭 하나로 해결된다. 모든 처리가 브라우저에서만 이루어지기 때문에 사내 API 키 같은 민감 데이터가 외부로 나가지 않는다는 점도 장점이다.
JSON을 다루는 빈도가 높다면 즐겨찾기에 하나 넣어두는 게 하루 10분은 아껴준다.