API 응답을 확인하려는데 JSON 데이터가 한 줄로 쭉 이어져 있다. 중괄호, 대괄호, 쉼표가 뒤섞여서 어디가 어딘지 구분이 안 된다. JSON 정렬만 해줘도 데이터 구조가 한눈에 들어온다.
JSON 포맷팅이란
JSON 포맷팅은 한 줄로 압축된 데이터에 들여쓰기와 줄바꿈을 넣어서 읽기 쉽게 만드는 작업이다. 기계는 한 줄이든 정렬이든 상관없지만, 사람이 디버깅하거나 데이터를 확인할 때는 정렬된 형태가 필수다.
정렬 전
{"name":"홍길동","age":30,"address":{"city":"서울","zip":"04524"}}정렬 후
{
"name": "홍길동",
"age": 30,
"address": {
"city": "서울",
"zip": "04524"
}
}같은 데이터인데 가독성이 완전히 달라진다. 중첩 구조가 깊을수록 정렬의 효과가 크다.
JSON 문법 오류 찾기
API 연동 중 오류가 나면 JSON 문법부터 의심해야 한다. 흔한 실수는 이렇다.
- 마지막 항목 뒤에 쉼표가 붙은 경우 (trailing comma)
- 키를 작은따옴표(
')로 감싼 경우 (큰따옴표만 허용) - 중괄호나 대괄호 짝이 안 맞는 경우
- 문자열 안에 이스케이프 처리 안 된 특수문자
눈으로 찾기 어려운 오류도 유효성 검사 도구를 돌리면 몇 번째 줄, 어떤 문자에서 오류가 났는지 바로 알려준다.
정렬 vs 압축, 언제 뭘 쓸까
| 작업 | 결과 | 용도 |
|---|---|---|
| 정렬(Pretty Print) | 들여쓰기 + 줄바꿈 추가 | 디버깅, 코드 리뷰, 문서화 |
| 압축(Minify) | 공백/줄바꿈 전부 제거 | API 전송, 파일 크기 절감 |
| 키 정렬 | 키를 알파벳순으로 배치 | diff 비교, 일관성 유지 |
브라우저에서 바로 정리하기
VS Code 확장을 깔아도 되지만, 빠르게 확인만 하고 싶을 때는 JSON 포맷터에 데이터를 붙여넣는 게 빠르다. 정렬, 압축, 검증 버튼이 한 화면에 있고, 들여쓰기 크기(2칸, 4칸, 탭)도 선택할 수 있다. 결과 아래에 파일 크기, 깊이, 키 개수까지 통계로 나온다.
한 줄짜리 JSON을 복사해서 붙여넣고 정렬 버튼 한 번이면 구조가 바로 보인다. 디버깅 시간이 확 줄어든다.