JSON 포맷터로 데이터 정렬, 검증, 압축 한 번에 하는 법

API 응답으로 받은 JSON 데이터가 한 줄로 쭉 이어져 있다. 중괄호와 대괄호가 뒤엉킨 채로 어디가 시작이고 어디가 끝인지 알 수 없다. 이 상태로 디버깅하는 건 불가능에 가깝다. 포맷팅 한 번이면 구조가 한눈에 보인다.

JSON 포맷팅이란

압축된 JSON 데이터에 들여쓰기와 줄바꿈을 넣어서 읽기 쉽게 정리하는 작업이다. 데이터 자체는 변하지 않고, 사람이 보기 편한 형태로 구조를 펼쳐준다.

포맷팅 전

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

포맷팅 후

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

들여쓰기만 추가됐을 뿐인데 어떤 키가 어떤 값을 갖고 있는지, 중첩 구조가 몇 단계인지 바로 파악된다.

포맷팅 말고도 필요한 기능들

사용 방법

JSON 포맷터에 접속해서 왼쪽 입력창에 JSON 데이터를 붙여넣으면 오른쪽에 정렬된 결과가 나온다. 문법 오류가 있으면 어느 줄, 어느 위치에서 문제가 발생했는지 에러 메시지로 알려준다.

1. 입력창에 JSON 데이터를 붙여넣는다
2. 포맷(정렬), 압축, 검증 중 원하는 기능을 선택한다
3. 결과를 복사하거나 다운로드한다

TIP 쉼표 하나 빠진 것 때문에 API 전체가 에러를 뱉는 경우가 잦다. 데이터를 전송하기 전에 검증을 한 번 거치면 이런 실수를 잡아낼 수 있다.

개발 중에 자주 겪는 JSON 오류

• 마지막 항목 뒤 쉼표 : 배열이나 객체의 마지막 값 뒤에 쉼표를 넣으면 JSON 표준에서는 오류다. JavaScript에서는 허용되지만 JSON에서는 안 된다
• 작은따옴표 사용 : JSON은 반드시 큰따옴표(")만 허용한다. 작은따옴표(')를 쓰면 파싱 에러가 난다
• 주석 포함 : JSON에는 주석이 없다. // 이나 /* */ 를 넣으면 유효하지 않은 JSON이 된다
• 키에 따옴표 누락 : {name: "홍길동"}은 JavaScript에서는 되지만 JSON에서는 {"name": "홍길동"}으로 써야 한다

JSON 다루는 일이 잦다면 포맷터 하나쯤은 브라우저 즐겨찾기에 고정해두는 게 좋다. 디버깅 시간이 눈에 띄게 줄어든다.