왼쪽 JSON (원본)
오른쪽 JSON (수정)
JSON Diff Checker란?
JSON Diff Checker는 두 JSON 객체를 의미론적으로 비교하고 명확한 시각적 피드백으로 모든 차이를 강조하는 개발자 도구입니다. 일반 텍스트 diff와 달리 JSON 구조를 이해하여 모든 중첩 수준에서 누락된 속성, 타입 불일치, 값 변경 및 배열 수정을 감지합니다. 모든 것이 브라우저에서 100% 실행되며 데이터가 기기를 떠나지 않습니다.
JSON 비교 방법
1. 왼쪽 패널에 원본 JSON을, 오른쪽 패널에 수정된 JSON을 붙여넣습니다. 2. 비교를 클릭하거나 입력 시 자동 비교가 변경 사항을 감지하도록 합니다. 3. 색상 코드로 강조된 나란히 보기를 확인합니다: 추가는 녹색, 제거는 빨간색, 수정된 값은 노란색. 4. 탐색 화살표 또는 차이점 목록을 사용하여 변경 사항 간 이동합니다. 5. 요약 표시줄의 체크박스를 사용하여 유형별로 차이를 필터링합니다. 6. 결과 복사 또는 내보내기를 클릭하여 차이 요약을 다운로드합니다.
기능
- 시맨틱 diff — jsondiffpatch를 통한 깊은 구조 비교.
- 분류된 차이점 — 누락된 속성, 타입 불일치, 값 변경, 추가된 키.
- 나란히 보기 — 동기화된 스크롤 및 라인 수준 강조.
- Diff 탐색 — prev/next 컨트롤로 차이점 하나씩 탐색.
- Diff 목록 패널 — 경로와 세부 정보가 있는 클릭 가능한 차이점 목록.
- 필터 시스템 — 차이점 카테고리별 가시성 전환.
- 내보내기 — diff를 HTML 또는 일반 텍스트로 다운로드.
- 세션 지속성 — 입력이 IndexedDB를 통해 자동 저장됩니다.
- 완전 클라이언트 사이드 — 데이터가 브라우저를 벗어나지 않습니다.
사용 사례
- 코드 변경 전후 API 응답 비교.
- 구성 파일 업데이트 확인 (package.json, tsconfig 등).
- 환경 간 직렬화 차이 디버깅.
- 코드 리뷰 — 예상 JSON과 실제 JSON 출력 확인.
- 데이터베이스 마이그레이션 검증 — 내보낸 레코드 비교.
- QA 테스트 — 테스트 실행 간 픽스처 데이터 비교.