API 응답으로 받은 JSON이 한 줄에 쭉 이어져 있다. 중괄호와 대괄호가 뒤엉켜서 어디가 어디인지 알 수 없다. 들여쓰기와 줄바꿈만 넣어주면 바로 읽히는데, 수동으로 하기엔 양이 많다.
JSON 포맷팅이 필요한 이유
서버에서 내려오는 JSON은 대부분 압축(minified) 상태다. 공백과 줄바꿈을 전부 제거해서 전송 크기를 줄이기 때문이다. 개발 중에 데이터를 확인하려면 이걸 사람이 읽을 수 있는 형태로 펼쳐야 한다.
압축된 JSON
{"name":"김철수","age":30,"address":{"city":"서울","zip":"06100"},"skills":["JavaScript","Python"]}포맷팅된 JSON
{
"name": "김철수",
"age": 30,
"address": {
"city": "서울",
"zip": "06100"
},
"skills": [
"JavaScript",
"Python"
]
}같은 데이터인데 가독성이 완전히 다르다. 중첩 구조가 깊어질수록 포맷팅 없이는 파악이 불가능하다.
개발 중 자주 쓰는 JSON 처리 3가지
- 포맷팅(정렬)
- 들여쓰기와 줄바꿈을 추가해서 구조를 한눈에 보이게 만든다. 들여쓰기는 2칸, 4칸, 탭 중 선택할 수 있다.
- 검증
- JSON 문법이 올바른지 확인한다. 쉼표 누락, 따옴표 불일치, 닫는 괄호 빠짐 같은 오류를 잡아준다. 오류 위치도 표시된다.
- 압축
- 포맷팅의 반대 작업이다. 불필요한 공백과 줄바꿈을 전부 제거해서 파일 크기를 줄인다. 프로덕션 배포 시 설정 파일 크기를 최소화할 때 쓴다.
JSON 문법 오류가 자주 발생하는 경우
- 마지막 항목 뒤에 쉼표를 남겨둔 경우 (trailing comma)
- 키를 작은따옴표로 감싼 경우 (JSON은 큰따옴표만 허용)
- 주석을 넣은 경우 (JSON은 주석을 지원하지 않음)
- 숫자 앞에 불필요한 0을 붙인 경우 (01, 023 등)
이런 오류는 코드 에디터에서 잡아주기도 하지만, 외부에서 받은 JSON이나 로그 데이터를 검증할 때는 별도 도구가 필요하다. JSON 포매터에 붙여넣으면 문법 오류 여부와 위치가 바로 표시되고, 정상이면 포맷팅된 결과와 함께 깊이, 키 개수 같은 통계 정보도 보여준다.
TIP 키 정렬(알파벳순) 옵션을 켜고 포맷팅하면 두 JSON을 비교할 때 편하다. 키 순서가 같아지면 diff 도구에서 차이점을 바로 찾을 수 있다.
JSON 처리는 개발 중 반복되는 작업이다. 브라우저 탭 하나 열어두면 매번 에디터 플러그인을 찾을 필요가 없다.