Expo 완전 마스터 가이드 - 개발부터 배포까지

React Native 앱 개발을 시작하려는데 복잡한 환경 설정 때문에 막막하신가요? Expo가 그 해답입니다! 이 가이드에서는 Expo가 무엇인지부터 시작해서, 개발 환경 구축, 실제 앱 배포까지 모든 과정을 상세히 다루겠습니다.

Expo란 무엇인가?

Expo의 정의

Expo는 React Native 앱을 빠르고 쉽게 개발할 수 있도록 도와주는 플랫폼이자 도구 모음입니다. 복잡한 네이티브 개발 환경(Android Studio, Xcode) 설정 없이도 JavaScript만으로 모바일 앱을 만들 수 있게 해줍니다.

전통적인 React Native vs Expo

전통적인 React Native 개발:

# 필요한 환경 설정
- Android Studio 설치 및 설정
- Xcode 설치 (Mac만 가능)
- Java JDK 설치
- Android SDK 설정
- 각종 환경 변수 설정
- 에뮬레이터/시뮬레이터 설정

Expo 개발:

# 필요한 것
- Node.js
- Expo CLI
- 스마트폰 + Expo Go 앱

Expo의 핵심 개념

Expo SDK: 카메라, 위치, 알림 등 네이티브 기능을 JavaScript로 쉽게 사용할 수 있는 API 모음
Expo Go: 개발 중인 앱을 실제 기기에서 바로 테스트할 수 있는 앱
EAS (Expo Application Services): 빌드, 배포, 업데이트를 관리하는 클라우드 서비스
Over-the-Air Updates: 앱스토어 승인 없이 앱을 업데이트할 수 있는 기능

Expo의 장단점

장점

1. 빠른 시작

복잡한 환경 설정 불필요
프로젝트 생성부터 실행까지 5분 이내

2. 실시간 개발

코드 변경 시 즉시 반영 (Hot Reload)
실제 기기에서 바로 테스트

3. 풍부한 API

// 카메라 사용 예시
import { Camera } from 'expo-camera';

export default function CameraScreen() {
  return <Camera style={{ flex: 1 }} />;
}

4. 쉬운 배포

클라우드 빌드 서비스
Over-the-Air 업데이트

단점

1. 제한된 네이티브 기능

모든 네이티브 모듈을 사용할 수 없음
커스텀 네이티브 코드 작성 제한

2. 앱 크기

Expo SDK가 포함되어 앱 크기가 상대적으로 큼

3. 성능

매우 복잡한 앱의 경우 순수 네이티브보다 느릴 수 있음

개발 환경 구축

1. 필수 소프트웨어 설치

Node.js 설치

# Node.js 버전 확인
node --version

# npm 버전 확인  
npm --version

Expo CLI 설치

# 최신 방식 (npx 사용 - 권장)
npx create-expo-app --version

# 전역 설치 방식 (선택사항)
npm install -g @expo/cli

2. 스마트폰 준비

iOS (iPhone):

App Store에서 "Expo Go" 검색 후 설치
계정 생성 또는 로그인

Android:

Google Play Store에서 "Expo Go" 검색 후 설치
계정 생성 또는 로그인

첫 번째 프로젝트 만들기

1. 새 프로젝트 생성

# 새 프로젝트 생성 (MyApp을 원하는 이름으로 변경)
npx create-expo-app MyApp

# 프로젝트 폴더로 이동
cd MyApp

# 프로젝트 구조 확인
ls -la

2. 프로젝트 구조 이해

MyApp/
├── App.js              # 메인 앱 컴포넌트
├── app.json           # Expo 설정 파일
├── package.json       # npm 의존성 및 스크립트
├── assets/           # 이미지, 폰트 등 리소스
│   ├── icon.png
│   └── splash.png
└── node_modules/     # 설치된 패키지들

3. 개발 서버 시작

# 개발 서버 시작
npx expo start

# 터널링 모드 (외부 네트워크에서 접근 가능)
npx expo start --tunnel

# 클리어 캐시와 함께 시작
npx expo start --clear

4. 앱 접속 방법

방법 1: QR 코드 스캔

터미널에 표시된 QR 코드를 스마트폰 카메라로 스캔
Expo Go 앱에서 열기

방법 2: 로컬 네트워크 (권장)

