Refactoring Legacy React Codebases (레거시 React 코드 리팩토링)

📌 한 줄 통찰 (The Karpathy Summary)

"코드를 한꺼번에 뒤엎으려는 유혹을 뿌리치고, 정상 작동하는 기능을 보호하며 점진적으로 현대적인 패턴(Hooks, TS, Modularity)으로 이식하여 시스템의 부패를 멈춰라" — 기술 부채를 자산으로 전환하는 전략적 코드 현대화 프로세스.

추출된 패턴: "Incremental Modernization and Safe Extraction" — 대규모 변경 대신, 컴포넌트 하나씩 또는 로직 한 단위씩을 추출하여 최신 React 패턴으로 교체하고 테스트로 검증하는 패턴.
리팩토링 핵심 단계:
- Identify Technical Debt: 거대 컴포넌트(God Components), 복잡한 클래스 생명주기 로직, 타입 정의 부재 식별.
- Establish Safety Net: 변경 전 기존 동작을 검증할 수 있는 단위/통합 테스트 코드 확보.
- Logic Extraction (Hooks): 클래스 컴포넌트의 복잡한 로직을 커스텀 훅으로 추출하여 기능과 UI 분리.
- Incremental TypeScript Adoption: 가장 핵심적인 데이터 모델부터 점진적으로 타입을 적용.
- Component Decomposition: 거대 컴포넌트를 작고 명확한 책임을 가진 하위 컴포넌트로 분해.
의의: 서비스 중단 없이 코드의 유지보수성을 향상시키고, 최신 에코시스템(Next.js, Server Components 등)으로의 마이그레이션 기반을 마련함.

과거 데이터와의 충돌: 과거에는 '빅뱅 방식(전체 재작성)'이 효율적이라고 생각하기도 했으나, 현대 정책은 리스크 관리 차원에서 '점진적 리팩토링 정책'을 압도적으로 선호함.
정책 변화: Antigravity 프로젝트는 모든 신규 기능 개발 시 관련 레거시 코드의 10% 리팩토링을 병행하는 'Boy Scout Rule' 정책을 시행하며, 리팩토링 시 테스트 커버리지 유지를 의무화함.

Clean-Code-Principles, Custom-Hooks-Patterns, Technical-Debt-Management, Frontend-Architecture-and-Folder-Structure]]
Raw Source: 00_Raw/Legacy React Code Refactoring.md, 00_Raw/Refactoring Legacy React Codebases.md