react-native-architecture
프로덕션 준비된 React Native 앱 구축
또한 다음에서 사용할 수 있습니다: wshobson
Expo, 네이티브 모듈, 오프라인 우선 동기화를 사용하여 React Native 앱을 설계합니다. 이 스킬은 크로스 플랫폼 모바일 애플리케이션 구축을 위한 프로덕션 준비된 패턴을 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"react-native-architecture" 사용 중입니다. 인증 제공자와 경로 보호 생성
예상 결과:
AuthContext using SecureStore for token, useAuth hook, route guards checking segments, redirect to login when unauthenticated
"react-native-architecture" 사용 중입니다. 오프라인 우선 React Query 설정
예상 결과:
QueryProvider with AsyncStorage persister, networkMode: offlineFirst, gcTime: 24 hours, staleTime: 5 minutes
"react-native-architecture" 사용 중입니다. iOS용 EAS 빌드 구성
예상 결과:
eas.json with development, preview, and production profiles. Development uses simulator, preview uses internal distribution, production enables autoIncrement
보안 감사
안전Security audit complete. Static findings are false positives triggered by documentation examples containing terminal commands (npx, eas), documentation URLs (official Expo/React Native sites), and example configuration paths. No actual code execution, network requests to external domains, or real credentials present. Skill is a legitimate React Native architecture guide with safe-to-use code patterns.
위험 요인
품질 점수
만들 수 있는 것
새 모바일 프로젝트 시작
업계 모범 사례를 따라 적절한 아키텍처, TypeScript, 내비게이션 설정이 포함된 새 Expo 프로젝트를 초기화합니다.
인증 흐름 구현
SecureStore를 통한 토큰 저장, 경로 가드, 보호된 내비게이션 경로가 포함된 안전한 인증을 추가합니다.
오프라인 우선 데이터 레이어 추가
React Query, AsyncStorage 동기화, 낙관적 UI 업데이트를 사용한 영구 데이터 캐싱을 구현합니다.
이 프롬프트를 사용해 보세요
Create a new Expo project with TypeScript. Set up the folder structure with app/, components/, hooks/, services/, stores/, and types/ directories. Include Expo Router with auth and tabs groups.
Implement authentication flow in the React Native app using SecureStore for token storage. Create auth context with signIn, signOut, and user state. Add route guards to protect tabs from unauthenticated access.
Set up React Query with AsyncStorage persister for offline-first data. Include network status detection with NetInfo and configure stale times and retry logic for production use.
Add biometric authentication using expo-local-authentication, push notifications with expo-notifications, and haptic feedback with expo-haptics. Create a clean service abstraction for each.
모범 사례
- 인증 및 탭 분리를 위해 그룹과 함께 Expo Router 파일 기반 라우팅 사용
- 60fps 유지를 위해 컴포넌트 메모화 및 긴 목록에 FlashList 사용
- 토큰 및 민감한 데이터는 SecureStore에 저장하고 AsyncStorage에는 절대 저장하지 않음
피하기
- SecureStore 대신 일반 AsyncStorage에 토큰 또는 시크릿 저장
- 성능을 위한 StyleSheet.create 대신 인라인 스타일 사용
- useEffect 또는 React Query 없이 컴포넌트 렌더링에서 직접 데이터 가져오기
자주 묻는 질문
Expo와 베어 React Native의 차이점은 무엇인가요?
React Native CLI로 이 스킬을 사용할 수 있나요?
React Native에서 오프라인 모드를 어떻게 처리하나요?
Expo Router란 무엇인가요?
인증 토큰을 안전하게 저장하려면 어떻게 해야 하나요?
EAS란 무엇인가요?
개발자 세부 정보
작성자
sickn33라이선스
MIT
리포지토리
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-native-architecture참조
main
파일 구조