JSON Diff: JSON 객체 비교
두 JSON 문서를 붙여넣으면 정확히 무엇이 바뀌었는지 보여 줍니다. 모든 차이는 $.users[2].email 같은 경로로 표시되며, 포맷이나 키 순서 때문에 잘못된 차이가 나오지 않습니다.
브라우저에서 실행가입 불필요업로드 없음
변경된 경로
| 변경 | 경로 | 이전 값 | 새 값 |
|---|
JSON Diff 사용 방법
- 왼쪽에 원본 JSON, 오른쪽에 수정된 JSON을 붙여넣거나 파일 두 개를 엽니다.
- 문법 오류는 각 입력란 아래에 행과 열과 함께 표시되므로 빠르게 고칠 수 있습니다.
- 변경된 경로 표를 확인합니다. 각 행은 값이 추가, 삭제, 변경 중 무엇인지와 이전 값·새 값을 보여 줍니다.
- 태그나 권한처럼 목록이 집합인 경우에는 배열 순서 무시를 체크합니다.
- 나란히 보기로 스크롤해 맥락 속에서 변경 사항을 보거나, 변경 목록을 JSON으로 복사합니다.
구조적 JSON diff가 텍스트 diff보다 나은 이유
일반 텍스트 diff는 문자와 줄을 비교하므로, 같은 데이터를 담은 두 JSON 파일이라도 하나가 압축되어 있거나 들여쓰기·키 순서가 다르면 완전히 달라 보입니다. 이 도구는 먼저 두 문서를 파싱한 뒤 데이터를 비교합니다. 객체는 순서와 상관없이 키별로, 숫자·문자열·불리언·null은 값으로 비교합니다. 실제 변경 사항만 보고합니다.
변경 사항 표시 방식
각 차이에는 JSONPath 스타일의 위치(예: $.owner.email, $.items[3].price)와 다음 세 가지 유형 중 하나가 붙습니다.
- 추가됨: 키나 배열 요소가 수정된 JSON에만 있습니다.
- 삭제됨: 원본 JSON에만 있습니다.
- 변경됨: 양쪽에 있지만 값이 다릅니다. 문자열이 숫자로 바뀌는 것 같은 타입 변경도 포함됩니다.
배열은 최장 공통 부분 수열(LCS) 알고리즘으로 정렬하므로, 목록 맨 앞에 요소 하나를 넣으면 뒤따르는 모든 요소가 변경으로 표시되지 않고 추가 하나로 보고됩니다.
배열 순서 무시
많은 API가 역할, 태그, ID처럼 순서에 의미가 없는 목록을 반환합니다. 배열 순서 무시를 켜면 배열을 컬렉션으로 비교합니다. 반대편에 같은 요소가 없을 때만 추가 또는 삭제로 셉니다. 이때 나란히 보기는 배열 요소를 정렬해 같은 목록이 나란히 맞춰지게 합니다.
주요 활용 사례
스테이징과 프로덕션의 API 응답 비교, 마이그레이션이 설정 파일에서 무엇을 바꿨는지 확인, 두 package.json이나 tsconfig 파일의 차이 검토, 스냅샷 테스트 디버깅에 사용하세요.
자주 묻는 질문
JSON을 비교할 때 키 순서가 중요한가요?
아니요. JSON 객체는 순서가 없으므로
{"a":1,"b":2}와 {"b":2,"a":1}은 같다고 보고합니다. 배열은 순서가 있으므로 기본적으로 순서가 중요하지만, 배열 순서 무시로 끌 수 있습니다.JSON이 서버에 업로드되나요?
아니요. 두 문서는 브라우저에서 파싱하고 비교합니다. 네트워크로 아무것도 보내지 않으므로 토큰이나 고객 데이터가 담긴 API 응답에도 안전하게 쓸 수 있습니다.
$.users[2].email 같은 경로는 무슨 뜻인가요?
$는 문서의 루트, .users는 키, [2]는 배열의 세 번째 요소입니다(인덱스는 0부터 시작). 공백이나 특수 문자가 있는 키는 $["first name"]처럼 대괄호로 씁니다.1과 1.0은 같은가요?
네. 둘 다 같은 숫자로 파싱되므로 차이로 보고하지 않습니다.
1과 "1"처럼 숫자와 문자열은 서로 다르므로 변경됨으로 보고합니다.주석이나 끝 쉼표가 있는 JSON도 비교할 수 있나요?
표준 JSON은 이를 허용하지 않으므로 해당 입력은 정확한 행과 열과 함께 오류로 표시됩니다. 주석이나 쉼표를 제거하거나, 먼저 JSON 포매터에서 문서를 정리하세요.