AI 요약관련 정보

• TanStack Router는 Spring Boot와 함께 React 프론트엔드를 구성할 때 Next.js의 대안으로 매우 유용하며, 개인적으로 높은 만족도를 제공합니다. ✨
• React 18 이상 환경에서 Vite를 사용하여 쉽게 설치할 수 있으며, @tanstack/react-router, @tanstack/router-plugin, @tanstack/react-router-devtools 등의 핵심 패키지를 포함합니다. 🚀
• vite.config.ts에 tanstackRouterVite() 플러그인을 추가하고, autoCodeSplitting: true 옵션을 설정하여 빌드 시 코드 분할을 자동으로 처리해 성능을 최적화할 수 있습니다. ⚙️
• 파일 기반 라우팅을 강력히 권장하며, src/routes 폴더 내 파일명과 폴더 구조가 URL 경로에 직접 매핑되어 직관적인 라우팅을 가능하게 합니다. 📁
• routeTree.gen.ts 파일은 라우터에 의해 자동으로 생성되며, 수동으로 수정해서는 안 됩니다. VS Code 설정으로 이 파일이 자동으로 열리는 것을 방지할 수 있습니다. 🌳
• __root.tsx 파일은 createRootRoute()를 사용하여 최상위 루트 라우트를 정의하고, 다른 라우트 파일들은 createFileRoute()를 사용하여 경로를 정의합니다. 🛣️
• 파일 기반 라우팅의 핵심 장점은 타입 안정성으로, 존재하지 않는 URL 경로에 대한 Link 컴포넌트 사용 시 타입 에러를 발생시켜 개발 오류를 줄여줍니다. 🛡️
• 라우트 파일명 변경 시 URL 경로 및 routeTree.gen.ts가 자동으로 업데이트되어 개발 편의성을 크게 향상시킵니다. 🔄
• _ (언더바)로 시작하는 파일이나 폴더는 라우팅 경로 생성에서 제외되어 특정 컴포넌트나 그룹 디렉토리를 유연하게 관리할 수 있습니다. 🚫
• component, notFoundComponent, pendingComponent, errorComponent 등은 코드 스플리팅의 대상이 되어 애플리케이션 로딩 성능을 개선합니다. ⚡
• 동일한 TanStack 생태계 내의 TanStack Query (React Query)와 원활하게 통합되며, Suspense를 지원하여 데이터 페칭 및 UI 렌더링을 효율적으로 관리할 수 있습니다. 🤝
• 개발자 도구(@tanstack/react-router-devtools)를 통해 라우트 구조와 현재 경로를 시각적으로 확인하며 디버깅할 수 있습니다. 🛠️