API 응답으로 받은 JSON 데이터가 한 줄로 쭉 이어져 있다. 중괄호와 대괄호가 수백 개 섞여 있으면 눈으로는 구조를 파악하기 불가능하다. 들여쓰기 하나만 추가해도 데이터 구조가 한눈에 보인다.
JSON 포맷팅이 필요한 상황
- API 디버깅 중 응답 데이터 구조를 확인할 때
- 설정 파일(config.json, package.json) 내용을 정리할 때
- 동료에게 JSON 데이터를 공유하기 전에 정돈할 때
- 압축된 JSON에서 특정 키 값을 빠르게 찾아야 할 때
JSON 포맷터로 할 수 있는 3가지
1. 정렬 (Beautify)
한 줄로 뭉쳐 있는 JSON에 들여쓰기와 줄바꿈을 넣어서 읽기 쉽게 만든다. 들여쓰기는 2칸, 4칸, 탭 중에서 선택할 수 있다.
예시
변환 전:{"name":"홍길동","age":30,"city":"서울"}
변환 후:
{ "name": "홍길동", "age": 30, "city": "서울" }
2. 압축 (Minify)
반대로 모든 공백과 줄바꿈을 제거해서 데이터 크기를 줄인다. API 요청 본문에 JSON을 실어 보낼 때, 불필요한 공백을 빼면 전송 크기가 줄어든다.
3. 유효성 검사 (Validate)
괄호가 안 닫혔거나, 쉼표가 빠졌거나, 키에 따옴표가 없는 등의 문법 오류를 잡아낸다. JSON 파서 에러가 나서 원인을 찾을 때 쓰면 어디가 잘못됐는지 바로 알 수 있다.
흔한 JSON 문법 오류 5가지
| 오류 유형 | 잘못된 예시 | 올바른 예시 |
|---|---|---|
| 마지막 쉼표 | {"a":1, "b":2,} | {"a":1, "b":2} |
| 작은따옴표 사용 | {'name':'홍길동'} | {"name":"홍길동"} |
| 키에 따옴표 누락 | {name:"홍길동"} | {"name":"홍길동"} |
| 괄호 불일치 | {"list":[1,2,3} | {"list":[1,2,3]} |
| 주석 포함 | // 이름 {"name":"홍"} | {"name":"홍"} |
특히 JavaScript 객체를 그대로 JSON으로 쓰면 작은따옴표나 마지막 쉼표 때문에 에러가 난다. JSON은 JavaScript보다 규칙이 엄격하다.
JSON 포맷터에 데이터를 붙여넣으면 정렬, 압축, 검증을 한 화면에서 처리할 수 있다. 키를 알파벳순으로 정렬하는 옵션도 있어서, 설정 파일을 깔끔하게 정리할 때 편하다. 데이터 크기, 구조 깊이, 키 개수 같은 통계 정보도 자동으로 보여준다.
JSON 파싱 에러를 만났을 때 코드를 한 줄씩 훑어보는 건 비효율적이다. 포맷터에 넣고 검증 버튼 한 번이면 오류 위치가 바로 나온다.