JSON 포맷터이란?
JSON(JavaScript Object Notation)은 사람이 읽을 수 있는 키-값 쌍과 정렬된 배열을 사용하는 경량 텍스트 기반 데이터 교환 형식입니다. 이름에도 불구하고 JSON은 언어에 독립적이며 거의 모든 최신 프로그래밍 언어에서 지원됩니다. JSON 포맷터는 원시, 축약 또는 잘못된 JSON을 가져와 적절한 들여쓰기와 줄 바꿈이 있는 잘 구성된 사람이 읽을 수 있는 형식으로 변환합니다. 예쁜 인쇄는 일관된 간격을 추가합니다 — 일반적으로 중첩 수준당 2 또는 4 공백 — 깊이 중첩된 객체와 배열을 스캔하기 쉽게 만듭니다. 축약은 그 반대를 수행합니다: 가장 작은 가능한 페이로드를 만들기 위해 모든 불필요한 공백 문자를 제거합니다.
이 계산기를 사용해야 할 때
- 한 줄로 된 읽을 수 없는 JSON을 반환하는 API 응답을 디버깅할 때
- 가독성이 중요한 문서나 README를 위해 JSON을 준비할 때
- 동일한 들여쓰기로 포맷ting한 후 두 JSON 구조를 나란히 비교할 때
- 압축된 구성 파일(예: package.json 또는 tsconfig.json)을 읽을 때
- 채팅이나 이메일로 동료에게 읽을 수 있는 형식으로 JSON 데이터를 공유할 때
- 데이터 구조를 확인하기 위해 웹훅 페이로드 또는 브라우저 네트워크 응답을 검사할 때
단계:
- JSON을 입력 영역에 붙여넣습니다.
- Click the Format button.
- 아름답게 포맷된 JSON 출력을 확인합니다.
- 포맷된 JSON을 클립보드에 복사합니다.
공식
입력: 압축된 JSON → 출력: 레벨당 2칸(기본값)의 configurable 들여쓰기가 적용된 JSON
사용 사례
- Debugging API responses
- Reading configuration files
- Sharing structured data
- 문서 작성을 위한 JSON 준비
주요 이점
- 축약된 JSON을 즉시 읽을 수 있는 들여쓰기된 출력으로 포맷
- 정확한 줄과 열 보고로 구문 오류를 감지하고 위치 파악
- 프로덕션 배포를 위해 포맷된 JSON을 Compact한 형태로 다시 축약
- 일관되고 비교하기 쉬운 출력을 위해 객체 키를 알파벳순으로 정렬
- 큰 JSON 구조에서 쉽게 탐색하기 위해 줄 번호 토글
- 클릭 한 번으로 포맷된 출력을 클립보드에 복사 — 브라우저에서 데이터가 나가지 않음
전문가 팁
- 기본값으로 2공백 들여쓰기를 사용 — 가독성과 Compact한 사이의 균형을 맞추며 가장 널리 채택된 관례입니다.
- 두 JSON 구조를 비교하기 전에 키 정렬을 활성화하여 시각적 비교를 용이하게 합니다.
- 프로덕션 구성 파일에 붙여넣기 전에 항상 이 도구에서 JSON을 검증합니다.
- HTTP 헤더 또는 URL 쿼리 매개변수용 JSON을 준비할 때 축약 옵션을 사용합니다.
- 깊이 중첩된 JSON을 디버깅할 때 줄 번호 토글을 사용하여 오류 메시지에서 특정 줄을 빠르게 참조합니다.
피해야 할 일반적인 실수
- 객체의 마지막 속성이나 배열의 마지막 요소 뒤에 쉼표를 배치하는 것 — JSON은 이를 허용하지 않습니다.
- 키 또는 문자열 값에 단일 인용 부호를 사용하는 것 — JSON은 모든 텍스트 필드에 이중 인용 부호를 요구합니다.
- JSON에 주석(// 또는 /* */)을 추가하는 것 — 표준 JSON에는 주석 구문이 없습니다.
- 키-값 쌍이나 배열 요소 사이에 쉼표를 잊어버리는 것 — 누락된 쉼표는 파싱 오류의 가장 일반적인 원인입니다.
주요 용어 설명
- JSON(JavaScript Object Notation): 키-값 쌍과 정렬된 배열을 사용하는 경량 텍스트 기반 데이터 교환 형식.
- 예쁜 인쇄: 사람이 읽을 수 있도록 일관된 들여쓰기와 줄 바꿈으로 JSON을 포맷하는 프로세스.
- 축약: 가장 작은 문자열을 만들기 위해 JSON에서 모든 불필요한 공백을 제거하는 프로세스.
- 파싱: 원시 JSON 문자열을 메모리에서 프로그래밍 가능한 객체나 구조로 변환하는 작업.
- 쉼표: 객체나 배열의 마지막 요소 뒤에 배치된 쉼표 — 엄격한 JSON에서의 일반적인 구문 오류.
관련 개념
예시
입력: {"name":"John","age":30,"address":{"city":"NYC","zip":"10001"}}가 줄 바꿈과 2칸 들여쓰기로 포맷되어 중첩 구조가 명확하게 보입니다.
결과 해석 방법
포매터는 원시 JSON 입력을 가져와 일관된 들여쓰기(기본값: 중첩당 2칸)를 적용하고 각 키, 값 또는 닫는 괄호 후에 줄 바꿈을 추가합니다. 출력은 정확한 데이터를 보존합니다 — 값은 변경되지 않고 가독성을 위한 여백만 추가됩니다.
압축 기능은 그 반대를 수행합니다: 불필요한 모든 여백을 제거하여 가장 작은 가능한 문자열을 만듭니다. 이는 모든 바이트가 중요한 production API에서 페이로드 크기를 줄이는 데 유용합니다. 압축된 JSON은 포맷된 JSON과 기능적으로 동일합니다 — 여백만 다릅니다.
키 정렬 옵션은 객체 속성을 알파벳 순으로 재배열하여 두 JSON 구조를 비교하거나 일관된 키 순서가 중요한 구성 파일에 유용합니다. JSON 키 순서에는 의미론적 의미가 없으며 정렬된 JSON과 정렬되지 않은 JSON은 동일합니다.