프로젝트 초기에는 UI 관리가 제대로 이루어지지 않았습니다. 디자인 팀 또한 색상이나 컴포넌트를 일관성 없이 사용하였고, 이러한 비일관성이 개발 환경에서도 UI 컴포넌트 설계를 어렵게 만드는 원인이 되었습니다. 이를 해결하기 위해 디자인 팀과 협력하여 색상 및 타이포그래피부터 시작으로 디자인 요소를 점진적으로 정리하고 일관된 디자인 시스템을 구축하기로 합의했습니다.
개발 환경 측면에서는 UI 관리가 용이해질 수 있도록 디자인 킷을 만들기로 결정하였습니다. 이를 기반으로 몇 가지 개선 사항을 논의했습니다:
Turborepo를 적용하여 monorepo 전환을 시도하였지만, 서비스가 Node.js 16 이하 버전에 종속되어 있어 Node.js 18 이상을 요구하는 Turborepo 적용이 곧바로 이루어질 수 없었습니다. 또한, monorepo 전환의 구체적인 이점이 명확하지 않다는 의견이 있어 이 작업은 보류되었습니다. 물론 turborepo 이외에도 monorepo를 관리하는 방법과 툴은 많았지만 결국 구버전에 종속되어 있는 현재 프로젝트 구조는 언젠가 발목을 잡을거라 생각했습니다.
기존 서비스는 Create React App(CRA) 기반으로 운영되고 있었습니다. 그러나 CRA의 버전을 올리는 과정에서 종속성 문제와 다수의 breaking changes로 인해 기존 환경을 유지하기가 어려웠습니다. 이러한 문제를 해결하고자 Vite로의 전환을 논의했습니다.
논의 끝에 위와 같은 이점을 바탕으로 Vite 전환을 진행하기로 결정하였습니다.
JS → JSX 변환
tiny-glob을 사용하여 모든 .js 파일을 찾고, JSX 패턴이 포함된 파일의 확장자를 .jsx로 변경하는 매크로를 제작하였습니다.
SVGR 사용법 변경
Vite의 SVGR plugin 사용 시 import 구문이 CRA와 달라졌기 때문에, vscode의 정규식 replace 기능을 사용하여 수정하였습니다.
환경 변수 수정
기존 REACT_APP 접두사를 VITE_로 변경하기 위해 아래와 같은 bash 스크립트를 사용하여 .env 파일을 수정했습니다.
Jest → Vitest 전환
테스트 프레임워크를 Jest에서 Vitest로 전환하였습니다. 대부분의 API는 유사했지만, fakeTimer의 동작이 달라 수정에 어려움이 있었습니다. 이를 이벤트 루프 와 연관지어 문제를 해결하였습니다.