마이그레이션 가이드

app/ 디렉터리를 pages/와 공존시키며 라우트 단위로 점진 이전하는 것이 정석입니다. getServerSideProps는 서버 컴포넌트의 직접 fetch로, _app/_document는 layout으로 바뀝니다.

this.state는 useState로, 생명주기 메서드는 useEffect로, 인스턴스 변수·ref는 useRef로 옮깁니다. 컴포넌트 단위로 점진 전환할 수 있습니다.

react-scripts를 Vite로 교체하면 dev 서버 기동·HMR이 수 배 빨라집니다. index.html 위치와 환경변수 접두사(REACT_APP_ → VITE_)만 주의하면 대부분 그대로 동작합니다.

webpack의 entry·loader·plugin 개념을 Vite의 진입 index.html·내장 변환·플러그인으로 옮깁니다. 대부분의 흔한 loader는 Vite가 기본 지원합니다.

allowJs로 JS·TS를 공존시키고 파일을 하나씩 .ts/.tsx로 바꾸며 타입을 입히는 점진 전략이 안전합니다. strict는 마지막에 켭니다.

Day.js는 Moment와 거의 동일한 API에 번들 크기는 약 2KB로, import만 바꾸면 대부분 그대로 동작합니다. timezone·duration 등은 플러그인을 추가합니다.

Zustand는 보일러플레이트 없이 훅으로 상태를 읽고 쓰는 경량 스토어입니다. Redux의 action/reducer/dispatch 구조를 단일 store 함수로 대폭 줄일 수 있습니다.

최신 Node·브라우저는 fetch를 내장하므로 axios 의존성을 빼고 얇은 래퍼로 대체할 수 있습니다. 자동 JSON 파싱·에러 처리·인터셉터는 직접 구현하거나 래퍼로 흡수합니다.

CSS-in-JS 런타임을 빼고 유틸리티 클래스로 스타일링해 런타임 비용·SSR 복잡도를 줄입니다. 공존시키며 컴포넌트 단위로 점진 전환하는 것이 안전합니다.

Fastify는 Express와 유사한 라우팅에 더 빠른 처리량과 스키마 기반 검증·직렬화를 제공합니다. req/res가 request/reply로 바뀌고 미들웨어는 플러그인·훅으로 전환됩니다.

Enzyme의 구현 세부(shallow·state 접근) 중심 테스트를 사용자 관점(역할·텍스트로 찾고 상호작용)으로 다시 씁니다. React 18+는 Enzyme이 사실상 미지원이라 전환이 불가피합니다.

Vitest는 Jest와 거의 호환되는 API에 Vite 기반의 빠른 실행을 제공합니다. Vite 프로젝트라면 설정을 공유해 transform 중복이 사라집니다.

pnpm import로 기존 lock을 변환한 뒤 node_modules를 재설치하면 디스크 절약과 설치 속도 향상을 얻습니다. CI와 모노레포에서 특히 유리합니다.

Biome는 린터와 포매터를 하나의 빠른 도구(Rust 기반)로 통합합니다. ESLint+Prettier 두 설정·플러그인 충돌을 없애고 실행 속도를 크게 높입니다.