API 응답을 확인하려고 콘솔을 열었는데 JSON 데이터가 한 줄에 다 붙어 있다. 중괄호와 대괄호가 뒤엉켜 있으면 어디가 시작이고 어디가 끝인지 찾기 어렵다. 들여쓰기 하나만 넣어도 구조가 한눈에 보인다.
왜 한 줄로 압축돼 있을까
서버에서 JSON을 보낼 때는 데이터 크기를 줄이기 위해 공백과 줄바꿈을 모두 제거하는 게 일반적이다. 전송 속도는 빨라지지만, 사람이 읽기에는 불편하다.
압축 상태 (Minified)
{"name":"홍길동","age":30,"skills":["Python","SQL"],"address":{"city":"서울","zip":"04524"}}
정렬 후 (Formatted)
{
"name": "홍길동",
"age": 30,
"skills": [
"Python",
"SQL"
],
"address": {
"city": "서울",
"zip": "04524"
}
}
같은 데이터인데 가독성이 완전히 달라진다. 중첩 구조가 복잡할수록 정렬의 효과가 크다.
문법 오류가 있으면 어떻게 되나
JSON은 문법에 엄격하다. 쉼표 하나, 따옴표 하나가 빠져도 전체가 작동하지 않는다.
- 키에 큰따옴표를 안 감싸면 오류
- 마지막 항목 뒤에 쉼표(trailing comma)가 있으면 오류
- 작은따옴표(') 대신 큰따옴표(")를 써야 함
- 주석(//)은 JSON에서 지원하지 않음
에디터에서는 오류 위치를 찾기 어려운 경우가 많다. JSON 포매터에 붙여넣고 검증 버튼을 누르면 몇 번째 줄, 어떤 문자에서 오류가 발생했는지 바로 알려준다.
알아두면 유용한 기능
- 키 정렬
- JSON 키를 알파벳순으로 정렬한다. 두 JSON 파일을 비교할 때 순서를 맞춰놓으면 차이점을 찾기 쉬워진다.
- 압축(Minify)
- 정렬된 JSON에서 공백과 줄바꿈을 제거한다. 설정 파일이나 API 요청 본문에 넣을 때 유용하다.
- 통계
- 파일 크기, 중첩 깊이, 키 개수를 자동으로 세준다. 대용량 JSON의 구조를 빠르게 파악할 때 쓸 만하다.
JSON 작업은 개발 중에 하루에도 몇 번씩 반복된다. 브라우저 탭에 하나 열어두면 매번 검색할 필요가 없다.