5. 업그레이드 전략(메이저 점프 체크리스트)

Tech Note — React 5. 업그레이드 전략

Tech NoteReact5화 · 2025-12

목차

1. 원칙: “React만” 올리는 일이 거의 없다
2. 우선순위: Node → 빌드툴(Vite) → Router → React
3. 메이저 점프 체크리스트
4. 업그레이드 플로우(현실적인 절차)
5. References

0) 원칙: “React만” 올리는 일이 거의 없다

실무에선 React, React DOM, Router, 빌드툴(Vite), TypeScript, ESLint, Node 버전이 함께 움직인다. 따라서 업그레이드는 “스택 전체 호환성” 관점으로 잡는 게 안전하다.

1) 우선순위: Node → 빌드툴(Vite) → Router → React

• Node: LTS 라인을 쓰고, Vite 요구 버전을 만족하는지 먼저 확인
• Vite: Node 지원 범위/ESM 정책 변화가 크므로 공지 확인
• Router: 데이터 라우터/loader 등 기능 변화가 있을 수 있음
• React: 앱 코드 영향(Deprecated/StrictMode 경고 등) 확인

2) 메이저 점프 체크리스트

• CI에서 클린 빌드(캐시 없이) 통과하는지
• 권한/라우팅(/me, guard, 메뉴 필터)이 깨지지 않는지
• 에러바운더리/모니터링(Sentry 등)이 정상 수집되는지
• 번들 크기/초기 로딩(코드 스플리팅) 변화 확인
• 브라우저 캐시/배포 캐시 정책 영향 확인

3) 업그레이드 플로우(현실적인 절차)

1. 업그레이드 브랜치 생성
2. Node 버전 고정(팀 표준) → Vite 요구사항 만족 확인
3. Vite/TS/ESLint 등 개발 도구 업그레이드
4. Router 업그레이드(라우팅/loader 변경 영향 점검)
5. React 업그레이드 + 경고/에러 정리(StrictMode 기반)
6. 스테이징 배포 후 실사용 시나리오 점검(로그/모니터링 포함)

References

• Vite 공식 가이드 — Node 요구사항 포함
• Vite 7 공지 — Node 지원 범위
• Node.js Release WG — LTS 정책
• React Router 공식 문서
• React: StrictMode

다음 글: Tech Note — React 6. 로그/모니터링(Sentry/OTel/Request-ID)