더핑크퐁컴퍼니 기술 블로그 - Medium · 2022. 09. 15.
Next.js 프로젝트 Migration과 Refactoring 과정을 공유합니다.
AI 엔지니어링 브리핑
지원이 끊긴 Next.js 9와 오래된 라이브러리로 구성된 사내 프로젝트를 최신 버전으로 옮기고, 번들 분석과 컴파일러 교체를 통해 유지보수성과 개발 속도를 개선한 과정을 소개합니다.
문제 & 배경
문제 & 배경: 간단한 기능은 빠르게 추가할 수 있었지만 Next.js 9와 지원이 중단된 패키지들이 남아 있어, 오래된 코드를 건드리기 어려운 레거시 프로젝트가 되었습니다.
기술 & 해결책
기술 & 해결책: 사내 서비스라 문제를 빠르게 공유할 수 있다는 점을 바탕으로 번들 크기를 확인하는 분석 도구를 도입하고, Next.js를 12로 React를 17로 올린 뒤 불필요한 React import를 제거하고 Babel 대신 Rust 기반 SWC를 사용했습니다.
교훈 & 주의점
교훈 & 주의점: 리팩터링 전 번들 크기를 시각적으로 확인하면 줄일 부분을 찾기 쉽고, 버전 업그레이드는 모든 라이브러리의 지원 여부와 서비스 영향 범위를 고려해 단계적으로 진행해야 합니다.
함께 읽을 글
내용이 비슷해요내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.