> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Expo 보일러플레이트

> Dodo Payments를 사용하여 React Native 모바일 앱을 구축하는 Expo 보일러플레이트입니다. 체크아웃 통합, 결제 처리 및 TypeScript 지원이 포함되어 있습니다.

<Card title="GitHub Repository" icon="github" href="https://github.com/dodopayments/expo-boilerplate">
  Expo + React Native + Dodo Payments 보일러플레이트 완성
</Card>

## 개요

Dodo Payments를 Expo/React Native 애플리케이션에 통합하기 위한 프로덕션 준비 완료 보일러플레이트입니다. 이 템플릿은 체크아웃 세션 생성, 결제 처리 및 적절한 TypeScript 구성을 포함하여 모바일 앱에서 빠르게 결제를 수락할 수 있도록 도와줍니다.

<Info>
  이 보일러플레이트는 Expo SDK와 TypeScript를 사용하며 체크아웃 세션 및 결제 처리 예제 구현을 포함합니다.
</Info>

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/78N1qw14m0Y" title="Expo Boilerplate Demo | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

## 필수 조건

* Node.js 18+
* Expo CLI 또는 EAS CLI
* Dodo Payments 계정 (대시보드에서 API 키)
* iOS 시뮬레이터 또는 Android 에뮬레이터 (또는 실제 장치)

## 빠른 시작

<Steps>
  <Step title="Clone the Repository">
    보일러플레이트 저장소를 복제하고 프로젝트 디렉터리로 이동하세요:

    ```bash theme={null}
    git clone https://github.com/dodopayments/expo-boilerplate.git
    cd expo-boilerplate
    ```
  </Step>

  <Step title="Get Your API Credentials">
    테스트 모드에서 Dodo Payments 대시보드에서 자격 증명을 가져오세요:

    * **API 키**: [대시보드](https://app.dodopayments.com)에서 **개발자 → API 키**로 이동합니다.

    <Tip>
      실제 결제를 처리하지 않고 통합을 안전하게 테스트하려면 테스트 모드부터 시작하세요.
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    루트 디렉터리에 `.env` 파일을 생성하세요:

    ```bash theme={null}
    touch .env
    ```

    Dodo Payments 자격 증명을 추가합니다:

    ```bash .env theme={null}
    EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
    ```

    <Warning>
      `.env` 파일을 버전 관리에 절대 커밋하지 마세요. 이 파일은 `.gitignore`에 이미 포함되어 있습니다.
    </Warning>
  </Step>

  <Step title="Install Dependencies">
    필요한 npm 패키지를 설치하세요:

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Start the Development Server">
    Expo 개발 서버를 시작하세요:

    ```bash theme={null}
    npx expo start
    ```

    Expo Go 앱으로 QR 코드를 스캔하거나 iOS 시뮬레이터용 `i` 또는 Android 에뮬레이터용 `a`를 누르세요.

    <Check>
      준비가 되었습니다! 보일러플레이트에는 통합을 이해하는 데 도움이 되는 예제 화면과 구성 요소가 포함되어 있습니다.
    </Check>
  </Step>
</Steps>

## 포함된 내용

보일러플레이트에는 미리 구성된 필수 요소가 포함되어 있습니다:

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    체크아웃 세션을 생성하고 처리하는 예제 구현
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    성공 및 오류 처리를 갖춘 전체 결제 흐름
  </Card>

  <Card title="TypeScript Support" icon="code">
    적절한 타입 정의를 포함한 전체 TypeScript 구성
  </Card>

  <Card title="Expo Router" icon="route">
    원활한 라우팅을 위한 Expo Router 기반 네비게이션 설정
  </Card>
</CardGroup>

## 프로젝트 구조

```
expo-boilerplate/
├── app/
│   ├── (tabs)/
│   │   └── index.tsx          # Home screen with examples
│   └── checkout.tsx           # Checkout screen
├── components/
│   └── PaymentButton.tsx      # Payment button component
├── lib/
│   └── dodo.ts                # Dodo Payments client setup
├── .env.example               # Environment variables template
└── package.json
```

## 다음 단계

보일러플레이트가 실행되면:

<Steps>
  <Step title="Create Your Products">
    체크아웃 기능을 사용하려면 [Dodo Payments 대시보드](https://app.dodopayments.com)에 제품을 추가하세요.
  </Step>

  <Step title="Customize the Integration">
    예제 코드를 애플리케이션의 요구 사항과 디자인에 맞게 조정하세요.
  </Step>

  <Step title="Test on Real Devices">
    모든 것이 제대로 작동하는지 확인하려면 실제 기기에서 결제 흐름을 테스트하세요.
  </Step>

  <Step title="Go Live">
    준비가 되면 라이브 모드 API 키로 전환하고 앱을 프로덕션용으로 빌드하세요.
  </Step>
</Steps>

## 프로덕션을 위한 빌드

<Steps>
  <Step title="Install EAS CLI">
    ```bash theme={null}
    npm install -g eas-cli
    ```
  </Step>

  <Step title="Configure EAS">
    ```bash theme={null}
    eas build:configure
    ```
  </Step>

  <Step title="Build Your App">
    iOS의 경우:

    ```bash theme={null}
    eas build --platform ios
    ```

    Android의 경우:

    ```bash theme={null}
    eas build --platform android
    ```
  </Step>
</Steps>

## 추가 리소스

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    모바일 앱에서 결제를 구현하기 위한 자세한 가이드
  </Card>

  <Card title="React Native Integration" icon="react" href="/developer-resources/react-native-integration">
    React Native 전용 통합 문서
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    일회성 결제 구현을 위한 자세한 가이드
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    전체 Dodo Payments API 문서를 확인하세요
  </Card>
</CardGroup>

## 지원

보일러플레이트에 대한 도움이 필요하신가요?

* 질문 및 토론을 위해 [Discord 커뮤니티](https://discord.gg/bYqAp4ayYh)에 참여하세요
* 문제 및 업데이트를 위해 [GitHub 리포지토리](https://github.com/dodopayments/expo-boilerplate)를 확인하세요
* 지원이 필요하시면 [지원 팀](mailto:support@dodopayments.com)에게 연락하세요