HTML diff

이 글은 HTML 렌더링 결과의 변경 부분을 탐지하고 시각화하는 'HTML diff' 기능 구현에 대해 설명합니다. MS 워드의 '변경 내용 추적'과 유사한 이 기능은 HTML 텍스트를 파싱하여 트리 구조로 만든 후, 두 트리를 비교하여 변경 사항을 감지하고 이를 원본 HTML에 시각적으로 표시합니다.

구현 과정에서 HTML 파서, 트리 비교, 변경 내용 시각화 기능이 필요하며, 특히 직접 HTML 파서를 구현하는 과정과 파싱 단위를 결정하는 방법(전체 문자열 파싱)을 다룹니다. 또한, 성능 문제와 다양한 예외 처리를 위해 TDD(테스트 주도 개발) 방식을 도입하고, script 태그와 같이 복잡한 경우에 대한 예외 처리 경험을 공유합니다.