For the complete documentation index, see llms.txt. Markdown versions of documentation pages are available by appending .md to the page URL.
기본 탐색 메뉴
Theme

추천
API 대시보드
ChatGPT 사용해 보기
Codex

Codex use case

Expo로 React Native 앱 만들기

전용 플러그인으로 모바일 앱 아이디어를 실제로 동작하는 Expo 앱으로 구현하세요.

Difficulty Intermediate
Time horizon 1h

Codex와 Expo 플러그인으로 React Native 앱의 기본 구조를 만드세요. 라우팅에는 Expo Router의 규칙을, 패키지 관리에는 Expo의 규칙을 따르세요. Expo Go로 빠르게 테스트하고, 앱에 필요할 때만 개발 클라이언트나 EAS 빌드로 전환하세요.

Best for

  • 네이티브 IDE 워크플로우를 도입하기 전에 Expo로 React Native 앱의 프로토타입을 만들거나 앱을 출시하려는 개발자
  • Codex가 라우팅, UI, 패키지 설치, 빌드, 배포 시 Expo의 규칙을 따라야 하는 Expo Router 프로젝트
  • 웹 앱을 모바일 앱으로 이전해야 하는 개발자

Contents

    ← All use cases

    Expo로 React Native 앱 만들기

    전용 플러그인으로 모바일 앱 아이디어를 실제로 동작하는 Expo 앱으로 구현하세요.

    Codex와 Expo 플러그인으로 React Native 앱의 기본 구조를 만드세요. 라우팅에는 Expo Router의 규칙을, 패키지 관리에는 Expo의 규칙을 따르세요. Expo Go로 빠르게 테스트하고, 앱에 필요할 때만 개발 클라이언트나 EAS 빌드로 전환하세요.

    Intermediate
    1h

    Codex와 Expo 플러그인으로 React Native 앱의 기본 구조를 만드세요. 라우팅에는 Expo Router의 규칙을, 패키지 관리에는 Expo의 규칙을 따르세요. Expo Go로 빠르게 테스트하고, 앱에 필요할 때만 개발 클라이언트나 EAS 빌드로 전환하세요.

    Intermediate
    1h

    Related links

    Expo 플러그인 Expo MCP 서버 설정

    Best for

    • 네이티브 IDE 워크플로우를 도입하기 전에 Expo로 React Native 앱의 프로토타입을 만들거나 앱을 출시하려는 개발자
    • Codex가 라우팅, UI, 패키지 설치, 빌드, 배포 시 Expo의 규칙을 따라야 하는 Expo Router 프로젝트
    • 웹 앱을 모바일 앱으로 이전해야 하는 개발자

    Skills & Plugins

    • Expo
      Expo 팀이 만든 스킬로 Expo Router UI와 네이티브 앱처럼 보이고 동작하는 컴포넌트를 구현하세요. 데이터 가져오기, 개발 클라이언트 설정, 배포, 업그레이드, 모듈 개발, Codex 실행 액션 연동에도 이 스킬을 활용하세요.
    Skill Why use it
    Expo Expo 팀이 만든 스킬로 Expo Router UI와 네이티브 앱처럼 보이고 동작하는 컴포넌트를 구현하세요. 데이터 가져오기, 개발 클라이언트 설정, 배포, 업그레이드, 모듈 개발, Codex 실행 액션 연동에도 이 스킬을 활용하세요.

    Starter prompt

    Expo 플러그인을 사용해 다음 아이디어를 Expo 기반 React Native 앱으로 구현해 주세요. [describe the app idea, target users, and the main workflow] 요구 사항 - Expo Router로 시작하고 Expo의 프로젝트 구성 규칙을 따라 주세요. - 커스텀 빌드를 만들기 전에 먼저 `npx expo start`를 실행하고 Expo Go에서 앱을 테스트해 주세요. - 종속성 간 호환성을 유지하도록 Expo 패키지는 `npx expo install`로 설치해 주세요. - 화면 이동, 폼, 목록, 빈 상태, 로딩 상태에는 네이티브 앱 사용자에게 익숙한 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에서 앱을 테스트해 주세요. - 종속성 간 호환성을 유지하도록 Expo 패키지는 `npx expo install`로 설치해 주세요. - 화면 이동, 폼, 목록, 빈 상태, 로딩 상태에는 네이티브 앱 사용자에게 익숙한 UI 패턴을 적용해 주세요. 다음을 제공해 주세요. - 실제로 동작하는 앱 기능 - 앱 실행 명령어 - 앱 동작을 검증한 절차와 그 과정에서 사용한 도구나 환경(Expo Go, 실기기, 시뮬레이터, 개발 클라이언트, EAS 등)

    Expo Go로 시작하기

    Codex로 모바일 앱 아이디어를 React Native 앱으로 구현하고 테스트하려면 Expo로 시작하는 것이 좋습니다. 먼저 expo start를 실행한 뒤 기기에서 Expo Go로 앱을 테스트하세요. 커스텀 네이티브 코드가 필요하거나, 스토어에 앱을 배포해야 하거나, Expo Go에서 실행할 수 없는 기능이 필요할 때만 개발 클라이언트나 EAS 빌드로 전환하세요.

    이렇게 하면 Codex가 처음부터 네이티브 IDE와 시뮬레이터 설정, 프로비저닝, 빌드 구성에 시간을 쓰지 않고 앱 워크플로우 구현에 집중할 수 있습니다.

    Expo 플러그인 사용하기

    Expo가 공개한 Expo 플러그인은 Codex에 Expo 환경에 맞는 개발 지침을 제공합니다. Expo Router, 네이티브 UI, 폼, 내비게이션, 애니메이션, 데이터 가져오기, NativeWind 설정, Expo 모듈, 개발 클라이언트, 배포, 업그레이드, Codex의 Run 액션 연결 방법을 다룹니다.

    Codex로 새 Expo 화면을 만들거나, 패키지를 추가하거나, API 호출을 연결하거나, 개발 클라이언트를 준비할 때 이 플러그인을 사용하세요. TestFlight, App Store, Play Store 또는 EAS Hosting에 앱을 배포할 준비를 할 때도 사용하세요.

    최신 Expo 문서 검색, 호환 패키지 설치, EAS 빌드 및 워크플로우 관리, 스크린샷 캡처, 시뮬레이터 조작, React Native DevTools 사용 또는 TestFlight 데이터 조회가 필요하다면 Expo MCP 서버를 추가할 수 있습니다.

    반복 개발 절차

    1. Codex에 레포지토리를 살펴보고 새 Expo 앱인지 기존 Expo 프로젝트인지 확인해 달라고 요청하세요.
    2. Expo Router와 Expo Go로 시작하고, Expo 패키지를 추가할 때는 npx expo install을 사용하세요.
    3. Codex에 네이티브 앱처럼 자연스러운 내비게이션을 갖추고 로딩 중이거나 데이터가 없거나 오류가 발생한 상태까지 처리하는 워크플로우 하나를 처음부터 끝까지 구현해 달라고 요청하세요.
    4. 기기나 시뮬레이터에서 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

    Expo 와 React Native

    Why it's needed

    Expo는 관리형 React Native 개발 환경과 호환 패키지, 배포 도구를 제공합니다. 이 환경에서 Codex로 앱을 수정하고 결과를 빠르게 확인할 수 있습니다.

    Need

    라우팅

    Default options

    Expo Router

    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는 별도의 라우팅 계층을 만들 필요 없이 화면과 플로우를 추가할 수 있습니다.

    Related use cases

    프로토타입으로 아이디어 검증하기

    Codex와 ImageGen으로 초기 아이디어의 디자인 방향을 정하고, 핵심 기능만 담은 프로토타입을 구현한 뒤 브라우저에서 검증하세요.

    Front-end Engineering

    AI 투어 가이드 만들기

    Codex로 웹 앱에 WebMCP 기반 투어를 추가하세요. 다음에 조작할 UI 요소를 강조하고 사용자가 무엇을 해야 하는지 설명하세요. 사용자가 각 단계를 직접...

    Front-end Engineering

    브라우저 게임 만들기

    Codex로 게임 기획안을 구체적인 개발 계획으로 정리한 뒤, 그 계획에 따라 브라우저 게임을 만드세요

    Engineering Code