🔍

텍스트 Diff & 변경점 비교기 Text Diff

좌우 대조 화면에서 변경점을 확인하고, 마우스 드래그로 자유롭게 선택하여 복사·삭제·편집하세요

0 추가0 삭제0 수정0 블록유사도 100%

변경점 없음

ORIGINAL원본 (Before)0줄 · 0자

📂 파일

✏️ 클릭하여 편집 · 드래그하여 선택

📄 파일을 여기에 놓으세요

MODIFIED수정본 (After)0줄 · 0자

📂 파일

✏️ 클릭하여 편집 · 드래그하여 선택

📄 파일을 여기에 놓으세요

⚡

비교기에 적용된 핵심 알고리즘 & 아키텍처

밀리초 단위의 실시간 대조와 무손실 인라인 편집을 구현하는 4가지 컴퓨터 과학 원리

동적 계획법 (DP)O(M × N)

1. LCS (최장 공통 부분 수열) & Myers Diff

두 텍스트 시퀀스 사이에서 순서를 유지하며 일치하는 가장 긴 부분 수열을 찾는 핵심 알고리즘입니다. 메모리 효율적인 Uint32Array 2차원 DP 테이블을 구축하여 최소 편집 거리(Edit Distance)를 역추적하고, 추가(Insert)·삭제(Delete)·일치(Equal) 블록을 완벽하게 판별합니다.

DP[i+1][j+1] = eq(A[i], B[j]) ? DP[i][j] + 1 : Math.max(DP[i+1][j], DP[i][j+1])

줄 단위 1차 비교 및 변경 청크(Chunk) 분할
공백·대소문자·빈줄 옵션별 정규화 전처리 반영

2단계 계층형 정밀 분석토크나이저

2. 다단계 인라인 토큰 하이라이트

줄 단위 비교가 끝난 후, 변경된(Modified) 줄 내부에서 다시 2차 LCS를 수행하는 계층형 아키텍처입니다. 정규식을 통해 한글 음절, 영어 단어, 공백, 특수기호를 토큰화하여 줄 전체가 아닌 실제 바뀐 단어·문자 부분만 정밀하게 강조합니다.

Regex: /(\s+|[a-zA-Z0-9_\u3131-\ud79d]+|[^\s\w])/g

단어(Word) / 문자(Char) / 줄 전체(Line) 모드 전환
<span class="hw-del"> & <span class="hw-ins"> 인라인 색상 매핑

가상 정렬 매트릭스1:1 수평 대칭

3. 가상 스페이서(Ghost Spacer) 정렬

한쪽 패널에 줄 추가나 삭제가 생기면 맞은편에 빗살무늬 빈 공간(.dline-empty)을 동적으로 생성하여 좌우 대조 줄 번호와 행 높이를 항상 1:1 수평으로 동기화합니다. 빈 공간 클릭 시 줄이 밀리거나 새 줄이 추가되지 않고 해당 행에서 즉시 인라인 수정 상태로 활성화됩니다.

left: { n: d.n, t: 'del' } ↔ right: { n: null, t: 'empty', insertIdx }

완벽한 양방향 동기화 스크롤 (Sync Scroll) 유지
빈 공간 클릭 시 줄 밀림 없이 해당 위치에서 즉시 인라인 수정 모드 활성화

반응형 상태 머신실시간 편집

4. 상태 동기화 & 다중 줄 선택 모델

단일 활성 인라인 에디터와 전체 텍스트 모델(linesA, linesB)을 완벽히 분리하고, 250ms 디바운스 알고리즘으로 타이핑 지연 없이 백그라운드 재계산을 수행합니다. 마우스 드래그 시 시작/끝 줄과 열을 추적하는 선택 모델을 통해 일괄 복사·삭제·치환을 지원합니다.

Selection: { side, startLine, startCol, endLine, endCol }

실시간 Diff 재계산 중에도 커서 위치(Caret Offset) 무손실 유지
미니 플로팅 액션 바(복사·잘라내기·삭제) 및 단축키 통합

Diff 처리 파이프라인 (Execution Pipeline)

정규화 & 전처리공백·정규식·대소문자

➜

1차 LCS 줄 대조동적 계획법 최소 편집 거리

➜

스페이서 수평 정렬좌우 대칭 행 매트릭스

➜

2차 인라인 토큰화단어·문자 단위 하이라이트

➜

반응형 인라인 렌더실시간 편집 & 드래그 선택

💬

비교기에 적용된 핵심 알고리즘 & 아키텍처

1. LCS (최장 공통 부분 수열) & Myers Diff

2. 다단계 인라인 토큰 하이라이트

3. 가상 스페이서(Ghost Spacer) 정렬

4. 상태 동기화 & 다중 줄 선택 모델

의견 및 질문

댓글 수정

댓글 삭제