동기

이 프로젝트는 약 6년간 운영된 서비스로, 처음에는 MVP(최소 기능 제품)로 시작되어 큰 성공을 예상하지 못했지만 시간이 지나면서 많은 기술 부채가 쌓여 불편함을 초래했습니다. 이런 상황에서 새로운 기능 추가와 함께, 장기적으로 서비스를 유지하고 개선하기 위한 필요성을 느꼈습니다.

서비스 신뢰성을 유지하는 동시에 급격한 개선이 어려운 상황에서, 지속 가능한 점진적 개선 전략을 수립했습니다. 이를 통해 개발 환경을 최적화하고, 기능 개발과 성능 개선을 균형 있게 이루기 위한 논의를 지속해왔습니다.

개선 내용

1. CRA에서 Vite로 전환

CRA → Vite

• 전환 이유: 기존 Create React App(CRA) 기반의 프로젝트는 빌드 속도가 느리고, 최신 Node.js 버전과 호환성이 떨어지는 등의 문제를 가지고 있었습니다. 이러한 문제들을 해결하고, 개발자의 경험을 개선하기 위해 Vite로의 전환을 시도했습니다.
• 전환 결과: Vite로의 전환을 통해 빌드 속도와 개발 환경 서버 성능이 향상되었습니다. 또한 최신 Node.js 버전을 도입함으로써 보안상 이점과 추후 monorepo 도입을 수월하게 진행할 수 있는 기반이 되었습니다. 전환 과정에서 직면했던 도전과 해결 방법에 대해서는 위의 링크에서 상세하게 다루고 있습니다.

2. UI 컴포넌트 리팩토링

UI 컴포넌트 리팩토링 과정

• 기존 문제: 기존의 UI 컴포넌트는 MUI(Material-UI)를 기반으로 한 커스텀 컴포넌트들로 구성되어 있었으나, 단순히 import와 export되는 중복 코드가 많았습니다. 이는 유지보수에 비효율을 초래하고, 추후 디자인 시스템 변경 시 마이그레이션 과정에서 처리해야 할 케이스가 늘어나게 되는 문제를 야기했습니다.
• 리팩토링 방안: 해당 중복 코드를 미리 제거하여 디자인 시스템 변경 시의 복잡성을 줄이는 방향으로 리팩토링을 진행했습니다. 이를 통해 코드 가독성 향상뿐만 아니라, 성능 측면에서도 사소하지만 긍정적인 개선 효과를 기대할 수 있었습니다.