컴퓨터와 스마트폰이 같은 Wi-Fi 연결
Expo Go 앱 실행
'Projects' 탭에서 개발 중인 앱 선택

방법 3: URL 직접 입력

Expo Go 앱에서 "Enter URL manually" 선택
터미널에 표시된 URL 입력

필수 초기 설정

1. Expo 계정 설정

# Expo 계정 로그인
npx expo login

# 현재 로그인된 계정 확인
npx expo whoami

# 로그아웃
npx expo logout

2. EAS CLI 설치 및 설정

**EAS (Expo Application Services)**는 앱의 빌드, 배포, 업데이트를 클라우드에서 처리해주는 핵심 서비스입니다.

# EAS CLI 전역 설치
npm install -g eas-cli

# EAS 버전 확인
eas --version

# EAS 계정 로그인
eas auth:login

# EAS 빌드 설정 초기화
eas build:configure

# EAS 업데이트 설정 초기화  
eas update:configure

3. app.json 설정

{
  "expo": {
    "name": "My Awesome App",
    "slug": "my-awesome-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.myawesomeapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "com.yourcompany.myawesomeapp"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

일상적인 개발 워크플로우

매일 개발 시작하기

# 1. 프로젝트 폴더로 이동
cd ~/Documents/workspace/MyApp

# 2. 최신 의존성 설치 (필요시)
npm install

# 3. 개발 서버 시작
npx expo start

# 4. 코드 수정 후 자동 리로드 확인

개발 중 유용한 단축키

개발 서버가 실행 중일 때 터미널에서 사용할 수 있는 명령어들:

r # 앱 리로드
m # 개발 메뉴 열기
d # 개발 도구 열기
j # 크롬 디버거 열기
c # 로그 클리어

패키지 설치 및 관리

# Expo 호환 패키지 설치 (권장)
npx expo install react-native-maps

# 일반 npm 패키지 설치
npm install axios

# 설치된 패키지와 호환성 확인
npx expo doctor

# 패키지 제거
npm uninstall package-name

EAS (Expo Application Services) - 클라우드 개발 플랫폼

EAS란 무엇인가?

**EAS (Expo Application Services)**는 Expo에서 제공하는 클라우드 기반 서비스 모음으로, 앱의 빌드, 배포, 업데이트를 클라우드에서 자동으로 처리해주는 혁신적인 플랫폼입니다.

전통적인 방식 vs EAS 방식

전통적인 React Native 빌드:

# 로컬 환경에서 직접 빌드 (매우 복잡)
1. Android Studio 6GB+ 설치
2. Xcode 12GB+ 설치 (Mac만 가능)
3. 각종 SDK, 키스토어 설정
4. 로컬에서 gradle build 실행 (20-30분)
5. 수동으로 앱스토어 업로드

EAS 방식:

# 클라우드에서 모든 처리 (매우 간단)
1. eas build --platform android
2. 클라우드에서 자동 빌드 (10-15분)
3. 완성된 APK/AAB/IPA 다운로드
4. eas submit으로 자동 배포

EAS의 핵심 서비스

1. EAS Build - 클라우드 빌드 서비스

로컬 환경 설정 불필요: 복잡한 Android Studio, Xcode 설정 없음
어떤 OS에서든 빌드: Windows에서도 iOS 앱 빌드 가능
일관된 빌드 환경: 고성능 서버에서 안정적인 빌드
자동 키스토어 관리: 인증서와 키스토어 자동 관리

2. EAS Submit - 자동 앱스토어 배포

원클릭 배포: Google Play Store, Apple App Store 자동 제출
메타데이터 동기화: 앱 정보 자동 업데이트
버전 관리: 자동 버전 관리 및 추적

3. EAS Update - Over-the-Air 업데이트

즉시 업데이트: 앱스토어 승인 없이 JavaScript 코드 즉시 배포
자동 롤백: 문제 발생 시 이전 버전으로 자동 복구
A/B 테스트: 다양한 버전 동시 테스트 가능

eas.json 설정 파일

EAS 설정은 eas.json 파일에서 관리합니다:

{
  "cli": {
    "version": ">= 3.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"  // 테스트용 APK
      }
    },
    "production": {
      "android": {
        "buildType": "aab"  // Google Play용 AAB
      }
    }
  },
  "submit": {
    "production": {}
  }
}

EAS 요금제

