문서

JSCodeShift로 기술 부채 청산하기

박지우 토스 · 토스 기술 블로그

AI 핵심 요약

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

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

소개

기술 부채는 개발할수록 쌓여만 갑니다. 프론트엔드 챕터가 JSCodeShift를 이용하여 순식간에 100개 서비스의 기술 부채를 해결한 경험을 소개합니다.

비슷한 학습 자료

컨퍼런스 SLASH

토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code

컨퍼런스 SLASH

실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집도 2. 단일 책임 3. 추상화 총 세 가지 관점으로 클린코드 방법론을 공유합니다. 진유림 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH

프론트엔드

문서 박서진/이다용

es-toolkit, 사내 작은 라이브러리가 전세계적인 라이브러리가 되기까지

문서 박서진/이다용

안녕하세요, 토스 Frontend Engineering Head 박서진, 토스뱅크 Frontend Developer 이다용입니다. 오늘은 토스의 작은 유틸리티 함수 라이브러리로 시작한 es-toolkit이 어떻게 일주일에 2천만 회 이상 다운로드되고, Yarn이나 Recharts 같은 핵심 라이브러리에서도 사용되었는지 그 성장한 과정을 소개해 드릴게요. [서진] es-toolkit의 시작 프론트엔드 개발자로서 throttle, debounce 나 uniq 같은 함수들이 자주 필요해요. 그런데 지금까지는 자신 있게 이러한 유틸리티 함...

프론트엔드 프로그래밍 언어