跳转到主内容

텍스트 비교 (Diff)

두 텍스트를 비교하고 차이점을 시각적으로 확인하세요. 코드 리뷰, 문서 변경사항 추적에 유용합니다.

如何使用

  • 在左侧文本区域输入或粘贴原始文本
  • 在右侧文本区域输入或粘贴修改后的文本
  • 查看以红色（删除）和绿色（添加）突出显示的差异
  • 在统一视图和分割视图模式之间切换
  • 使用选项忽略空格或大小写差异

주요 기능​

👀 시각적 비교​

  • 추가된 줄: 녹색으로 표시
  • 삭제된 줄: 빨간색으로 표시
  • 변경되지 않은 줄: 기본 색상

🔄 두 가지 보기 모드​

  • 통합 뷰: 한 화면에 모든 변경사항 표시
  • 분할 뷰: 원본과 수정본을 나란히 표시

⚙️ 비교 옵션​

  • 공백 무시
  • 대소문자 무시
  • 줄 단위 비교

📊 통계​

  • 추가된 줄 수
  • 삭제된 줄 수
  • 변경되지 않은 줄 수

Diff란?​

Diff는 두 파일 또는 텍스트 간의 차이점을 보여주는 도구입니다. 원래 Unix 명령어로 시작했으며, 현재는 버전 관리 시스템의 핵심 기능입니다.

Diff 알고리즘​

이 도구는 Myers' diff 알고리즘을 사용하여:

  1. 두 텍스트를 줄 단위로 비교
  2. 최소한의 변경사항을 찾아냄
  3. 추가, 삭제, 유지를 구분

사용 사례​

1. 코드 리뷰​

Pull Request나 커밋의 변경사항 확인

// 이전
function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

// 이후
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

2. 문서 버전 비교​

문서의 두 버전을 비교하여 어떤 부분이 변경되었는지 확인

3. 설정 파일 비교​

프로덕션과 개발 환경의 설정 파일 차이 확인

4. API 응답 비교​

서로 다른 시점의 API 응답 비교

보기 모드​

통합 뷰 (Unified View)​

  • 전통적인 diff 형식
  • +는 추가된 줄
  • -는 삭제된 줄
  • Git, GitHub에서 주로 사용

분할 뷰 (Split View)​

  • 원본과 수정본을 나란히 표시
  • 양쪽을 동시에 볼 수 있어 이해하기 쉬움
  • 많은 GUI diff 도구에서 사용

팁​

1. 공백 무시​

포맷팅 변경만 있고 실제 내용 변경이 없을 때 유용합니다.

2. 대소문자 무시​

대소문자 차이를 무시하고 실질적인 내용 변경만 확인할 때 유용합니다.

3. 예시 로드​

"예시 로드" 버튼으로 샘플 코드를 확인해보세요!

관련 도구​