AI 요약
이 기사는 업무 공백기를 활용해 3년 된 회사 프로젝트를 홀로 리팩터링한 프론트엔드 개발자의 실전 경험담입니다. 기존 프로젝트는 4명의 개발자를 거치며 스타일이 일관되지 않고 TypeScript나 규격화된 컴포넌트도 없던 50여 페이지 규모의 Vue 2 기반 백오피스 시스템이었습니다. 저자는 3주의 주말(금요일 밤과 토요일 전체)을 투자하여 이를 Vue 3, TS, Vite, Pinia 조합으로 성공적으로 업그레이드했습니다. 1주 차에는 구조를 잡고 API 및 라우터를 마이그레이션했고, 2주 차에는 TS 도입 및 타입 오류 해결에 집중했으며, 3주 차에는 ESLint, Prettier, Husky 도입 및 컴포넌트 자동 임포트 등 최적화된 엔지니어링 환경을 구축했습니다. 리팩터링 이후 IDE의 자동 완성 기능이 원활히 작동하는 등 개발 환경이 크게 개선되었으며, 옆 부서 팀장이 검증된 설정 코드를 그대로 복사해 갈 정도로 큰 호응을 얻었습니다. 저자는 프론트엔드 엔지니어링의 진정한 가치가 최신 기술 도입 자체보다는 '실제 작동 가능하며 개발 능력이 낮은 팀원도 실수 없이 협업할 수 있는 지속 가능한 환경을 만드는 것'에 있다고 강조합니다.
핵심 인사이트
- 레거시 프로젝트의 현대화: 3년 동안 4명의 프론트엔드 개발자를 거치며 일관성 없이 방치되었던 50여 페이지의 Vue 2 백오피스 프로젝트를 최신 Vue 3 + TS + Vite 기반 스택으로 전환했습니다.
- 3단계 주차별 실행 전략: 3주의 주말 동안 1주 차 '동작 확보', 2주 차 'TypeScript 기반 안정화', 3주 차 '엔지니어링 환경 최적화'로 단계를 나누어 빠르고 정교하게 리팩터링을 진행했습니다.
- 실용적 엔지니어링의 가치: 가장 수준이 낮은 개발자도 실수 없이 협업할 수 있는 안전장치(ESLint, TS, 자동화 도구)를 마련해 프로젝트가 지속해서 관리되도록 유도했습니다.
주요 디테일
- 마이그레이션 도구의 한계: '@vue/cli' 마이그레이션 도구로는 전체 이슈의 약 30%만 해결할 수 있었으며, Options API를 Composition API로 전환하는 작업 등은 수작업으로 안전하게 전환했습니다.
- 주요 변경 사항 대응: Vue Router 3에서 4로 넘어가며 'router.addRoutes'가 폐기되어 'router.addRoute'로 대체되었으며, Vue 3에서 'v-model'의 '.sync' 수식어 제거에 따른 바인딩 누락 오류를 수동으로 해결했습니다.
- TypeScript 트러블슈팅: 'ref(null)'이 'Ref<null>'로 추론되는 문제를 'ref<User | null>(null)' 형태로 명시했고, 타입 정의가 없는 구형 라이브러리 지원을 위해 자체적으로 'shims-custom.d.ts' 파일을 생성해 대응했습니다.
- 패키지 핵심 의존성 버전: 최신 버전 명세는 'vue' ^3.4.0, 'vite' ^5.0.0, 'typescript' ^5.3.0, 'pinia' ^2.1.0, 'vue-router' ^4.2.0을 기준으로 삼아 최적화했습니다.
- 엔지니어링 편의 도구 도입: 'unplugin-vue-components'를 적용해 컴포넌트 자동 임포트를 구현했고, 코드 스타일 통일을 위한 ESLint와 환경 변수 분리를 위한 '.env' 파일 설정을 정비했습니다.
향후 전망
- 사내 타 부서 마이그레이션 촉진: 실제로 빌드 및 동작이 확인된 리팩터링 설정 파일이 이웃 부서에 공유됨에 따라, 사내 Vue 3 전환 작업이 한층 신속하게 이루어질 것으로 전망됩니다.
- 장기적인 유지보수 비용 절감: ESLint, Prettier, Husky 및 강력한 타입 검증이 강제화되면서 무분별한 오류 발생이 원천 차단되고, 프로젝트 유지보수와 신규 팀원 온보딩 비용이 대폭 감소할 것입니다.
출처:juejin