유틸리티 소개

API 응답 JSON이 한 줄로 와서 못 읽겠을 때

API 테스트하다가 응답을 받았는데 JSON이 한 줄로 쭉 붙어서 나왔다. 중괄호, 대괄호, 콤마가 빽빽하게 붙어있어서 도저히 읽을 수가 없다. 이걸 보기 좋게 정렬하고 싶다.

JSON을 보기 좋게 정렬하기

JSON 포매터에 한 줄 JSON을 붙여넣고 정렬 버튼 누르면 들여쓰기가 적용되면서 구조가 보인다. 어떤 키에 어떤 값이 있는지, 배열 안에 뭐가 있는지 한눈에 파악 가능하다.

JSON 정렬할 때 들여쓰기 옵션을 선택할 수 있다. 2칸, 4칸, 탭 중에서. 팀 코드 컨벤션에 맞춰서 고르면 된다.

문법 오류 있으면 알려준다

JSON에 콤마 하나 빠졌거나 따옴표가 잘못 닫혔거나 하면 파싱 에러가 난다. JSON 검증 기능이 어디가 잘못됐는지 알려준다.

에러 위치가 몇 번째 줄, 몇 번째 문자인지 나오니까 JSON 문법 검사로 바로 고칠 수 있다. 직접 눈으로 찾으면 시간 오래 걸리는데 이게 훨씬 빠르다.

키 알파벳순 정렬

JSON 객체의 키 순서가 뒤죽박죽일 때. JSON 편집기에서 키를 알파벳순으로 정렬할 수 있다. 비교하거나 리뷰할 때 키 순서가 일정하면 보기 편하다.

압축(Minify)도 된다

반대로 예쁘게 정렬된 JSON을 한 줄로 압축하고 싶을 때도 있다. 네트워크 전송이나 저장 공간 절약을 위해. JSON 압축 버튼 누르면 공백이랑 줄바꿈이 다 제거되고 한 줄로 된다.

JSON 미니파이 결과는 용량이 확 줄어든다. 100KB JSON이 80KB로 줄어들 수도 있다.

구조 분석 정보

JSON 파싱하면 추가 정보도 볼 수 있다:

  • 파일 크기 (바이트)
  • 중첩 깊이
  • 총 키 개수
  • 배열 아이템 수

큰 JSON 분석할 때 구조를 빠르게 파악하는 데 도움 된다.

개발할 때 자주 쓰는 상황

JSON 포맷이 필요한 상황:

  • API 응답 디버깅할 때
  • 설정 파일(package.json 등) 정리할 때
  • 데이터 구조 확인할 때
  • JSON 비교하기 전에 정렬할 때

브라우저 개발자 도구에서 복사한 JSON, Postman 응답, 로그 파일 등 다 JSON 뷰어에 넣으면 된다.

JSON beautify 결과 복사

JSON beautify 하고 나면 클릭 한 번으로 복사 가능하다. IDE나 문서에 바로 붙여넣기 할 수 있다.

JSON 변환 결과를 파일로 다운로드하는 것도 된다.

정리

한 줄로 붙어있는 JSON 읽기 힘들면 JSON 포매터로 정렬하면 된다. 문법 오류도 잡아주고, 압축도 되고, 구조 분석도 해준다. 개발할 때 거의 매일 쓰는 도구다.