🆚 JSON 비교 도구 (diff)
두 JSON의 차이를 추가·삭제·변경으로 나눠 경로와 값까지 보여 줘요. 키 순서는 무시하고 배열 순서 무시 옵션도 있어요.
사용법
- 왼쪽 A(이전)에는 기준이 되는 JSON, 오른쪽 B(이후)에는 비교할 JSON을 붙여넣으세요. 입력하는 즉시 결과가 아래에 나와요.
- 결과 목록은 추가(+), 삭제(−), 변경(~) 세 종류예요. 각 항목에는
$.addr.city같은 경로와 이전 값·이후 값이 함께 나와요. - '배열 순서 무시'를 켜면
[1, 2, 3]과[3, 2, 1]을 같다고 봐요. 객체 배열도 내용을 기준으로 정렬한 뒤 비교해요. - JSON 문법이 틀렸다면 어느 쪽(A/B)이 틀렸는지와 오류 내용을 알려 줘요. 이 계산은 모두 브라우저 안에서만 이뤄져서 입력한 데이터는 서버로 가지 않아요.
어떻게 비교하나요
- 객체는 키 이름으로 비교해요. 키가 나타나는 순서는 무시해서
{"a":1,"b":2}와{"b":2,"a":1}는 같아요. JSON 표준에서 객체의 키는 순서가 의미 없는 집합이기 때문이에요. - 배열은 기본적으로 인덱스 0, 1, 2… 순서로 짝지어 비교해요. 배열의 순서가 의미 있는 데이터(목록, 순서 있는 단계)는 그대로 두세요.
- 값의 종류가 다르면 변경으로 봐요. 숫자
1과 문자열"1",null과 빈 문자열은 서로 달라요. - 한쪽에만 있는 키는 추가 또는 삭제, 값이 다르면 변경으로 나와요. 값이 객체나 배열이면 안쪽까지 내려가 가장 깊은 차이만 보여 줘요.
계산 예시
아래 두 JSON을 비교하면 5가지 차이가 나와요.
A: {"name": "smith", "age": 30, "tags": ["a", "b"], "addr": {"city": "Seoul", "zip": "04524"}}
B: {"age": 31, "name": "smith", "tags": ["a", "c", "d"], "addr": {"city": "Seoul"}, "admin": true}| 구분 | 경로 | 내용 |
|---|---|---|
| 변경 | $.age | 30 → 31 |
| 변경 | $.tags[1] | "b" → "c" |
| 추가 | $.tags[2] | "d" |
| 삭제 | $.addr.zip | "04524" |
| 추가 | $.admin | true |
키 순서가 달라진 name과 age 위치는 차이로 세지 않아요. tags 배열은 인덱스로 비교해서 1번이 바뀌고 2번이 늘었다고 알려 줘요.
어떤 때 쓰나요
- API 응답 비교: 배포 전후 같은 요청의 응답이 어떻게 달라졌는지 볼 때 유용해요. 순서가 일정치 않은 필드가 있어도 키 기준으로 비교해서 의미 있는 차이만 남아요.
- 설정 파일 변경 확인: package.json, tsconfig.json, 앱 설정 JSON을 수정하기 전후로 나란히 놓고 차이를 확인해요.
- 테스트 기대값 검증: 기대 JSON과 실제 결과를 붙여넣고 어느 필드가 다른지 빠르게 찾을 수 있어요.
- 데이터 마이그레이션: 변환 전후 데이터를 샘플로 비교하면 빠진 필드를 찾기 쉬워요.
경로 표기 읽는 법
경로는 $(최상위)에서 시작해요. 객체의 키는 .키로, 배열의 요소는 [번호]로 이어 가요(번호는 0부터). $.users[2].name은 'users 배열의 세 번째 요소의 name'이에요. 키 이름에 하이픈이나 공백이 들어 있으면 $["a-b"]처럼 대괄호와 따옴표로 표기해요. 이 표기는 JSONPath와 같은 방식이라 다른 도구에서 같은 위치를 찾기 쉬워요.
배열 순서 무시 옵션의 한계
'배열 순서 무시'는 두 배열을 같은 기준으로 정렬한 뒤 앞에서부터 비교해요. 요소가 모두 같은 구조의 단순한 값이거나 객체라면 잘 맞아요. 하지만 배열 요소가 몇 개 달라졌다면 정렬 위치가 밀려서 하나만 다른데도 여러 개가 다르게 나올 수 있어요. 객체 배열에서 id 같은 고유 키로 짝을 맞춰 비교하고 싶다면 먼저 배열을 id 기준으로 정렬하거나 객체로 바꿔서 비교하세요. 이런 방식은 큰 데이터에서는 전문 diff 도구가 더 정확해요.
문법 오류가 나올 때 확인할 것
- 마지막 항목 뒤의 쉼표(,) — JSON은 허용하지 않아요.
- 키와 문자열은 반드시 큰따옴표(")로 감싸야 해요. 작은따옴표는 JSON이 아니에요.
- 주석(
//,/* */)은 JSON에 쓸 수 없어요. undefined,NaN, 함수는 JSON 값이 아니에요.- 로그나 문서에서 복사했다면 앞뒤에 붙은 설명 글자가 섞이지 않았는지 보세요.
구조를 보기 좋게 정리하려면 JSON 포매터, 문법만 검사하려면 JSON 검사기를 쓰세요. 일반 텍스트 비교는 텍스트 비교가 더 알맞아요.
자주 하는 실수
- 숫자와 문자열 구분 누락:
"price": 1000과"price": "1000"은 달라요. 서버에 따라 이 차이가 버그를 만들어요. - 배열 순서가 의미 없는데 순서 무시를 안 켠 경우: 같은 목록인데 정렬이 달라서 차이가 크게 나와요.
- 민감한 정보를 외부 도구에 붙여넣기: 이 도구는 서버로 전송하지 않지만, 비밀번호·토큰 같은 값은 예시용으로 가려서 쓰는 습관이 좋아요.
모든 비교는 이 브라우저 안에서 이뤄지고 서버로 전송되지 않아요. 아주 큰 JSON(수 MB 이상)은 브라우저가 느려질 수 있어요.