Diff Checker

Diff Checker 사용법

1. 비교하고자 하는 두 텍스트를 각각 좌우 입력란에 붙여넣기 합니다.
2. 옵션에서 컨텍스트 라인 수(0~10)와 공백 무시 여부를 설정합니다.
3. 비교 버튼을 눌러 최소 편집 거리를 기반으로 한 unified diff 결과를 확인합니다.
4. 추가된 라인과 삭제된 라인 수가 표시되어 변경 범위를 쉽게 파악할 수 있습니다.

동작 원리

Diff Checker는 jsdiff 라이브러리를 사용하며, Myers diff 알고리즘을 구현합니다. 이 알고리즘은 두 텍스트 간 최소 편집 거리를 계산하는데, 삽입, 삭제, 대체를 최소화하는 경로를 찾습니다. 결과는 unified diff 형식으로 출력되며, 이 형식은 +, - 기호로 추가 및 삭제 라인을 명확히 구분합니다. 컨텍스트 라인 수를 조절하여 변경 주변의 문맥도 함께 볼 수 있습니다. 공백 무시 모드 활성 시, 공백 문자 차이는 결과에 반영되지 않아 코드 비교 시 유용합니다.

예시

텍스트 A:
function add(a, b) {
  return a + b;
}

텍스트 B:
function add(a, b) {
  return a - b;
}

Diff 결과:
@@ -1,3 +1,3 @@
 function add(a, b) {
-  return a + b;
+  return a - b;
 }

사용 시기

• 개발자가 코드 변경 사항을 빠르게 비교하고 검토할 때
• 디자이너가 HTML이나 CSS 변경 내역을 분석할 때
• SEO 전문가가 메타 태그나 텍스트 수정 전후를 검토할 때
• 학생이 과제나 문서의 수정 이력을 확인할 때

Diff Checker는 브라우저에서 실행되므로 별도의 설치 없이 즉시 사용할 수 있으며, 민감한 데이터도 안전하게 처리할 수 있습니다. JSON 데이터 포맷 확인이 필요하면 json-formatter, CSS 최적화 시 css-minifier 도구를 함께 활용해보세요.