viewer.csslab.dev

JSON 비교

두 JSON 을 값으로 비교한다. 키 순서와 들여쓰기는 무시하고.

JSON 두 개를 그냥 diff 하면 왜 안 되나?

JSON 객체에는 정해진 멤버 순서가 없다. 그래서 똑같은 데이터를 적은 두 문서가 키를 다른 순서로, 다른 들여쓰기로 직렬화될 수 있다. 그것을 보통의 텍스트 비교에 넣으면 모든 줄이 바뀐 것으로 나온다 — 도구는 텍스트에 대해 참말을 하고 있지만 데이터에 대해서는 아무것도 말해 주지 않는다.

이 비교는 양쪽을 파싱해 모든 객체의 키를 정렬하고, 하나의 일관된 들여쓰기로 다시 직렬화한 다음에야 견준다. 그러고 남는 것이 실제로 다른 값들이다 — 바뀐 필드, 새로 생긴 필드, 사라진 필드.

An object is an unordered collection of zero or more name/value pairs.
RFC 8259 §1

기능

키 순서가 문제되지 않는다
비교 전에 양쪽을 키를 정렬해 다시 직렬화한다. 백엔드가 직렬화 라이브러리를 바꿨다고 잡음으로 가득한 비교 결과가 나오지 않는다.
형식이 문제되지 않는다
들여쓰기·공백·줄바꿈을 정규화해 없앤다. 압축된 응답과 펼쳐진 응답이 데이터가 같으면 같은 것으로 나온다.
바뀐 값을 줄 안에서 짚는다
값이 바뀌면 달라진 부분만 표시한다 — 긴 줄에서 숫자 하나가 바뀐 경우도 두 줄을 눈으로 대조하지 않고 바로 보인다.
깨진 JSON 은 깨졌다고 한다
한쪽이 파싱되지 않으면 비교를 멈추고 알린다. 조용히 텍스트 비교로 물러나 다른 것을 잰 결과를 돌려주지 않는다.
실제 응답으로 해도 된다
두 문서 모두 브라우저에 남는다. 비교 대상이 운영 API 응답과 스테이징 응답일 때 그게 요점이다.

사용법

  1. 1

    두 문서를 붙여넣는다

    왼쪽에 원본, 오른쪽에 바뀐 것. 압축됐든 펼쳐졌든 상관없다.

  2. 2

    JSON 비교를 켠 채로 둔다

    여기서는 기본으로 켜져 있다. 끄면 평문 비교로 돌아가는데, 한쪽이 올바른 JSON 이 아닐 때만 그게 맞다.

  3. 3

    표시된 값을 읽는다

    사라진 값은 왼쪽에, 더해진 값은 오른쪽에 표시되고, 줄 안에서 바뀐 부분이 따로 칠해진다.

  4. 4

    같은 줄을 접는다

    문서가 크고 차이가 작으면 "바뀐 줄만" 을 켠다.

자주 묻는 질문

보통 diff 는 왜 모든 줄이 바뀌었다고 하나?

텍스트를 비교하는데 텍스트가 실제로 다르기 때문이다. JSON 객체의 멤버에는 정해진 순서가 없어서 직렬화기가 어떤 순서로든 내보낼 수 있고, 들여쓰기도 마찬가지로 자유롭다. 둘 다 데이터에는 보이지 않고 텍스트 비교에는 전부 보인다.

키를 정렬하면 JSON 의 뜻이 바뀌나?

바뀌지 않는다. RFC 8259 는 객체를 이름/값 쌍의 순서 없는 모음으로 정의한다. 같은 쌍을 다른 순서로 가진 두 객체는 같은 객체다. 그래서 비교를 위한 정렬은 공정하다. 배열은 다르다 — 순서가 뜻을 가지므로 정렬하지 않는다.

배열은 위치로 비교하나?

그렇다. JSON 에서 배열은 순서 있는 나열이므로 앞에 원소 하나가 끼면 뒤가 전부 밀리는 것이 맞고, 비교도 그렇게 보고한다. 목록을 순서와 무관하게 견주고 싶으면 양쪽 문서에서 먼저 정렬한다.

한쪽이 올바른 JSON 이 아니면?

비교를 멈추고 그렇게 알린다. 일부러 그렇게 했다 — 조용히 텍스트 비교로 물러나면 답처럼 보이지만 다른 것을 잰 결과를 받게 된다.

API 응답 두 개를 비교할 수 있나?

여기 오는 사람의 대부분이 그 이유로 온다. 두 본문을 붙여넣으면 환경 사이의 형식 차이가 사라지고 실제로 바뀐 필드만 남는다. 업로드되지 않으므로 운영 응답도 붙여넣어도 된다.

이 도구가 따르는 규격

함께 쓰는 도구