개발자
📋 JSON 포맷터
JSON 정렬·압축·검증·트리 뷰 + TypeScript 인터페이스 자동 + YAML/CSV 변환.
JSON(JavaScript Object Notation)이란?
JSON은 데이터를 저장하고 전송하기 위한 경량 데이터 형식입니다. Douglas Crockford가 2001년 표준화했고, 현재는 RFC 8259(2017)로 정의된 가장 널리 쓰이는 데이터 교환 포맷입니다. 사람이 읽기 쉽고 기계가 파싱하기 쉬워 API·설정 파일·NoSQL DB·로그에서 표준입니다.
자주 발생하는 JSON 오류 7가지
Trailing comma
마지막 요소 뒤 쉼표 — JSON 표준 비허용. JSON5/JSONC는 허용.
Single quotes
문자열에 작은따옴표(') 사용 — JSON은 큰따옴표(") 전용.
Unquoted keys
키에 따옴표 없음 — { name: "John" } ❌ → { "name": "John" } ✓.
undefined / NaN
JS 값 undefined·NaN·Infinity는 JSON에 사용 불가. null로 대체.
주석 포함
JSON은 // 또는 /* */ 주석 미지원. JSON5·JSONC는 지원.
Escape 누락
문자열 안의 ", \, 줄바꿈은 \", \\, \n으로 이스케이프 필수.
인코딩 BOM
UTF-8 BOM(\uFEFF)은 JSON 표준 미허용. 파일 저장 시 주의.
JSON vs JSON5 vs JSONC
| 기능 | JSON (RFC 8259) | JSON5 | JSONC |
|---|---|---|---|
| 주석 | ❌ | ✓ | ✓ |
| Trailing comma | ❌ | ✓ | ✓ |
| Single quote | ❌ | ✓ | ❌ |
| Unquoted keys | ❌ | ✓ | ❌ |
| 주요 사용처 | API·일반 | 설정 파일 | tsconfig·VSCode |
JSON 정렬(Beautify) vs 압축(Minify)
✦ 정렬 (Beautify)
- 가독성 ↑ (들여쓰기 2/4칸)
- 디버깅·코드 리뷰
- 크기 약 20~30% 증가
- API 응답 분석·로그 분석
⊟ 압축 (Minify)
- 공백·줄바꿈 제거
- 네트워크 전송 절약
- 크기 약 20~40% 감소
- API 응답·임베드
JSON → TypeScript 인터페이스 자동 생성
REST API 응답을 그대로 붙여넣으면 TypeScript 인터페이스를 자동 생성합니다. 중첩 객체는 별도 인터페이스로 분리되어 코드에 바로 활용할 수 있습니다.
JSON ↔ YAML ↔ CSV 변환
YAML
Kubernetes·Docker Compose·GitHub Actions·Ansible 설정 파일 표준
CSV
엑셀·Google Sheets·DB import에 사용. 객체 배열 → 평탄화된 표
키 정렬
두 JSON 비교(diff) 시 키 순서 차이를 제거하고 의미 차이만 비교
이스케이프
JSON을 다시 JS 문자열에 임베드할 때 사용 (코드 안에 JSON 리터럴)
JSON 활용 팁
🔍 큰 JSON 분석
트리 뷰어로 접고 펼치며 구조 파악. 키 개수·깊이 통계로 복잡도 측정.
⚡ 네트워크 절감
API 응답은 항상 Minify. gzip 압축까지 적용 시 추가 70% 절감.
🔀 두 JSON 비교
키 알파벳 정렬 후 diff 도구 사용 시 순서 차이 없이 의미 차이만 확인.
🛠️ TypeScript 타입
API 명세 없이 응답 JSON만으로 타입 정의 빠르게 생성. 후 수동 다듬기.
📋 클립보드 → 코드
API 응답 복사 → 변환 → 붙여넣기로 mock 데이터·테스트 데이터 즉시 생성.
🚨 에러 위치 추적
파싱 오류 시 라인·컬럼 자동 표시. 큰 파일에서도 즉시 위치 확인.
자주 묻는 질문 (FAQ)
Q1. JSON에 주석을 쓰면 왜 오류가 나나요?
JSON 표준(RFC 8259)은 주석을 허용하지 않습니다. Douglas Crockford는 "주석을 허용하면 사람들이 파싱 지시문을 적기 시작해 호환성이 깨질 수 있어 의도적으로 뺐다"고 밝혔습니다. 주석이 필요하면 JSON5(트레일링 컴마·주석·작은따옴표 허용)나 JSONC(VSCode·tsconfig.json에서 사용)를 사용하세요.
Q2. API 응답 JSON에서 TypeScript 타입을 자동 생성할 수 있나요?
네, 본 도구의 변환 탭 → TypeScript 인터페이스를 사용하세요. JSON을 붙여넣으면 자동으로 인터페이스를 생성합니다. 중첩 객체는 별도 인터페이스로 분리되어 재사용 가능하며, 키는 알파벳 순으로 정렬됩니다. 옵셔널 필드(?)는 null 값일 때 자동 표시되며, 추가 검증·튜닝은 수동으로 진행하면 됩니다.
Q3. JSON Beautify(정렬)와 Minify(압축) 차이는?
Beautify는 들여쓰기와 줄바꿈을 추가해 가독성을 높이는 작업으로, 디버깅이나 코드 리뷰 시 사용합니다. Minify는 모든 공백과 줄바꿈을 제거해 크기를 줄이는 작업으로, 네트워크 전송이나 저장 공간 절약이 필요할 때 사용합니다. API 응답은 보통 Minify로 전송하고, 분석할 때만 Beautify로 변환합니다. 일반적으로 Minify 시 20~40% 크기 감소됩니다.
Q4. JSON 파싱 오류 위치를 어떻게 찾나요?
JavaScript 표준 오류 메시지에는 보통 at position N 또는 at line N column N 형식으로 위치가 포함됩니다. 본 도구는 이를 자동으로 분석해 해당 라인의 텍스트와 컬럼 위치(^표시)를 보여줍니다. 자주 발생하는 원인은 ① trailing comma, ② 작은따옴표, ③ 키에 따옴표 누락, ④ 이스케이프되지 않은 특수문자입니다.
Q5. 두 JSON의 차이점을 비교하는 방법은?
두 JSON을 비교하기 전 키 알파벳 정렬을 적용하면 순서 차이로 인한 가짜 diff를 제거할 수 있습니다. 본 도구의 변환 → 키 정렬로 정규화한 후, GitHub의 diff·VSCode의 비교 도구·jq 같은 CLI 도구로 의미적 차이만 확인하세요. 큰 JSON은 jq -S(키 정렬) + diff 조합이 효율적입니다.