Diff Checker

두 개의 텍스트를 비교하고 차이점을 강조 표시로 확인해요. 추가된 부분은 녹색, 삭제된 부분은 빨강색으로 표시돼요. 모든 작업이 브라우저에서 진행되므로 데이터가 어디로도 전송되지 않아요.

작동 방식: 아래 두 패널에 텍스트를 붙여넣거나 입력해요. 이 도구는 줄별로 비교하고 추가된 부분(녹색), 삭제된 부분(빨강색), 변경되지 않은 부분(회색)을 강조 표시해요. 공백이나 대소문자 차이를 무시하려면 옵션을 전환해요. 어떤 서버로도 데이터가 전송되지 않아요.

7줄 추가됨7줄 삭제됨6줄 변경없음
1-function greet(name) {
2- console.log("Hello, " + name);
1+function greet(name, greeting = "Hello") {
2+ console.log(greeting + ", " + name);
3 return true;
4 }
5
6-const users = ["Alice", "Bob", "Charlie"];
6+const users = ["Alice", "Bob", "Charlie", "Diana"];
7
8-for (let i = 0; i < users.length; i++) {
9- greet(users[i]);
8+for (const user of users) {
9+ greet(user);
10 }
11
12-// Old comment
13-console.log("Done!");
12+// Updated comment
13+console.log("All done!");

Diff란 무엇인가요?

Diff(차이점의 약자)는 두 개의 텍스트를 비교하여 변경된 부분을 보여주는 도구예요. Diff 도구는 추가되거나 제거되거나 수정된 줄을 식별하여 파일의 두 버전 간에 정확히 무엇이 변경되었는지 쉽게 확인할 수 있게 해줘요. Diff는 Git 같은 버전 관리 시스템, 코드 리뷰 프로세스, 문서 비교 워크플로우에서 기본이 되는 요소예요.

Diff 알고리즘은 어떻게 작동하나요?

Diff 알고리즘은 두 텍스트 사이의 Longest Common Subsequence(LCS)를 찾아 최소한의 변경 사항 세트를 결정해요. 가장 일반적인 알고리즘은 Git이 사용하는 Myers' 알고리즘과 patience diff 알고리즘이에요. 원본에는 있지만 수정된 텍스트에는 없는 줄은 삭제로 표시되고, 새로운 줄은 추가로 표시돼요. 변경되지 않은 줄은 맥락을 제공해요.

일반적인 사용 사례

Diff 도구는 커밋 전에 코드 버전을 비교하거나, pull request 변경 사항을 리뷰하거나, 환경 간의 설정 파일을 비교하거나, 문서의 변경 사항을 찾거나, 정상 코드와 오류 코드를 비교하여 디버깅하거나, 형식 변경이 내용을 변경하지 않았는지 확인할 때 사용돼요. 협업 개발 워크플로우에서는 필수적인 도구예요.

Diff 모범 사례

  • 커밋 전에 diff를 검토하여 의도하지 않은 변경 사항을 발견해요
  • 재포맷된 코드를 비교할 때 ignore-whitespace 사용해요
  • 이전 커밋만 비교하지 말고 기본 브랜치와 비교해요
  • diff를 작고 집중적으로 유지해요 — 작은 변경 사항이 리뷰하기 쉬워요
  • 복잡한 변경 사항에 대해 side-by-side 뷰를 사용해요
  • 전체 맥락을 이해하기 위해 변경 주변의 맥락 줄에 주의를 기울여요