이 프로젝트는 레거시 코드베이스로, 컴포넌트 내부 구현뿐만 아니라 외부 인터페이스도 확장성이 낮고 이해하기 어려운 방식으로 작성되어 있었습니다. 또한, JavaScript로 작성된 컴포넌트도 상당수 섞여 있어 타입 자동 완성이 불가능했기 때문에 개발자 경험이 좋지 않았습니다. 이러한 문제들을 해결하고 코드의 유지보수성과 확장성을 높이기 위해 JS → TS 변환과 불필요한 랩핑 컴포넌트 정리 작업을 진행했습니다.
첫 번째 작업으로, 기존 JavaScript로 작성된 컴포넌트들을 TypeScript로 변환했습니다. 변환 작업은 두 가지 주요 단계를 반복하는 방식으로 진행되었습니다:
해당 작업은 비교적 단순하게 진행할 수 있었으나, JS에서 TS로의 전환 대상 코드가 많았습니다. 커버해야 할 예외적인 케이스들이 다양하여 자동화보다는 수작업이 더 효율적이라고 판단하여, 수작업으로 타입을 명시하고 인터페이스를 정의하는 작업을 완료했습니다.
코드베이스에는 단순히 import 및 export되는 랩핑 컴포넌트들이 많이 존재했습니다. 이는 추후 새로운 디자인 컴포넌트나 라이브러리 적용 시 큰 마이그레이션 없이 인터페이스만 맞추면 재사용할 수 있도록 설계된 것이었지만, 현재 사용 중인 인터페이스가 확장성이 낮고 낙후된 상태였습니다.
따라서 미래의 개선 작업에서 해당 컴포넌트를 어차피 제거하게 될 가능성이 크다고 판단하여, 미리 삭제하는 작업을 진행했습니다. 또한, 직접적으로 MUI에서 가져와 사용하는 코드와 랩핑된 컴포넌트를 사용하는 코드가 혼재되어 있어, 향후 마이그레이션 시 커버해야 할 케이스를 줄이기 위해 해당 작업을 결정했습니다.
다음은 MUI 컴포넌트를 직접 사용하도록 변환하는 Codemod 코드입니다:
Codemod 스크립트를 통해 300개 이상의 파일과 10,000줄 이상의 코드에서 불필요한 랩핑 컴포넌트를 제거하고, MUI 컴포넌트를 직접 사용하도록 마이그레이션했습니다. 이를 통해 코드의 유지보수성과 확장성을 크게 향상시킬 수 있었습니다.