무료 플랜 (Hobby):

빌드: 월 30회
업데이트: 무제한
제출: 월 15회
개인 프로젝트에 충분

유료 플랜 (Production - $99/월):

빌드: 월 1,000회
업데이트: 무제한
제출: 월 1,000회
팀 프로젝트용

실제 앱 스토어 배포 (EAS Build & Submit)

Expo는 테스트와 개발에 최적화되어 있지만, EAS를 통해 실제 앱 스토어 배포도 매우 간단하게 할 수 있습니다. 중요한 차이점들을 알아보겠습니다.

Expo Go vs 스탠드얼론 앱

Expo Go (개발/테스트용):

장점: 즉시 테스트 가능, 빠른 업데이트 (1분 이내)
단점: Expo Go 앱이 설치되어 있어야 함
용도: 개발, 내부 테스트, 클라이언트 시연
접근: QR 코드 스캔 또는 Expo Go 앱에서 직접 실행

스탠드얼론 앱 (배포용):

장점: 독립적인 APK/IPA 파일, 앱 스토어 배포 가능, 일반 사용자용
단점: 빌드 시간 오래 걸림 (10-15분), 네이티브 변경시 재빌드 필요
용도: 실제 사용자 배포, Google Play Store/Apple App Store 등록
접근: 일반 앱처럼 설치 후 독립 실행

1. EAS Build로 스탠드얼론 앱 빌드

빌드 설정 완성:

// app.json - 프로덕션 배포를 위한 완전한 설정
{
  "expo": {
    "name": "My Production App",
    "slug": "my-production-app", 
    "version": "1.0.0",
    "privacy": "public",
    "platforms": ["ios", "android"],
    "ios": {
      "bundleIdentifier": "com.yourcompany.myproductionapp",
      "buildNumber": "1",
      "supportsTablet": true
    },
    "android": {
      "package": "com.yourcompany.myproductionapp",
      "versionCode": 1,
      "permissions": [],
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    }
  }
}

EAS 빌드 실행:

# Android APK 빌드 (내부 테스트용)
eas build --platform android --profile preview

# Android AAB 빌드 (Google Play 배포용) 
eas build --platform android --profile production

# iOS 빌드 (Apple Developer 계정 필요)
eas build --platform ios --profile production

# 모든 플랫폼 동시 빌드
eas build --platform all --profile production

# 빌드 상태 확인
eas build:list

# 특정 빌드 상세 정보
eas build:view [BUILD_ID]

2. EAS Submit으로 자동 앱스토어 배포

Google Play Store 자동 배포:

# 최신 빌드 자동 제출
eas submit --platform android

# 특정 빌드 제출
eas submit --platform android --id [BUILD_ID]

# Google Play Console 설정 (최초 1회)
eas submit:configure --platform android

Apple App Store 자동 배포:

# App Store Connect 자동 제출 (Apple Developer 계정 필요)
eas submit --platform ios

# TestFlight 베타 테스트
eas submit --platform ios --latest

# Apple Developer 계정 설정 (최초 1회)  
eas submit:configure --platform ios

3. 빌드 과정의 현실적 차이점

Expo Go 개발 방식:

코드 작성 → npx expo start → 즉시 테스트 (2-3분)
- 빌드 시간: 없음
- 테스트: 즉시
- 배포: 불가능 (개발용만)

EAS Build 배포 방식:

코드 작성 → eas build → 클라우드 빌드 → APK/IPA 다운로드 (15-30분)
- 빌드 시간: 15-30분
- 테스트: 빌드 완료 후
- 배포: 앱스토어 가능

하이브리드 개발 워크플로우 (권장):

# 1. 개발 단계: Expo Go로 빠른 개발
npx expo start
# 빠른 테스트와 개발 진행

# 2. 테스트 단계: Preview 빌드로 내부 테스트
eas build --platform android --profile preview
# APK 파일로 실제 디바이스 테스트

# 3. 배포 단계: Production 빌드로 앱스토어 배포
eas build --platform all --profile production
eas submit --platform all

4. 비용과 시간 비교

구분 Expo Go EAS Build (Preview) EAS Build (Production)

