댓글 모듈 레거시 걷어내기 with TDD
프론트엔드
댓글 모듈 레거시 걷어내기 with TDD
두줄요약
JavaScript와 jQuery 기반의 댓글 모듈을 Vue와 TypeScript로 재구성했습니다. TDD와 컴포넌트 분리를 통해 SPA에 맞는 사내 라이브러리로 배포했습니다.
문제 상황
- JavaScript, jQuery 기반 댓글 모듈의 레거시 구조
- 페이지 전환 시 스크립트 주입과 document 전역 이벤트 등록으로 인한 상태 추적·디버깅 어려움
- 2,000줄 규모 클래스, Mustache 템플릿, 중복 코드와 분리되지 않은 UI로 유지보수 난항
해결 방법
- Vue, TypeScript 기반 컴포넌트 구조로 재구성
- 기능별 컴포넌트 분리와 상수 정리로 상태·역할 분리
- Jest와 Vuex 단위 테스트 중심의 TDD 적용, axios 모킹과 컴포넌트 테스트 병행
성능/운영 포인트
- SPA 환경에 맞는 재사용 가능한 사내 라이브러리로 배포
- Vue-cli 번들링 과정의 cache-loader, CSS 추출, 이미지 용량 이슈를 webpack 설정 조정으로 대응
- 서브도메인에서 공통 댓글 모듈을 컴포넌트처럼 불러다 쓰는 구조 마련