react-native-architecture
React Native 아키텍처 빠르게 설계하기
복잡한 React Native 앱은 확장성과 유지보수가 어려워질 수 있습니다. 이 스킬은 탐색, 오프라인 동기화, 네이티브 모듈을 갖춘 프로덕션 앱 구축을 위한 검증된 Expo 아키텍처 패턴과 코드 예제를 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"react-native-architecture" 사용 중입니다. 인증과 탭이 포함된 Expo Router 구조 개요
예상 결과:
- (auth)와 (tabs) 폴더로 라우트 그룹화
- 공유 프로바이더를 설정하는 루트 레이아웃 사용
- 미인증 사용자를 로그인으로 리다이렉트
- 일관된 아이콘으로 탭 화면 정의
"react-native-architecture" 사용 중입니다. 오프라인 데이터 유지 방법 보여줘
예상 결과:
- AsyncStorage 지속성과 함께 React Query 사용
- 캐싱을 위한 staleTime과 gcTime 설정
- 더 나은 UX를 위해 낙관적 업데이트 구현
- 연결이 복구되면 데이터 동기화
"react-native-architecture" 사용 중입니다. 어떤 네이티브 모듈을 사용해야 해
예상 결과:
- 안전한 토큰 저장을 위한 expo-secure-store
- 촉각적 피드백을 위한 expo-haptics
- 생체 인식을 위한 expo-local-authentication
- 푸시 알림을 위한 expo-notifications
보안 감사
안전This is a documentation-only skill containing architectural patterns and example code. Static analyzer flagged documentation keywords as security issues, but all findings are false positives. No executable code, file access, or network requests exist. The skill contains only markdown documentation with TypeScript/JavaScript examples for React Native development.
위험 요인
🌐 네트워크 접근 (6)
⚙️ 외부 명령어 (22)
품질 점수
만들 수 있는 것
앱 구조 계획
새로운 React Native 앱의 폴더 레이아웃, 라우팅 그룹, 프로바이더를 정의합니다.
오프라인 동기화 추가
오프라인 사용을 위해 React Query 지속성과 낙관적 업데이트 패턴을 선택합니다.
성능 개선
대규모 데이터셋을 위한 리스트 렌더링 및 메모이제이션 전략을 선택합니다.
이 프롬프트를 사용해 보세요
탭과 인증이 포함된 React Native 프로젝트 구조와 Expo Router 레이아웃을 제안해줘.
라우트 보호와 안전한 토큰 저장소가 포함된 AuthProvider 패턴을 제공해줘.
React Query를 사용한 오프라인 캐싱, 낙관적 업데이트, 무효화를 설명해줘.
Expo에서 haptic, 생체 인식, 푸시 알림을 위한 베스트 프랙티스를 알려줘.
모범 사례
- Expo Router 그룹을 사용하여 탐색 흐름 구성
- 오프라인 접근과 빠른 시작을 위해 쿼리 지속
- 실제 장치에서 플랫폼 동작 테스트
피하기
- 소스 코드에 직접 시크릿 저장
- 렌더 함수 내에서 데이터 가져오기
- iOS와 Android UI 차이 무시