빌드 시간	없음	10-15분	15-30분
테스트 시간	즉시	빌드 후 즉시	빌드 후 즉시
배포 가능	❌	❌ (내부 테스트만)	✅ (앱스토어)
일반 사용자 사용	❌ (Expo Go 필요)	❌ (수동 설치)	✅ (앱스토어에서)
월 한도 (무료)	무제한	30회	30회
적합한 용도	개발/디버깅	내부 테스트/시연	실제 배포

5. 실제 배포 전략

단계별 배포 전략:

# Phase 1: 개발 (Expo Go)
npx expo start
# 기능 개발 및 기본 테스트

# Phase 2: 내부 테스트 (Preview Build)  
eas build --platform android --profile preview
# 팀 내부 테스트, 클라이언트 시연

# Phase 3: 베타 테스트 (Production Build + TestFlight/Internal Testing)
eas build --platform all --profile production
eas submit --platform ios # TestFlight
# 제한된 사용자 베타 테스트

# Phase 4: 실제 배포 (App Store Release)
eas submit --platform all
# 일반 사용자 배포

Over-the-Air (OTA) 업데이트

OTA 업데이트란?

앱 스토어 승인 없이도 JavaScript 코드와 리소스를 즉시 업데이트할 수 있는 기능입니다.

업데이트 가능한 것:

JavaScript 코드
이미지, 폰트 등 리소스
설정 파일

업데이트 불가능한 것:

네이티브 코드
권한 변경
app.json의 주요 설정 (bundleIdentifier 등)

OTA 업데이트 사용법

# 기본 업데이트
eas update --branch production --message "버그 수정"

# 특정 채널로 업데이트
eas update --channel stable --message "안정 버전 업데이트"

# 업데이트 상태 확인
eas update:list --branch production

업데이트 전략

// App.js에서 업데이트 확인
import * as Updates from 'expo-updates';

export default function App() {
  useEffect(() => {
    async function checkForUpdates() {
      if (!__DEV__) {
        const { isAvailable } = await Updates.checkForUpdateAsync();
        if (isAvailable) {
          await Updates.fetchUpdateAsync();
          await Updates.reloadAsync();
        }
      }
    }
    checkForUpdates();
  }, []);

  return <YourAppContent />;
}

문제 해결 가이드

자주 발생하는 문제들

1. QR 코드가 스캔되지 않을 때

# 캐시 클리어 후 재시작
npx expo start --clear

# 터널링 모드로 실행
npx expo start --tunnel

2. 패키지 충돌 문제

# 호환성 확인
npx expo doctor

# node_modules 재설치
rm -rf node_modules package-lock.json
npm install

3. Metro bundler 오류

# Metro 캐시 클리어
npx expo start --clear

# 특정 포트로 실행
npx expo start --port 8081

4. 빌드 실패 문제

# EAS 빌드 로그 확인
eas build:list

# 특정 빌드 로그 상세 보기
eas build:view [BUILD_ID]

개발 팁과 베스트 프랙티스

1. 프로젝트 구조 관리

src/
├── components/        # 재사용 가능한 컴포넌트
├── screens/          # 화면 컴포넌트
├── navigation/       # 네비게이션 설정
├── services/         # API 호출, 비즈니스 로직
├── utils/           # 유틸리티 함수
└── constants/       # 상수 정의

2. 환경별 설정 관리

// config.js
const config = {
  development: {
    apiUrl: 'http://localhost:3000',
  },
  production: {
    apiUrl: 'https://api.yourapp.com',
  }
};

export default config[process.env.NODE_ENV || 'development'];

3. 성능 최적화

// 이미지 최적화
import { Image } from 'expo-image';

// 메모리 효율적인 리스트
import { FlashList } from '@shopify/flash-list';

// 네트워크 요청 최적화
import { useQuery } from '@tanstack/react-query';

📚 유용한 명령어 치트시트

개발 관련

npx expo start                    # 개발 서버 시작
npx expo start --clear           # 캐시 클리어 후 시작  
npx expo start --tunnel          # 터널링 모드
npx expo install package-name    # Expo 호환 패키지 설치
npx expo doctor                  # 프로젝트 건강 상태 확인

계정 관리

npx expo login                   # 로그인
npx expo whoami                  # 현재 계정 확인
npx expo logout                  # 로그아웃

빌드 및 배포

eas build:configure             # EAS 빌드 설정
eas build --platform android    # Android 빌드
eas build --platform ios        # iOS 빌드
eas build --platform all        # 모든 플랫폼 빌드
eas build:list                  # 빌드 목록 확인
eas build:view [BUILD_ID]       # 빌드 상세 정보

