프론트엔드
Next.js 프로젝트 Migration과 Refactoring 과정을 공유합니다.
두줄요약
Next.js v9 기반 레거시 프로젝트를 v12로 마이그레이션하고, SWC와 import 최적화로 성능을 개선했습니다. 또한 Moment.js를 Day.js로 교체하며 번들 크기를 줄이고 리팩터링 안정성을 높였습니다.
문제 상황
- Next.js v9와 지원이 중단된 라이브러리로 구성된 레거시 프로젝트
- 기능 추가는 가능하지만 버전 정체와 deprecated 패키지 누적, 코드 가독성 저하가 함께 존재
- 번들 크기와 빌드 속도 개선 여지가 있는 상태
해결 방법
- Next.js를 v12로 올리고 React를 v17로 조정해 점진적 마이그레이션 진행
- Babel을 제거하고 SWC를 도입해 빌드 및 새로고침 속도 개선
modularizeImports로 lodash import를 최적화하고, Moment.js를 Day.js로 교체해 번들 크기 절감
주의할 점
- Day.js는 Immutable 특성이라 Moment.js와 동일한 사용 방식에 주의 필요
- React 18보다 17을 선택해 아직 완전 지원되지 않는 라이브러리 가능성 고려
- 테스트 코드가 있는 영역 위주로 리팩터링하면 수정 안정성 확보
