유틸리티

JSON 포맷터 사용법, 보기 좋게 정렬하고 오류까지 잡는 법

API 응답으로 받은 JSON 데이터가 한 줄로 쭉 이어져 있다. 중괄호와 대괄호가 뒤엉켜서 어디가 어디인지 도저히 읽히지 않는다. JSON 정렬 한 번이면 구조가 눈에 들어오는데, 에디터를 열기엔 번거롭다.

JSON 포맷팅이 필요한 상황

  1. API 디버깅: 서버 응답을 확인할 때 한 줄짜리 JSON은 눈으로 파싱이 안 된다
  2. 설정 파일 정리: package.json이나 config 파일의 키를 정렬하고 싶을 때
  3. 데이터 검증: 직접 작성한 JSON에 괄호 누락이나 콤마 오류가 없는지 확인할 때
  4. 용량 줄이기: 들여쓰기가 들어간 JSON을 압축(minify)해서 전송 크기를 줄일 때

포맷팅 vs 압축 vs 검증

기능하는 일쓸 때
포맷팅(Beautify)들여쓰기, 줄바꿈 추가읽기 편하게 정리할 때
압축(Minify)공백, 줄바꿈 제거파일 크기를 줄일 때
검증(Validate)문법 오류 검출에러 원인을 찾을 때
키 정렬(Sort)알파벳순 정렬설정 파일 통일할 때
TIP JSON에서 가장 흔한 실수는 마지막 항목 뒤에 콤마를 붙이는 것(trailing comma)이다. JavaScript에서는 허용되지만 JSON 표준에서는 오류다.

브라우저에서 바로 정리하는 법

한 줄짜리 JSON을 복사해서 JSON 포맷터에 붙여넣고 정렬 버튼을 누르면 들여쓰기가 적용된 결과가 오른쪽에 바로 나온다. 들여쓰기는 2칸, 4칸, 탭 중에서 고를 수 있고, 키 정렬도 체크 한 번이면 알파벳순으로 재배치된다. 문법에 문제가 있으면 오류 위치와 내용을 알려주기 때문에 디버깅 시간이 줄어든다.

IDE 플러그인을 깔아도 되지만, 슬랙이나 메일로 받은 JSON을 잠깐 확인할 때는 브라우저 탭 하나가 더 빠르다.