# 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 고려
'1인개발 수익화' 카테고리의 다른 글
구글 플레이스토어 앱 개발자 등록방법 (1) | 2024.10.30 |
---|---|
유튜브 제목 폰트 다르게 적용하는 법 (7) | 2024.10.29 |
Android 안드로이드 앱 서명 키 생성하기 (0) | 2024.10.23 |
React Native 안드로이드 스튜디오 개발 스토어에 올리는 과정 (0) | 2024.10.23 |
ai 영화 만들기 - 기초 , 영화 카메라 샷 종류 와 기법 알아보기 (0) | 2024.08.14 |