댓글 모듈 레거시 걷어내기 with TDD

이 글은 줌인터넷의 서브도메인에서 사용되던 댓글 모듈의 레거시 코드를 Vue와 TypeScript를 사용하여 개선한 과정을 소개합니다. 기존 JavaScript, jQuery 기반의 댓글 모듈은 MPA(Multi Page Application) 환경에 맞춰져 있어 SPA(Single Page Application) 전환 시 불편함과 유지보수의 어려움을 야기했습니다.

특히 페이지 전환 시 스크립트 주입 방식, 최상위 document 이벤트 등록, 상태 추적의 어려움 등이 문제점으로 지적되었습니다. 이를 해결하기 위해 TDD(테스트 주도 개발) 방법론을 적용하고 Jest를 활용하여 효율적인 유지보수가 가능한 댓글 컴포넌트를 개발했습니다.

최종적으로 개선된 댓글 모듈 컴포넌트는 사내 라이브러리로 배포되어 재사용성을 높였습니다.