개발자
JSON 포맷터
JSON 정렬·압축·검증·트리 뷰 + TypeScript 인터페이스 자동 + YAML/CSV 변환.
JSON(JavaScript Object Notation)이란?
JSON은 값 종류가 6가지(문자열·숫자·불리언·null·객체·배열)뿐인 데이터 교환 포맷으로, 현행 표준은 RFC 8259(2017)입니다. 문법이 작다고 함정까지 없는 것은 아닙니다 — 숫자의 정밀도는 표준이 규정하지 않아 언어(구현체)마다 다르고, 한글 이스케이프 기본값도 JavaScript와 Python이 서로 반대입니다. 아래에서 오류 7종과 함께 이 두 가지 함정, 그리고 CLI에서 짝으로 쓰는 jq 치트시트까지 다룹니다.
자주 발생하는 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.parse가 64비트 ID를 조용히 바꾸는 이유 — 2⁵³ 한계
RFC 8259는 숫자의 범위·정밀도를 구현체 재량에 맡깁니다. JavaScript는 모든 숫자를 IEEE 754 배정밀도(double)로 다루기 때문에 정수는 2⁵³−1 = 9,007,199,254,740,991(Number.MAX_SAFE_INTEGER)까지만 정확합니다. 트위터(X) ID나 스노우플레이크 방식 주문번호처럼 64비트 정수 ID가 이 한계를 넘으면, JSON.parse는 오류 한 줄 없이 끝자리를 반올림해 버립니다.
대처는 세 가지입니다. ① 서버가 ID를 문자열로 직렬화 — 트위터 API가 숫자 id와 별도로 문자열 id_str을 함께 내려주는 이유가 바로 이것입니다. ② json-bigint 같은 대체 파서 — 큰 정수를 BigInt로 보존하며 파싱합니다. ③ BigInt를 직접 쓸 때는 반대 방향을 주의하세요 —JSON.stringify는 BigInt를 직렬화하지 못하고 TypeError를 던집니다. 참고로 Python의 int는 임의 정밀도라 같은 JSON도 값이 온전히 유지됩니다 — "Python에선 맞는데 JS에서만 ID가 다르다"면 십중팔구 이 문제입니다.
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칸)
- 디버깅·코드 리뷰
- 아래 예시 JSON: 52 → 74바이트
- API 응답 분석·로그 분석
⊟ 압축 (Minify)
- 공백·줄바꿈 제거
- 네트워크 전송 절약
- 아래 예시 JSON: 74 → 52바이트(약 −30%)
- 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 리터럴)
한글 이스케이프 — JS와 Python의 기본값이 반대입니다
같은 "한"이라도 직렬화 결과는 언어마다 다릅니다. JavaScript의 JSON.stringify는 한글을 그대로 내보내지만, Python의 json.dumps는 기본 옵션 ensure_ascii=True 때문에\ud55c 형태로 이스케이프합니다. 두 표기는 표준상 완전히 동등해서 어떤 파서든 같은 문자열로 읽지만, 파일 크기와 사람이 읽을 수 있는지가 달라집니다.
| 항목 | JS JSON.stringify | Python json.dumps |
|---|---|---|
| '한' 직렬화 결과 | "한" (그대로) | "\ud55c" (이스케이프) |
| 동작 바꾸는 옵션 | 없음 (항상 그대로) | ensure_ascii=False |
| '한' 1자 크기(UTF-8) | 3바이트 | 6바이트 (2배) |
| 파싱 결과 | 동일한 '한' | 동일한 '한' |
실무 팁: Python 로그에서 복사한 \uXXXX 덩어리도 유효한 JSON이므로, 본 도구에 붙여넣고 정렬(Beautify)만 해도 원래 한글로 표시됩니다. 반대로 JSON을 JS 코드 문자열 안에 임베드할 때는 변환 탭의 '문자열 이스케이프'를, \uXXXX를 풀 때는 '이스케이프 해제'를 쓰면 됩니다. 한글 비중이 큰 데이터는 이스케이프 시 글자당 3바이트 → 6바이트로 커지므로, 전송·저장용이라면 Python 쪽에서 ensure_ascii=False로 끄는 편이 이득입니다.
JSON 활용 팁
🔍 큰 JSON 분석
트리 뷰어로 접고 펼치며 구조 파악. 키 개수·깊이 통계로 복잡도 측정.
⚡ 네트워크 절감
API 응답은 Minify가 기본. gzip·brotli 전송 압축과 병행하면 반복 키가 많을수록 효과가 커집니다.
🔀 두 JSON 비교
키 알파벳 정렬 후 diff 도구 사용 시 순서 차이 없이 의미 차이만 확인.
🛠️ TypeScript 타입
API 명세 없이 응답 JSON만으로 타입 정의 빠르게 생성. 후 수동 다듬기.
📋 클립보드 → 코드
API 응답 복사 → 변환 → 붙여넣기로 mock 데이터·테스트 데이터 즉시 생성.
🚨 에러 위치 추적
파싱 오류 시 라인·컬럼 자동 표시. 큰 파일에서도 즉시 위치 확인.
jq 실전 치트시트 — 화면에서 확인, CLI에서 반복
구조 파악은 본 도구의 트리 뷰가 빠르지만, 같은 처리를 스크립트·파이프라인에서 반복할 땐 jq가 표준입니다. 아래는 예시 JSON {"users":[{"name":"kim","age":32},{"name":"lee","age":25},{"name":"park","age":41}]} 기준, jq 1.7 실행 결과로 확인한 자주 쓰는 필터입니다.
| 명령 | 용도 | 출력 |
|---|---|---|
| jq '.users[].name' | 특정 키만 추출 | "kim" "lee" "park" |
| jq -r '.users[0].name' | 따옴표 없이 원시 출력 | kim |
| jq '.users[] | select(.age >= 30)' | 조건으로 필터 | kim·park 객체만 |
| jq '.users | map(.name)' | 배열로 재구성 | ["kim","lee","park"] |
| jq '.users | sort_by(.age)' | 값 기준 정렬 | 나이 오름차순 배열 |
| jq '.users | length' | 개수 세기 | 3 |
| jq 'keys' | 최상위 키 목록 | ["users"] |
| jq -c . | 압축(Minify) | 한 줄 JSON |
| jq -S . | 키 재귀 정렬 | 본 도구 '키 정렬'과 동일 |
가장 요긴한 조합은 키 정렬 diff입니다.-S가 모든 키를 재귀적으로 알파벳 정렬해 주므로(본 도구의 변환 → 키 정렬과 같은 정규화), 키 순서만 다른 두 JSON은 diff가 비어 있게 됩니다.
자주 묻는 질문 (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로 변환합니다. 감소 폭은 들여쓰기·중첩 깊이에 따라 달라지는데, 예를 들어 가이드 본문의 예시 JSON은 2칸 들여쓰기 74바이트 → 압축 52바이트(약 −30%)입니다.
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 조합이 효율적입니다.