API 응답을 콘솔에 찍었더니 중괄호와 대괄호가 한 줄에 몽땅 붙어 나온다. 키가 어디서 시작하고 값이 어디서 끝나는지 눈으로 따라가기가 힘들다. JSON은 구조는 단순한데, 들여쓰기가 없으면 읽는 게 고역이다.
JSON 포맷팅이 필요한 경우
- API 응답 데이터를 디버깅할 때
- 설정 파일(config.json)을 수정해야 할 때
- 다른 개발자에게 JSON 데이터를 공유할 때
- DB에서 꺼낸 JSON 필드를 확인할 때
포맷팅, 검증, 압축의 차이
- 포맷팅(Format)
- 한 줄로 뭉쳐 있는 JSON에 들여쓰기와 줄바꿈을 넣어서 읽기 쉽게 만드는 것이다. 들여쓰기를 2칸, 4칸, 탭 중에 고를 수 있다.
- 검증(Validate)
- 괄호 짝이 맞는지, 따옴표가 빠지지 않았는지, 콤마 위치가 올바른지 등 문법 오류를 잡아낸다. 오류 위치까지 알려주니까 디버깅이 빨라진다.
- 압축(Minify)
- 반대로 공백, 줄바꿈, 들여쓰기를 전부 제거해서 파일 크기를 최소화한다. 프로덕션 배포 시 전송 용량을 줄일 때 쓴다.
사용법
- JSON 데이터를 복사해서 JSON 포맷터의 왼쪽 입력 영역에 붙여넣는다.
- "정렬" 버튼을 누르면 오른쪽에 깔끔하게 정리된 결과가 나온다. 동시에 문법 오류가 있으면 어느 부분이 잘못됐는지 표시된다.
- 필요하면 키 정렬(알파벳순)을 켜서 객체 키를 일관되게 정리할 수 있다.
TIP 포맷팅 결과 아래에 파일 크기, 중첩 깊이, 키 개수 같은 통계가 나온다. JSON 구조가 복잡할 때 전체적인 규모를 파악하는 데 유용하다.
자주 나는 JSON 문법 실수
| 실수 | 예시 | 올바른 형태 |
|---|---|---|
| 마지막 콤마 | {"a":1,} | {"a":1} |
| 작은따옴표 | {'a':1} | {"a":1} |
| 키에 따옴표 없음 | {a:1} | {"a":1} |
JavaScript 객체 문법에 익숙하면 작은따옴표나 키 따옴표 생략을 무의식적으로 쓰게 되는데, JSON에서는 전부 에러다. 검증 기능으로 한 번 돌려보면 이런 실수를 바로 잡을 수 있다.
JSON 정리는 IDE 플러그인으로도 할 수 있지만, 빠르게 확인만 하고 싶을 때는 브라우저에서 바로 쓸 수 있는 도구가 편하다.