Need
모바일 프레임워크
Default options
Why it's needed
Expo는 빠르게 반복 개발할 수 있고 호환되는 패키지와 배포 도구를 제공하는 관리형 React Native 개발 경로를 Codex에 제공합니다.
Codex use case
Expo로 React Native 앱 빌드하기
전용 플러그인을 사용해 모바일 앱 아이디어를 실제로 작동하는 Expo 앱으로 구현하세요.
Difficulty 중급
Time horizon 1시간
Expo 플러그인과 Codex를 사용해 React Native 앱을 스캐폴딩하고, Expo Router 및 Expo 네이티브 패키지 규칙을 따르며, Expo Go로 빠르게 테스트한 후 필요한 경우에만 개발 클라이언트나 EAS 빌드로 전환하세요.
적합한 대상
- 네이티브 IDE 워크플로우로 넘어가기 전에 Expo로 React Native 앱을 프로토타이핑하거나 출시하려는 개발자.
- 라우팅, UI, 패키지 설치, 빌드 및 배포에서 Codex가 Expo 규칙을 따라야 하는 Expo Router 프로젝트.
- 웹 앱을 모바일 앱으로 마이그레이션해야 하는 개발자.
Contents
Expo로 React Native 앱 빌드하기
전용 플러그인을 사용해 모바일 앱 아이디어를 실제로 작동하는 Expo 앱으로 구현하세요.
Expo 플러그인과 Codex를 사용해 React Native 앱을 스캐폴딩하고, Expo Router 및 Expo 네이티브 패키지 규칙을 따르며, Expo Go로 빠르게 테스트한 후 필요한 경우에만 개발 클라이언트나 EAS 빌드로 전환하세요.
중급
1시간
Expo 플러그인과 Codex를 사용해 React Native 앱을 스캐폴딩하고, Expo Router 및 Expo 네이티브 패키지 규칙을 따르며, Expo Go로 빠르게 테스트한 후 필요한 경우에만 개발 클라이언트나 EAS 빌드로 전환하세요.
중급
1시간
관련 링크
적합한 대상
- 네이티브 IDE 워크플로우로 넘어가기 전에 Expo로 React Native 앱을 프로토타이핑하거나 출시하려는 개발자.
- 라우팅, UI, 패키지 설치, 빌드 및 배포에서 Codex가 Expo 규칙을 따라야 하는 Expo Router 프로젝트.
- 웹 앱을 모바일 앱으로 마이그레이션해야 하는 개발자.
스킬 및 플러그인
- Expo Router UI, 네이티브 앱처럼 자연스러운 컴포넌트, 데이터 가져오기, 개발 클라이언트, 배포, 업그레이드, 모듈, Codex Run 액션 연결을 위해 Expo에서 제작한 스킬을 사용하세요.
| Skill | Why use it |
|---|---|
| Expo | Expo Router UI, 네이티브 앱처럼 자연스러운 컴포넌트, 데이터 가져오기, 개발 클라이언트, 배포, 업그레이드, 모듈, Codex Run 액션 연결을 위해 Expo에서 제작한 스킬을 사용하세요. |
시작 프롬프트
이 아이디어를 바탕으로 Expo 플러그인을 사용해 Expo 기반 React Native 앱을 빌드하세요:
[describe the app idea, target users, and the main workflow]
요구 사항:
- Expo Router 및 Expo 네이티브 프로젝트 규칙을 기반으로 시작하세요.
- 커스텀 빌드를 만들기 전에 먼저 `npx expo start` 명령과 Expo Go로 테스트하세요.
- `npx expo install` 명령으로 Expo 패키지를 설치하여 종속성 호환성을 유지하세요.
- 내비게이션, 폼, 목록, 빈 상태, 로딩 상태에는 네이티브 앱처럼 자연스러운 UI 패턴을 사용하세요.
제공할 결과:
- 실제로 작동하는 앱 기능 구현본
- 실행 명령어
- Expo Go, 기기, 시뮬레이터, 개발 클라이언트 또는 EAS 등 검증에 사용한 경로
이 아이디어를 바탕으로 Expo 플러그인을 사용해 Expo 기반 React Native 앱을 빌드하세요:
[describe the app idea, target users, and the main workflow]
요구 사항:
- Expo Router 및 Expo 네이티브 프로젝트 규칙을 기반으로 시작하세요.
- 커스텀 빌드를 만들기 전에 먼저 `npx expo start` 명령과 Expo Go로 테스트하세요.
- `npx expo install` 명령으로 Expo 패키지를 설치하여 종속성 호환성을 유지하세요.
- 내비게이션, 폼, 목록, 빈 상태, 로딩 상태에는 네이티브 앱처럼 자연스러운 UI 패턴을 사용하세요.
제공할 결과:
- 실제로 작동하는 앱 기능 구현본
- 실행 명령어
- Expo Go, 기기, 시뮬레이터, 개발 클라이언트 또는 EAS 등 검증에 사용한 경로
Expo Go로 시작하기
모바일 앱 아이디어를 테스트를 완료한 React Native 앱으로 구현하는 데 Codex를 활용하려면 Expo가
좋은 기본 선택입니다. 효율적인 개발 루프는 먼저 expo start를 실행하고, 그다음 기기에서 Expo Go로
테스트한 뒤, 앱에 커스텀 네이티브 코드, 스토어 배포 또는 Expo Go에서 실행할 수 없는 기능이
필요할 때만 개발 클라이언트나 EAS 빌드로 전환하는 것입니다.
이렇게 하면 첫 단계에서 네이티브 IDE 설정, 시뮬레이터 설정, 프로비저닝 또는 빌드 구성에 시간을 쓰지 않고 Codex가 앱 워크플로우에 집중할 수 있습니다.
Expo 플러그인 사용하기
Expo는 Expo Router, 네이티브 UI, 폼, 내비게이션, 애니메이션, 데이터 가져오기, NativeWind 설정, Expo 모듈, 개발 클라이언트, 배포, 업그레이드, Codex Run 액션 연결에 대해 Expo 방식에 맞는 지침을 Codex에 제공하는 Expo 플러그인을 공개했습니다.
Codex가 새로운 Expo 화면을 빌드하거나 패키지를 추가하고 API 호출을 연결할 때, 개발 클라이언트를 준비하거나 TestFlight, App Store, Play Store 또는 EAS Hosting에 앱을 배포할 준비를 할 때 사용하세요.
작업에 최신 Expo 문서 조회, 호환되는 패키지 설치, EAS 빌드 및 워크플로우 작업, 스크린샷, 시뮬레이터 상호작용, React Native DevTools 또는 TestFlight 데이터가 필요하다면 Expo MCP 서버를 선택적으로 추가하세요.
반복 개발 과정
- Codex에 레포지토리를 검사해 새 Expo 앱인지 기존 Expo 프로젝트인지 확인하도록 요청하세요.
- Expo Router와 Expo Go로 시작하세요. Expo 패키지를 추가할 때는
npx expo install명령을 사용하세요. - 네이티브 앱처럼 자연스러운 내비게이션과 로딩 상태, 빈 상태, 오류 상태를 모두 갖춘 완결된 워크플로우 하나를 빌드하도록 Codex에 요청하세요.
- 기기의 Expo Go나 시뮬레이터처럼 가장 빠르게 사용할 수 있는 방법으로 검증한 다음, 필요한 경우에만 개발 클라이언트나 EAS로 전환하세요.
추천 후속 프롬프트
Expo 플러그인을 사용해 이 앱에 다음 항목을 추가하세요: [feature/screen/flow]
[describe one feature, screen or user flow]
제약 조건:
- 라우팅 계층은 Expo Router로 유지하세요.
- Expo와 호환되는 패키지 설치 방식을 사용하세요.
- 먼저 Expo Go로 테스트하세요.
- 이 기능에 필요한 경우에만 개발 클라이언트나 EAS로 전환하세요.
구현한 후 사용한 정확한 실행 경로와 검증한 내용을 알려 주세요.
Tech stack
Need
Default options
Why it's needed
Need
라우팅
Default options
Why it's needed
Expo Router는 내비게이션을 파일 기반으로 예측 가능하게 유지하므로 Codex가 별도의 맞춤형 라우팅 계층을 만들지 않고도 화면과 플로우를 추가할 수 있습니다.
| Need | Default options | Why it's needed |
|---|---|---|
| 모바일 프레임워크 | Expo 및 React Native | Expo는 빠르게 반복 개발할 수 있고 호환되는 패키지와 배포 도구를 제공하는 관리형 React Native 개발 경로를 Codex에 제공합니다. |
| 라우팅 | Expo Router | Expo Router는 내비게이션을 파일 기반으로 예측 가능하게 유지하므로 Codex가 별도의 맞춤형 라우팅 계층을 만들지 않고도 화면과 플로우를 추가할 수 있습니다. |
관련 사용 사례
아이디어에서 개념 증명까지
Codex와 ImageGen을 사용해 초안 수준의 아이디어를 시각적 방향으로 구체화하고, 실제로 쓸 수 있는 최소 규모의 프로토타입을 구현한 뒤 브라우저에서 검증하세요.
프런트엔드 엔지니어링
AI 투어 가이드 만들기
Codex로 웹 앱에 WebMCP 기반 투어를 추가하세요. 사용자가 각 단계를 직접 수행하는 동안 다음에 사용할 컨트롤을 강조 표시하고, 수행할 작업을 설명하며...
프런트엔드 엔지니어링
브라우저 기반 게임 만들기
Codex를 사용해 게임 개요를 먼저 구체적인 계획으로 발전시킨 다음 실제 브라우저 기반 게임으로 구현하세요
엔지니어링 코드