eas submit --platform android   # Google Play Store 제출
eas submit --platform ios       # Apple App Store 제출
eas submit --platform all       # 모든 플랫폼 제출

업데이트 관리

eas update:configure             # OTA 업데이트 설정 
eas update --branch main         # 메인 브랜치 업데이트
eas update --channel production  # 프로덕션 채널 업데이트
eas update:list                  # 업데이트 목록 확인
eas update:rollback --branch main # 업데이트 롤백
eas branch:list                  # 브랜치 목록 확인

마무리

Expo와 EAS는 React Native 개발의 진입 장벽을 크게 낮춰주는 혁신적인 플랫폼입니다. 개발 초기에는 Expo Go로 빠른 프로토타이핑을, EAS Update로 즉시 배포를, EAS Build로 실제 앱 스토어 배포까지 모든 과정을 지원합니다.

개발 단계별 Expo 활용 전략

초기 개발 (Expo Go)

npx expo start  # 즉시 테스트, 빠른 반복 개발

내부 테스트 (EAS Build Preview)

eas build --platform android --profile preview  # APK로 팀 테스트

베타 테스트 (EAS Update)

eas update --channel beta  # 즉시 업데이트, A/B 테스트

실제 배포 (EAS Build + Submit)

eas build --platform all --profile production  # 앱스토어 배포용 빌드
eas submit --platform all  # 자동 앱스토어 제출

언제 Expo/EAS를 사용해야 할까요?

Expo/EAS 사용이 적합한 경우:

빠른 프로토타이핑이 필요한 경우
React Native를 처음 배우는 경우
복잡한 환경 설정을 피하고 개발에 집중하고 싶은 경우
팀 협업과 빠른 피드백이 중요한 경우
Over-the-Air 업데이트가 필요한 경우
어떤 OS에서든 iOS/Android 앱을 빌드해야 하는 경우

Expo/EAS 사용을 재고해야 하는 경우:

매우 복잡한 네이티브 기능이 필요한 경우
앱 크기가 극도로 중요한 경우
커스텀 네이티브 모듈이 필수인 경우
빌드 비용이 부담되는 대규모 팀의 경우

EAS가 바꾼 모바일 개발의 패러다임

Before EAS:

아이디어 → 환경설정(2-3일) → 개발 → 로컬빌드(30분) → 수동배포(1-2시간) → 앱스토어 승인(1-7일)

After EAS:

아이디어 → 개발 → eas build(15분) → eas submit(5분) → 즉시 OTA 업데이트

결과: 개발자는 코드 작성에만 집중하고, 복잡한 인프라는 EAS가 모두 처리해줍니다!

Expo와 EAS를 마스터하면 아이디어부터 실제 배포까지의 시간을 혁신적으로 단축할 수 있습니다. 오늘부터 바로 시작해보세요!춰주는 훌륭한 플랫폼입니다. 개발 초기에는 Expo Go로 빠른 프로토타이핑을, 배포 단계에서는 EAS Build로 실제 앱 스토어 배포까지 모든 과정을 지원합니다.

언제 Expo를 사용해야 할까요?

Expo 사용이 적합한 경우:

빠른 프로토타이핑이 필요한 경우
React Native를 처음 배우는 경우
표준적인 모바일 앱 기능만 필요한 경우
팀 협업과 빠른 피드백이 중요한 경우

Expo 사용을 재고해야 하는 경우:

복잡한 네이티브 기능이 필요한 경우
앱 크기가 매우 중요한 경우
커스텀 네이티브 모듈이 필수인 경우

'개발' 카테고리의 다른 글

React Native + Express.js 프로젝트의 Git 저장소 구성 가이드 (0)	2025.08.22
React Native/Expo 개발, 로컬 서버 연결 실패? 원인부터 해결까지 (0)	2025.08.22
React 웹 프로젝트를 Expo React Native로 완전 마이그레이션하기: 실전 가이드 (4)	2025.08.09
React와 Node.js에서 GIS를 통한 구글 로그인 연동기 (2)	2025.08.02
Node.js 풀스택 개발시 로컬 개발 환경과 배포 환경의 괴리에서 발생하는 문제점에 대한 논의 (0)	2025.08.02