API에서 받아온 응답 데이터가 한 줄로 빼곡히 이어져 있다. 중괄호와 쉼표가 뒤엉킨 채 수천 글자가 쭉 나열되면 어디가 어딘지 구분이 안 된다. JSON 정렬만 해줘도 데이터 구조가 한눈에 보이는데, 이걸 위해 매번 코드를 짜는 건 번거롭다.
왜 JSON이 한 줄로 붙어 나올까
서버에서 JSON을 보낼 때 용량을 줄이려고 공백과 줄바꿈을 모두 제거하는 경우가 많다. 이걸 Minify(압축)라고 한다. 전송 속도 면에서는 유리하지만, 사람이 눈으로 읽기에는 최악이다.
예시{"name":"홍길동","age":30,"address":{"city":"서울","zip":"06100"}}
이 정도는 짧아서 읽을 수 있지만, 실제 API 응답은 수백 줄 분량이 한 줄로 오는 경우가 대부분이다.
JSON 포맷터로 보기좋게 정리하기
포맷팅(Pretty Print)은 들여쓰기와 줄바꿈을 넣어서 데이터의 계층 구조를 시각적으로 펼쳐주는 작업이다. 온라인 JSON 포맷터에 데이터를 붙여넣으면 클릭 한 번으로 정리된다.
- 입력창에 JSON 데이터를 붙여넣는다
- 들여쓰기 옵션을 선택한다 (2칸, 4칸, 탭)
- 정렬 버튼을 누른다
- 출력창에서 결과를 확인하고 복사한다
키 정렬 옵션을 켜면 JSON 키가 알파벳 순서로 재배열된다. 여러 API 응답을 비교할 때 키 순서가 제각각이면 diff가 안 먹히는데, 키 정렬을 먼저 적용하면 깔끔하게 비교할 수 있다.
문법 오류, 어디서 났는지 바로 찾기
쉼표 하나 빠지거나 따옴표가 짝이 안 맞으면 JSON 파싱이 통째로 실패한다. 수백 줄짜리 데이터에서 오류 위치를 눈으로 찾는 건 현실적으로 불가능에 가깝다.
검증 기능을 쓰면 오류가 몇 번째 줄, 몇 번째 문자에서 발생했는지 표시된다. 통계 정보도 함께 나온다.
| 통계 항목 | 설명 |
|---|---|
| 파일 크기(bytes) | JSON 데이터의 전체 용량 |
| 깊이(depth) | 중첩된 객체나 배열의 최대 레벨 |
| 키 개수 | JSON 내 모든 키의 총 수 |
배포할 때는 다시 압축
개발 중에는 보기좋게 정렬된 JSON이 편하지만, 실제 서비스에 올릴 때는 다시 압축하는 게 맞다. 공백과 줄바꿈을 제거하면 파일 크기가 20~30% 줄어들고, 그만큼 네트워크 전송이 빨라진다. 포맷팅과 압축을 같은 도구에서 번갈아 쓸 수 있으니, 작업 중에는 정렬해서 보고 배포 전에 압축하면 된다.
JSON과 JavaScript 객체의 차이는?
JSON은 키를 반드시 큰따옴표로 감싸야 한다. JavaScript 객체는 따옴표 없이 키를 쓸 수 있고, 마지막 항목 뒤 쉼표(trailing comma)를 허용하지만 JSON에서는 문법 오류다.
들여쓰기 2칸과 4칸, 어떤 걸 써야 하나?
정해진 규칙은 없다. 2칸이 간결하고 4칸이 구조 파악에 유리하다. 팀에서 정한 컨벤션이 있다면 그걸 따르면 된다.
복잡한 JSON을 눈으로 파싱하느라 시간 쓸 필요 없다. 정렬 한 번이면 구조가 바로 보인다.