JSON Diff
JSON Diff (광고없음)
JSON Diff｜두 JSON 데이터의 차이점을 한눈에 비교하기
개발을 하다 보면 두 JSON 데이터가 비슷해 보이지만, 실제로는 일부 값이 변경되거나 필드가 추가·삭제된 경우가 많습니다.
JSON 구조가 단순하다면 직접 비교할 수 있지만, 데이터가 길어지고 중첩 구조가 많아지면 차이점을 찾기가 쉽지 않습니다.
주소
https://coffeetalk.co.kr/jsondiff
■ JSON Diff란?
JSON Diff는 두 개의 JSON 데이터를 비교하여 다음과 같은 차이점을 찾아주는 도구입니다.
- 새롭게 추가된 항목
- 삭제된 항목
- 값이 변경된 항목
- 데이터 타입이 변경된 항목
- 배열 내부의 순서 또는 요소 차이
단순한 문자열 비교가 아니라 JSON의 객체와 배열 구조를 분석하여 깊은 단계까지 비교합니다.
■ 기본 사용 방법
화면 왼쪽에는 기준이 되는 Base JSON을 입력하고, 오른쪽에는 비교할 Contrast JSON을 입력합니다.
두 JSON을 입력하면 구조와 값을 분석하여 차이점이 표시됩니다.
JSON 문법 오류가 있는 경우에는 비교 전에 오류를 확인할 수 있으며, JSON 포맷팅 기능을 이용해 데이터를 보기 좋게 정리할 수도 있습니다.
■ 추가·삭제·변경 항목 구분
비교 결과는 차이 유형에 따라 구분하여 표시됩니다.
Added
비교 대상 JSON에 새롭게 추가된 항목입니다.
Deleted
기준 JSON에는 존재하지만 비교 대상에서는 삭제된 항목입니다.
Value Changed
키와 데이터 타입은 같지만 값이 변경된 항목입니다.
Type Changed
값뿐만 아니라 데이터 타입이 변경된 항목입니다.
예를 들어 숫자 100이 문자열 "100"으로 변경되었다면 Type Changed 항목으로 확인할 수 있습니다.
■ 차이점 하이라이트
비교 결과 화면에서는 변경된 코드 줄에 배경색을 적용하여 차이점을 쉽게 확인할 수 있습니다.
- 추가된 항목: 초록색 계열
- 삭제된 항목: 빨간색 계열
- 값이 변경된 항목: 노란색 계열
- 타입이 변경된 항목: 주황색 계열
JSON의 Key, String, Number, Boolean, Null 값도 각각 다른 색상으로 표시되어 긴 JSON 데이터도 비교적 편하게 읽을 수 있습니다.
■ 좌우 스크롤 동기화
왼쪽과 오른쪽의 비교 결과 화면은 스크롤 위치가 서로 동기화됩니다.
한쪽 화면을 스크롤하면 반대쪽 화면도 함께 이동하기 때문에, 대응되는 JSON 위치를 쉽게 비교할 수 있습니다.
데이터 길이가 길거나 중첩 구조가 많은 JSON을 확인할 때 유용합니다.
■ 배열 비교 방식 설정
JSON 배열은 비교 목적에 따라 여러 방식으로 확인할 수 있습니다.
1. 인덱스 기준 비교
배열의 첫 번째 요소끼리, 두 번째 요소끼리 비교하는 방식입니다.
배열 순서 자체가 중요한 데이터에 적합합니다.
2. LCS 비교
최장 공통 부분 수열 방식을 이용하여 배열 요소의 이동과 변경을 분석합니다.
배열 요소가 다른 위치로 이동한 경우에도 비교하기 좋습니다.
3. 순서 무시 비교
배열의 순서는 무시하고, 내부에 어떤 요소가 존재하는지를 기준으로 비교합니다.
데이터 순서는 중요하지 않고 포함된 항목만 확인하면 되는 경우에 사용할 수 있습니다.
■ 대소문자 무시 옵션
JSON 비교 시 Key 또는 문자열 Value의 대소문자를 무시하도록 설정할 수 있습니다.
예를 들어 다음 두 Key를 동일하게 처리할 수 있습니다.
"name"
"Name"
문자열 값도 옵션을 활성화하면 다음 값을 동일하게 처리할 수 있습니다.
"coffee"
"COFFEE"
서버나 시스템에 따라 대소문자 규칙이 다른 데이터를 비교할 때 유용합니다.
■ 숫자 문자열과 숫자를 동일하게 비교
일부 API에서는 숫자가 실제 숫자 타입으로 전달되기도 하고, 문자열 형태로 전달되기도 합니다.
예를 들면 다음 두 값입니다.
100
"100"
Numeric String Equals Number 옵션을 활성화하면 위 값을 동일한 값으로 간주하여 비교할 수 있습니다.
단순한 타입 차이를 제외하고 실제 데이터 값의 차이만 확인하고 싶을 때 사용할 수 있습니다.
■ JSON Key 정렬
Sort Keys Alphabetically 옵션을 사용하면 JSON 객체의 Key를 알파벳순으로 정렬한 뒤 비교합니다.
두 JSON의 Key 순서가 서로 달라도 구조와 값을 기준으로 조금 더 편리하게 비교할 수 있습니다.
■ 차이점 사이드바
화면의 사이드바에서는 발견된 차이점을 JSON 경로 형태로 확인할 수 있습니다.
예를 들면 다음과 같은 형태입니다.
user.name
user.address.city
products[0].price
사이드바의 경로를 선택하면 해당 JSON 위치로 바로 이동합니다.
긴 JSON 데이터에서 변경된 위치를 직접 찾을 필요 없이, 원하는 차이점으로 빠르게 이동할 수 있습니다.
■ 변경 유형별 필터
추가, 삭제, 값 변경, 타입 변경 항목을 각각 선택하여 필요한 차이점만 확인할 수 있습니다.
예를 들어 삭제된 항목만 확인하거나, 타입이 변경된 항목만 따로 확인할 수 있습니다.
두 JSON이 완전히 동일한 경우에는 일치한다는 안내도 표시됩니다.
■ JSON 데이터 교환
Swap 기능을 사용하면 왼쪽과 오른쪽의 JSON 데이터를 한 번에 서로 바꿀 수 있습니다.
기준 데이터와 비교 대상 데이터를 반대로 설정하여 결과를 확인하고 싶을 때 편리합니다.
■ 입력 데이터 자동 저장
입력한 JSON 데이터는 브라우저에 자동으로 저장됩니다.
페이지를 새로고침하거나 브라우저를 다시 열어도 이전에 작성하던 JSON 데이터를 복구할 수 있습니다.
단, 공용 컴퓨터나 민감한 데이터를 다루는 환경에서는 사용 후 입력 내용을 삭제하는 것이 좋습니다.
■ 샘플 JSON 불러오기
Example 기능을 이용하면 테스트용 JSON 데이터를 자동으로 불러올 수 있습니다.
JSON Diff 기능이 어떻게 동작하는지 빠르게 확인하거나, 각 차이 유형을 테스트할 때 사용할 수 있습니다.
■ 비교 결과 복사
검출된 차이점 목록을 텍스트 형식으로 복사할 수 있습니다.
복사 결과에는 변경 유형, JSON 경로, 기존 값, 변경된 값 등이 포함됩니다.
예시는 다음과 같습니다.
[valueChanged] user.name | base: "Kim" → contrast: "Lee"
[added] user.email | contrast: "test@example.com"
[deleted] user.phone | base: "010-0000-0000"
개발 이슈, 코드 리뷰, API 변경 내역 등을 공유할 때 활용할 수 있습니다.
