API 응답을 콘솔에 찍었더니 한 줄에 수백 글자가 쭉 이어져 나왔다. 중괄호와 대괄호가 뒤섞인 채로 줄바꿈 없이 출력되면, 어디가 어디인지 파악하는 것 자체가 일이다. JSON 데이터는 사람이 읽기 좋은 형태로 정렬해야 구조가 보인다.
JSON을 정렬해야 하는 이유
JSON은 키-값 쌍으로 이루어진 데이터 형식이다. API 통신, 설정 파일, 데이터베이스 내보내기 등 거의 모든 웹 개발에서 쓴다. 문제는 서버가 보내주는 JSON이 대부분 공백 없이 압축된 상태라는 점이다. 압축 상태에서는 중첩 구조를 따라가기 어렵고, 오류를 찾기도 힘들다.
정렬(Format) vs 압축(Minify)
| 작업 | 결과 | 용도 |
|---|---|---|
| 정렬 | 들여쓰기 + 줄바꿈 추가 | 데이터 확인, 디버깅, 편집 |
| 압축 | 모든 공백·줄바꿈 제거 | 네트워크 전송, 저장 공간 절약 |
디버깅할 때는 정렬, 프로덕션에 올릴 때는 압축. 용도에 따라 왔다 갔다 하게 된다.
흔한 JSON 문법 오류
- 마지막 쉼표: 배열이나 객체의 마지막 항목 뒤에 쉼표를 남겨두면 오류가 난다. JavaScript에서는 허용되지만 JSON 표준에서는 안 된다.
- 작은따옴표 사용: JSON은 큰따옴표(
")만 허용한다.'key'로 쓰면 파싱 실패다. - 주석: JSON에는 주석(
//,/* */)을 넣을 수 없다. 넣으면 유효하지 않은 JSON이 된다.
TIP 오류 위치를 정확히 찾으려면 검증(Validate) 기능을 쓰는 게 빠르다. 에러 메시지에 몇 번째 줄, 몇 번째 문자에서 문제가 생겼는지 표시해 준다.
브라우저에서 JSON 포맷터를 열고 데이터를 붙여넣으면 정렬, 압축, 검증을 버튼 하나로 처리할 수 있다. 들여쓰기를 2칸, 4칸, 탭 중에서 고를 수 있고, 키를 알파벳순으로 정렬하는 옵션도 있다.
한 줄짜리 JSON을 5분 동안 눈으로 쫓는 것보다, 정렬 버튼 한 번 누르는 게 낫다.