expo-overview — Expo / EAS 라우터 및 공유 규칙
시작하기 — 작업 전에 반드시 읽으세요
프로젝트 파일만으로 스킬을 추측하지 마세요. 많은 Expo 목표가 파일 시스템에서 비슷해 보이지만 다른 스킬이 필요합니다.
- 이 작업이 Expo 또는 EAS 관련 작업인지 확인 — 요청에서 Expo 또는 EAS를 언급하거나
package.json에expo의존성이 있어야 합니다. 그렇지 않으면 이 스킬이 적용되지 않습니다. EAS를 사용하여 제공되는 네이티브 앱은 Expo 런타임이 없어도 해당됩니다. - 사용자의 목표를 읽으세요 — 사용자가 일반 용어로 어떤 결과를 원하는지 파악합니다.
- 아래 스킬 맵을 사용하여 분류 — 일상적인 표현을 목표로 변환합니다.
- 모호한 경우 의도 확인 ("앱 스토어에 출시하려는 것 같습니다. 그건
eas-app-stores입니다. 맞나요?"). 그런 다음 해당 스킬의SKILL.md를 로드하고 따르세요. - 세부 스킬을 신뢰하세요 — 각 스킬은 자체 감지 로직과 단계를 가지고 있습니다. 즉흥적으로 진행하지 마세요.
스킬 맵 (목표별)
목표를 카테고리에 매칭한 다음 스킬로, 그리고 해당 세부 스킬의 SKILL.md를 로드하세요.
앱 빌드
expo-project-structure— 새 Expo Router 프로젝트의 폴더 레이아웃: 화면, 컴포넌트, 설정 파일 위치 (기존 앱을 재구성하지 마세요)expo-native-ui— 화면, 스타일링, 시맨틱 색상, 네이티브 컨트롤, SF Symbols, 미디어, 레이아웃expo-router— 내비게이션: 파일 기반 라우트, 탭/스택/모달/시트, 링크, 헤더expo-animation— 모션 및 제스처: Reanimated worklets, Gesture Handler, 화면 전환, 시트 및 누름 피드백, 햅틱, 기기에서 끊기는 애니메이션 수정expo-ui—@expo/ui를 통한 네이티브 UI 컴포넌트: BottomSheet, Picker, Slider, Switch, Menu, Button, FieldGroup (그룹화된 폼 섹션), List/ListItem 등 — iOS에서는 진짜 SwiftUI, Android에서는 Jetpack Compose. 유니버설 레이어는 SDK 56+가 필요하며 Expo Go에서 실행됩니다. 드롭인 대체품(@gorhom/bottom-sheet,datetimepicker, …) 및 플랫폼별 레이어도 SDK 55에 존재합니다.expo-design-system— 하나의 시각적 진실 공급원: 디자인 토큰(색상, 간격, 타이포그래피, 반경, 그림자, 모션), 재사용 가능한 컴포넌트 규칙, 드리프트 감사(하드코딩된 색상, 간격, 글꼴)expo-tailwind-setup— Tailwind / NativeWind 스타일링expo-data-fetching— 네트워크 요청, React Query / SWR, 캐싱, 오프라인, 라우트 로더expo-dom— 네이티브 내에서 웹 코드 실행 또는 웹 라이브러리 재사용expo-web-to-native— 기존 웹/React 앱을 네이티브 iOS/Android 앱으로 마이그레이션
컴포넌트 선택 규칙: UI 컴포넌트(목록 행, 바텀 시트, 피커, 슬라이더, 메뉴, 버튼, 세그먼트 컨트롤, 토글)가 필요할 때마다
expo-ui를 먼저 확인하여@expo/ui에 네이티브 대안이 있는지 확인한 후 React Native 기본 제공 또는 커뮤니티 라이브러리를 사용하세요. 네이티브@expo/ui컴포넌트는 최고의 플랫폼 적합성을 제공하며, SDK 56+에서는 커스텀 빌드 없이 Expo Go에서 실행됩니다. 목록, 상세 시트 또는 폼 컨트롤을 렌더링하는 모든 앱의 경우expo-native-ui와 함께expo-ui를 로드하세요. 한 가지 예외:@expo/uiList는 네이티브 그룹화된 행(iOS 설정 화면)을 렌더링하며, 가상화된 목록이 아닙니다 — 대규모 데이터 세트의 경우FlatList/FlashList를 사용하세요.
출시 및 운영
eas-app-stores— iOS/Android 앱 빌드 및 제출 (Expo 및 기타 React Native 프로젝트, 기존 네이티브 앱 포함), TestFlight, 버전, 스토어 메타데이터eas-hosting— 웹 번들을 EAS Hosting에 배포; Expo Router API 라우트(+api.ts핸들러) 및 해당 환경/도메인 작성eas-workflows— EAS Workflow YAML 및 CI/CD 파이프라인eas-simulator— EAS 클라우드에서 원격 iOS/Android 시뮬레이터에서 앱 실행 및 구동expo-dev-client— 커스텀 개발 빌드eas-update— 호환 가능한 OTA 업데이트 구성, 게시, 테스트 및 디버그eas-update-insights— OTA 업데이트 상태: 크래시율, 채택률, 페이로드 크기eas-observe— EAS Observe를 통한 시작/런칭/TTI 성능
네이티브 확장
expo-module— Expo Modules API를 사용한 네이티브 모듈 및 뷰 (Swift / Kotlin)expo-brownfield— 네이티브 SwiftUI/UIKit 또는 Android 앱에 Expo/React Native 화면 포함; 격리된 아티팩트 및 통합 빌드expo-app-clip— iOS App Clip 대상 (AASA, 스마트 앱 배너)
유지보수 및 학습
expo-upgrade— Expo SDK 업그레이드 및 의존성 충돌 해결expo-examples— 정식 버전 일치 통합 예제 (Stripe, Clerk, Supabase, …)expo-skill-feedback— Expo 스킬 또는 Expo 자체에 대한 피드백 전송; 익명 사용량 텔레메트리 활성화/비활성화
모호한 요청 변환
일상적인 표현 중 일부는 스킬 이름에 명확하게 매핑되지 않습니다. 라우팅 전에 변환하세요:
- "네이티브처럼 보이게" → 그룹화된 컨트롤/설정 폼 =
expo-ui; 화면, 스타일링 =expo-native-ui; 모션 =expo-animation; 내비게이션 =expo-router. - "화면 일관성 유지" / "스타일링 정리" / "테마 또는 디자인 토큰 설정" →
expo-design-system. - "AI가 만든 것처럼 보인다" / "너무 일반적, 네이티브가 아님" →
expo-design-system(명명된 네이티브 슬롭 팁 + 감사) 및expo-native-ui(플랫폼 관용구). - "출시" / ".ipa 또는 .apk 얻기" / "스토어에 릴리스" / "내 Swift 앱을 TestFlight에 올리기" →
eas-app-stores(빌드 + 제출, TestFlight, 버전, 스토어 메타데이터). - "초보자입니다 / 어디서부터 시작하나요" → 먼저 스캐폴딩 (공유 설정 규칙 참조), 그런 다음 목표에 따라 라우팅.
공유 설정 규칙
프로젝트와 요청된 작업에 일치하는 규칙을 적용하세요.
- EAS를 사용하여 제공되는 네이티브 앱인가요?
eas-app-stores로 라우팅하세요. 해당 스킬의references/native-ios.md는 iOS의 SwiftUI/UIKit을 다룹니다. 기존 네이티브 프로젝트를 유지하세요. EAS 인증/링크 규칙을 적용하세요. Expo 스캐폴딩, SDK 및 패키지 설치 규칙은 이 경로에 적용되지 않습니다. - 새 Expo 앱을 시작하나요? 기능 스킬로 라우팅하기 전에 표준 방식으로 새 앱을 시작하세요:
npx create-expo-app@latest,expo-project-structure에 따라 폴더를 배치합니다. 그런 다음 사용자의 목표를 분류하고 라우팅하세요. - 버전별 조언을 제공하기 전에 SDK 버전을 감지하세요:
package.json(및app.json/app.config.{js,ts})에서expo버전을 읽습니다. 많은 API와 기본값이 SDK에 따라 다릅니다. latest가 아닌 해당 SDK의 문서를 읽으세요. 버전이 고정된 URL을 사용하세요. 예: SDK 56의 경우https://docs.expo.dev/versions/latest/sdk/ui/대신https://docs.expo.dev/versions/v56.0.0/sdk/ui/—latest페이지는 최신 SDK를 추적하며 프로젝트에 아직 없는 API를 문서화할 수 있습니다.- 최신 SDK로 이동하는 것은 별도의 작업입니다 — 수동으로 버전을 올리지 말고
expo-upgrade를 로드하세요. - Managed와 Bare/Prebuild: 커밋된
ios/및android/디렉토리가 존재하면 네이티브 프로젝트가 존재함을 의미합니다(prebuild 또는 bare). Config-plugin 및 네이티브 설정 단계가 다릅니다 — 프로젝트가 어떤 상태인지 확인하세요. npx expo install <pkg>로 패키지를 설치하고, rawnpm/yarn/pnpm add를 사용하지 마세요. 그래야 버전이 프로젝트의 SDK와 호환됩니다.- EAS 인증 및 링크 (빌드/제출/업데이트/옵저브/워크플로에만 필요):
eas whoami로 로그인 상태를 확인하고,eas login으로 로그인합니다. 앱 설정에extra.eas.projectId가 있으면 프로젝트가 연결된 것입니다. 없으면eas init로 생성하세요.
라우터 홉을 건너뛰는 경우
- 사용자가 특정
expo-*/eas-*스킬을 명시적으로 명명한 경우에만 해당 스킬을 직접 로드하세요. - 완전히 명시된 작업(SDK 버전 고정, 파일 레이아웃 제공, 라이브러리 명시)은 건너뛰는 이유가 아닙니다: 위의 공유 규칙이 여전히 적용됩니다. 이를 확인한 후 일치하는 세부 스킬로 라우팅하세요.
피드백 제출
이 스킬에서 오류, 오해의 소지가 있거나 오래된 정보를 발견하면 Expo가 개선할 수 있도록 보고하세요:
npx --yes submit-expo-feedback@latest --category skills --subject "expo-overview" "<실행 가능한 피드백>"
구체적이고 실행 가능한 보고할 내용이 있을 때만 제출하세요. 가능한 한 많은 관련 컨텍스트를 포함하세요. AI 에이전트가 반복적으로 실패했거나 사용자가 Expo 작업을 직접 수행해야 했다면, 위 명령어를 재사용하는 대신 expo-skill-feedback 스킬을 로드하고 해당 평가 후보 흐름을 따르세요.