JSCodeShift로 기술 부채 청산하기

100개가 넘는 서비스가 공통 라이브러리를 사용하는 환경에서 인터페이스가 바뀔 때마다 코드를 수작업으로 고치는 부담과 찾아 바꾸기의 한계를 해결하기 위해, 토스 프론트엔드 챕터는 Facebook의 JSCodeShift를 도입했습니다. JSCodeShift는 Babel AST에서 수정할 노드를 찾아 제거하거나 치환하고, 변경된 코드를 다시 출력해 변수 별칭이나 복잡한 import 구조도 문맥에 맞게 처리합니다. 글에서는 레거시 import를 새 라이브러리의 import로 바꾸는 변환 사례와 함께 노드 선택·수정 방법, testUtils와 Jest를 이용한 테스트를 소개합니다. AST 기반 자동화와 테스트를 활용하면 오래된 대규모 코드베이스도 최신 라이브러리와 컨벤션에 맞춰 일관되게 정비할 수 있다는 점을 보여줍니다.

• 문자열 치환은 문맥과 별칭을 고려하지 못하므로, 코드 구조를 다루는 AST 기반 변환이 더 안전하다.
• JSCodeShift 변환은 파싱, 대상 노드 선택, 수정, 소스 코드 출력의 단계로 구성한다.
• import를 변경할 때는 특정 항목만 제거하고, 남은 항목이 없을 때만 import 문 전체를 삭제해야 한다.
• 변환 규칙은 여러 파일에 적용하기 전에 testUtils와 Jest로 테스트해 예외 상황을 확인한다.