1인개발 수익화

Expo React Native 빌드하는법

주영 🐱 2024. 10. 25. 12:51
728x90
반응형

# Expo React Native 개발 및 빌드 가이드

## 1. 초기 설정

### 필수 도구 설치
```bash
# Node.js 설치 (16.0 이상 권장)
# npm 설치 (Node.js와 함께 설치됨)

# Expo CLI 전역 설치
npm install -g expo-cli

# iOS 시뮬레이터를 위한 Xcode (Mac 전용)
# Android 시뮬레이터를 위한 Android Studio
```

### 프로젝트 생성
```bash
npx create-expo-app MyApp
cd MyApp
```

## 2. 프로젝트 기본 구조
```
MyApp/
├── assets/              # 이미지, 폰트 등 정적 파일
├── src/                 # 소스 코드 (직접 생성 필요)
│   ├── components/      # 재사용 가능한 컴포넌트
│   ├── screens/         # 화면 컴포넌트
│   ├── navigation/      # 네비게이션 설정
│   ├── services/        # API 통신 등 서비스 로직
│   └── utils/           # 유틸리티 함수
├── App.js               # 앱의 진입점
├── app.json            # Expo 설정 파일
├── babel.config.js     # Babel 설정
└── package.json        # 프로젝트 의존성 관리
```

## 3. 개발 환경 설정

### app.json 설정
```json
{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "cohttp://m.yourcompany.myapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "cohttp://m.yourcompany.myapp"
    }
  }
}
```

## 4. 개발 프로세스

### 개발 서버 실행
```bash
npm start # 또는 expo start
```

### 개발 모드 옵션
- `w` - 웹 브라우저에서 실행
- `a` - Android 에뮬레이터에서 실행
- `i` - iOS 시뮬레이터에서 실행
- `r` - 개발 서버 재시작
- `m` - 메뉴 토글

## 5. 빌드 프로세스

### Development Build 생성
```bash
# Development build 생성
eas build:configure

# iOS와 Android 개발 빌드
eas build --profile development --platform all
```

### Production Build 생성

1. EAS (Expo Application Services) 설정
```bash
# EAS CLI 설치
npm install -g eas-cli

# EAS 로그인
eas login

# EAS 빌드 설정
eas build:configure
```

2. eas.json 설정
```json
{
  "build": {
    "production": {
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "distribution": "store"
      }
    },
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    }
  }
}
```

3. 프로덕션 빌드 실행
```bash
# iOS 빌드
eas build --platform ios

# Android 빌드
eas build --platform android

# 모든 플랫폼 빌드
eas build --platform all
```

## 6. 배포 프로세스

### App Store 배포 (iOS)
1. Apple Developer Program 가입
2. App Store Connect에서 앱 설정
3. 인증서 및 프로비저닝 프로파일 설정
4. 빌드 제출
```bash
eas submit --platform ios
```

### Play Store 배포 (Android)
1. Google Play Console 계정 생성
2. 앱 등록 및 설정
3. 키스토어 생성
4. 빌드 제출
```bash
eas submit --platform android
```

## 주요 명령어 모음
```bash
# 프로젝트 생성
npx create-expo-app MyApp

# 개발 서버 시작
npm start

# 의존성 설치
expo install [package-name]

# 빌드 설정
eas build:configure

# 개발용 빌드
eas build --profile development --platform all

# 프로덕션 빌드
eas build --platform all

# 앱 스토어 제출
eas submit --platform ios
eas submit --platform android
```

## 팁과 모범 사례

1. 성능 최적화
- React Native의 성능 도구 사용
- 불필요한 리렌더링 방지
- 이미지 최적화

2. 버전 관리
- Git 사용
- .gitignore 파일 적절히 설정
- 중요한 설정 파일 관리

3. 테스트
- Jest를 사용한 단위 테스트
- React Native Testing Library 활용
- E2E 테스트를 위한 Detox 고려

반응형