유틸리티

JSON 정렬과 검증, 한 줄짜리 데이터 보기 좋게 정리하기

API 응답을 확인하려고 콘솔을 열었는데 JSON 데이터가 한 줄에 다 붙어 있다. 중괄호와 대괄호가 뒤엉켜 있으면 어디가 시작이고 어디가 끝인지 찾기 어렵다. 들여쓰기 하나만 넣어도 구조가 한눈에 보인다.

왜 한 줄로 압축돼 있을까

서버에서 JSON을 보낼 때는 데이터 크기를 줄이기 위해 공백과 줄바꿈을 모두 제거하는 게 일반적이다. 전송 속도는 빨라지지만, 사람이 읽기에는 불편하다.

압축 상태 (Minified)

{"name":"홍길동","age":30,"skills":["Python","SQL"],"address":{"city":"서울","zip":"04524"}}

정렬 후 (Formatted)

{
  "name": "홍길동",
  "age": 30,
  "skills": [
    "Python",
    "SQL"
  ],
  "address": {
    "city": "서울",
    "zip": "04524"
  }
}

같은 데이터인데 가독성이 완전히 달라진다. 중첩 구조가 복잡할수록 정렬의 효과가 크다.

문법 오류가 있으면 어떻게 되나

JSON은 문법에 엄격하다. 쉼표 하나, 따옴표 하나가 빠져도 전체가 작동하지 않는다.

  • 키에 큰따옴표를 안 감싸면 오류
  • 마지막 항목 뒤에 쉼표(trailing comma)가 있으면 오류
  • 작은따옴표(') 대신 큰따옴표(")를 써야 함
  • 주석(//)은 JSON에서 지원하지 않음

에디터에서는 오류 위치를 찾기 어려운 경우가 많다. JSON 포매터에 붙여넣고 검증 버튼을 누르면 몇 번째 줄, 어떤 문자에서 오류가 발생했는지 바로 알려준다.

알아두면 유용한 기능

키 정렬
JSON 키를 알파벳순으로 정렬한다. 두 JSON 파일을 비교할 때 순서를 맞춰놓으면 차이점을 찾기 쉬워진다.
압축(Minify)
정렬된 JSON에서 공백과 줄바꿈을 제거한다. 설정 파일이나 API 요청 본문에 넣을 때 유용하다.
통계
파일 크기, 중첩 깊이, 키 개수를 자동으로 세준다. 대용량 JSON의 구조를 빠르게 파악할 때 쓸 만하다.

JSON 작업은 개발 중에 하루에도 몇 번씩 반복된다. 브라우저 탭에 하나 열어두면 매번 검색할 필요가 없다.