방법 가이드
이 디렉터리에는 일반적인 TanStack Router 작업을 위한 단계별 집중 안내가 있습니다. 각 가이드는 다음을 목표로 합니다.
- 작업 중심: 하나의 구체적인 목표를 처음부터 끝까지 다룹니다.
- 독립 실행 가능: 필요한 모든 단계를 포함하며 사전 지식을 가정하지 않습니다.
- 복사 및 붙여넣기 가능: 즉시 사용할 수 있는 작동하는 코드 예제를 제공합니다.
- 문제 해결 중심: 실제 시나리오와 일반적인 문제를 다룹니다.
제공되는 가이드
- TanStack Router 설치 - 기본 설치 단계
- 환경 변수 사용 - 여러 번들러에서 환경 변수 구성 및 사용
- 프로덕션 배포 - 호스팅 플랫폼에 앱 배포
- 서버 측 렌더링(SSR) 설정 - TanStack Router로 SSR 구현
- React Router v7에서 마이그레이션 - React Router v7에서의 전체 마이그레이션 가이드
인증
- 기본 인증 설정 - React Context로 기본 인증 구현
- 인증 프로바이더 통합 - Auth0, Clerk 또는 Supabase 사용
- 역할 기반 액세스 제어 설정 - 권한 기반 라우팅 추가
테스트 및 디버깅
- 코드 기반 라우팅으로 테스트 설정 - 수동으로 정의한 라우트를 위한 종합 테스트 설정
- 파일 기반 라우팅 테스트 - 파일 기반 라우팅 애플리케이션 테스트를 위한 구체적인 패턴
- 라우터 문제 디버깅 - 일반적인 라우팅 문제와 성능 문제 해결
UI 라이브러리 통합
- Shadcn/ui와 통합 - 애니메이션과 스타일이 적용된 Shadcn/ui 컴포넌트 설정
- Material-UI(MUI)와 통합 - 올바른 테마와 TypeScript로 MUI 컴포넌트 구성
- Framer Motion과 통합 - 라우트에 자연스러운 애니메이션과 전환 추가
- Chakra UI와 통합 - Chakra UI 컴포넌트로 반응형·접근 가능한 UI 구축
검색 매개변수 및 URL 상태(단계별 시리즈)
기초 단계(여기서 시작):
- 기본 검색 매개변수 설정 - 타입 안전한 검색 검증 및 읽기 생성
- 검색 매개변수로 탐색 - Link와 탐색으로 검색 매개변수 업데이트 및 관리
중급 단계(일반적인 패턴):
- 스키마로 검색 매개변수 검증 - 강력한 검증과 타입 안전성을 위해 스키마 검증 라이브러리 사용
- 배열, 객체 및 날짜 사용 - 배열, 객체, 날짜 및 중첩 데이터 구조 처리
- 라우트 간 검색 매개변수 공유 - 라우트 계층 간 검색 매개변수 상속 및 관리
고급 단계(고급 사용자 패턴):
- 고급 검색 매개변수 미들웨어 구축 - 검색 매개변수 처리를 위한 사용자 지정 미들웨어 생성
- 검색 매개변수 성능 최적화 - 셀렉터로 재렌더링을 최소화하고 성능 개선
- 검색 매개변수 직렬화 맞춤 설정 - 압축과 호환성을 위한 사용자 지정 직렬화 구현
특수 사용 사례:
- 검색 기반 필터링 시스템 구축 - URL 상태로 복잡한 필터링 UI 생성
- 폼에서 검색 매개변수 처리 - 폼 상태를 URL 검색 매개변수와 동기화
- 검색 매개변수 문제 디버깅 - 일반적인 검색 매개변수 문제와 성능 문제 해결
- 데이터 로딩과 함께 검색 매개변수 사용 - 로더 및 데이터 가져오기와 검색 매개변수 통합
가이드 사용
각 가이드는 일관된 구조를 따릅니다.
- 빠른 시작 - 수행할 작업에 대한 간략한 개요
- 단계별 안내 - 플랫폼 또는 시나리오별 지침
- 프로덕션 체크리스트 - 확인 단계(해당하는 경우)
- 일반적인 문제 - 일반적인 문제의 해결 방법
- 일반적인 다음 단계 - 진행할 수 있는 관련 선택적 작업
기여
새 방법 가이드를 추가할 때는 다음을 따릅니다.
- 하나의 명확하게 정의된 작업에 집중합니다.
- 명확한 제목과 번호가 매겨진 단계를 사용합니다.
- 완전하게 작동하는 코드 예제를 포함합니다.
- 마지막에 가장 자주 발생하는 문제를 다룹니다.
- 해당 가이드가 만들어질 때까지 "일반적인 다음 단계" 링크를 주석 처리합니다.
- "관련 리소스"에는 일반적인 문서가 아닌 구체적으로 관련된 리소스를 연결합니다.