설정 오타 잡아내기
변경 전
API_TIMEOUT=3000변경 후
API_TIMEOUT=300000이 하나 더 붙으면 3초 타임아웃이 30초가 됩니다. diff checker는 이걸 몇 초 만에 짚어내요. .env 파일을 눈으로만 비교하면 자주 놓치는 부분입니다.
Diff 비교기
두 텍스트나 코드를 줄·단어 단위로 나란히 비교합니다.
마지막 업데이트
원본6줄
변경됨6줄
차이+3 −3 · 3개 변경 없음
−
function greet(name) {+function greet(name) {−
console.log("Hello, " + name);+ console.log(`Hello, ${name}!`);−
return name;+
return name.toUpperCase();
−
}+
}
−+
−
greet("world");+greet("World");diff checker가 뭔가요?
diff checker는 두 텍스트(또는 코드)를 비교해서 추가·삭제·수정된 부분을 강조해 보여주는 도구입니다. 개발자라면 매일 씁니다. 코드 리뷰, 설정 파일 디버깅, API 응답 비교, 마이그레이션 검증, 커밋 직전 변경 사항 점검까지 — 거의 모든 작업의 기본이죠.
diff를 잘 읽는 건 개발자의 핵심 역량입니다. *진짜 동작이 바뀐 부분*과 단순한 포맷 변경을 구분해야 하고, 200줄짜리 블록 안에서 한 글자만 바뀐 곳도 찾아낼 수 있어야 하니까요. 초록·빨강·노랑의 리듬에 익숙해지면 코드 리뷰 속도가 확연히 빨라집니다.
diff는 크게 두 가지가 중요합니다. *라인 diff*(어느 줄이 바뀌었는지)와 *단어 diff* 또는 *문자 diff*(한 줄 안에서 무엇이 바뀌었는지)예요. 좋은 도구라면 소스 코드를 볼 때와 문장 단위 텍스트를 볼 때를 자유롭게 전환할 수 있어야 합니다.
텍스트를 비교하면서 익히게 될 것들
- 라인 diff는 *어디서* 바뀌었는지를, 단어·문자 diff는 한 줄 안에서 *무엇이* 바뀌었는지를 알려줍니다.
- 공백은 의미가 있을 수도(Markdown, YAML, Python), 무시해도 될 때도 있습니다. 파일 종류에 맞게 ignore-whitespace 옵션을 켜고 끄세요.
- 겉보기엔 작은 diff라도 값, 조건, 라우트, 환경 변수, 피처 플래그 하나가 바뀌면 영향은 어마어마할 수 있습니다.
두 텍스트 비교하는 단계별 방법
두 버전을 붙여넣기
왼쪽에 원본, 오른쪽에 새 버전을 넣으세요. 코드, JSON, 일반 글, 설정 파일 — 무엇이든 됩니다.
라인 diff vs 단어 diff 선택
소스 코드나 구조화된 데이터는 라인 diff가 적합합니다. 문장 위주의 텍스트라면 단어 diff로 전환해 표현 차이를 더 정확히 볼 수 있어요.
공백·대소문자 옵션 조정
의미 있는 변경만 보고 싶다면 *공백 무시*를 켜세요. 로그처럼 대소문자가 중요하지 않은 경우엔 *대소문자 무시*를 켭니다.
색이 칠해진 결과 읽기
삭제된 내용은 왼쪽에 빨간색, 추가된 내용은 오른쪽에 초록색으로 보입니다. 수정된 줄은 보통 양쪽에 하나씩 나란히 표시됩니다.
반복하며 다듬기
어느 쪽이든 편집하면 diff가 실시간으로 갱신됩니다. PR을 올리기 전에 깔끔한 패치를 만들 때 특히 유용합니다.
diff 색상·기호 빠른 참조
Coddy의 diff checker가 따르는 표기 규칙입니다. git diff, GitHub를 비롯한 대부분의 diff 뷰어와 동일합니다.
| 표시 | 의미 | 어디서 보이나요? |
|---|---|---|
빨강 / - | 원본에서 제거된 줄 | 왼쪽 패널 |
초록 / + | 새 버전에 추가된 줄 | 오른쪽 패널 |
| 노랑 / 양쪽 | 수정된 줄 — 한 줄 안의 부분 변경 | 양쪽 패널 |
| 색상 없음 | 변경되지 않은 줄 — 두 버전에 공통 | 양쪽 패널 |
@@ ... @@ | git diff의 헝크 헤더 — 줄 번호 정보 | 터미널 git diff 출력 |
| 단어 diff | 수정된 줄 안의 문자·단어 단위 변경 | 노란 줄 안에서 강조 표시 |
직접 해볼 만한 diff 예제
단어 단위 수정
변경 전
사용자는 login 할 수 있습니다.
변경 후
사용자는 log in 할 수 있습니다.
단어 diff는 login → log in 이 바뀐 부분만 콕 짚어줍니다. 라인 diff였다면 줄 전체가 바뀐 것처럼 표시되었을 텐데, 단어 diff는 실제 수정만 골라냅니다.
두 API 응답 비교
응답 A
{ "id": 42, "status": "draft", "published": false}응답 B
{ "id": 42, "status": "published", "published": true}관련된 두 필드가 함께 바뀌었다는 사실이 한눈에 보입니다. 상태를 변경하는 API 호출이 의도대로 동작했는지 확인할 때 이만큼 빠른 방법이 없죠.
diff 사용 시 흔한 실수
- 공백이 중요한데 무시하기 — Markdown, YAML, Python은 모두 들여쓰기에 의미가 있습니다.
- 초록색(추가)만 보고 빨간색(삭제) 부분을 놓치기. 삭제된 코드도 똑같이 중요합니다.
- diff가 깨끗하면 새 버전이 옳다고 단정하기. diff는 *무엇이 바뀌었는지*만 보여줄 뿐, *그 변경이 맞는지*는 말해주지 않습니다.
Diff Checker 자주 묻는 질문
텍스트 비교(text compare)와 diff checker는 뭐가 다른가요?
다르지 않습니다. 같은 도구를 부르는 두 가지 이름일 뿐이에요. 둘 다 두 텍스트를 비교해서 추가·삭제·수정된 부분을 강조해 줍니다.
이 도구로 코드도 비교할 수 있나요?
네. 텍스트 diff는 코드, JSON, SQL, Markdown, YAML, 설정 파일, 일반 텍스트 모두에 사용할 수 있습니다. 특히 라인 diff 뷰는 소스 코드 리뷰에 유용합니다.
개발자들은 왜 매일 diff를 쓰나요?
코드 리뷰, 변경 추적, 회귀 버그 찾기, 장애 사후 분석 — 모두 diff가 핵심입니다.
git diff, PR 화면, IDE의 비교 패널이 전부 같은 원리예요.공백은 무시해도 되나요?
파일 종류에 따라 다릅니다. Python, YAML, Markdown처럼 공백이 의미를 갖는 경우엔 그대로 비교해야 합니다. 그 외 대부분의 코드에서는 공백을 무시하면 diff가 훨씬 깔끔해집니다.
이 diff checker에 입력한 데이터는 안전한가요?
네, 비교 작업은 전부 브라우저 안에서 처리됩니다. 입력한 텍스트는 어디로도 업로드되거나 저장되지 않아요. 사내 코드, 설정 파일, 고객 데이터 예제도 안심하고 비교할 수 있습니다.
