Expo 완전 가이드 (Ubuntu 24.04 기준)

Expo는 React Native 기반의 앱 개발 플랫폼으로, iOS/Android 앱을 JavaScript/TypeScript 하나로 만들 수 있게 해줍니다. 전체 구조부터 워크플로우까지 단계별로 정리합니다.---

1. 환경 설정 (Ubuntu 24.04)

Node.js 설치 (nvm 권장)

# nvm 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc

# LTS 버전 설치
nvm install --lts
nvm use --lts
node -v  # v20.x 이상 확인

Android 개발 환경 세팅

# Java 설치 (Android 빌드 필수)
sudo apt install openjdk-17-jdk -y

# Android Studio 다운로드 후 설치
# https://developer.android.com/studio

# 환경 변수 설정 (~/.bashrc 또는 ~/.zshrc에 추가)
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Expo CLI 설치

npm install -g expo-cli eas-cli

2. 프로젝트 생성 및 구조

# 새 프로젝트 생성 (TypeScript + Expo Router 권장)
npx create-expo-app@latest MyApp --template

# 의존성 설치 후 실행
cd MyApp
npx expo start
```---

## 3. Expo의 핵심 개념

### Expo Router (파일 기반 라우팅)

Next.js처럼 `app/` 폴더 구조가 곧 라우팅입니다.

app/ layout.tsx → 루트 레이아웃 index.tsx → / (홈) profile.tsx → /profile (tabs)/ → 탭 레이아웃 그룹 layout.tsx home.tsx → /home settings.tsx → /settings [id].tsx → /123, /abc (동적 라우트)

```tsx
// app/(tabs)/_layout.tsx - 탭 네비게이션 예시
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: '홈' }} />
      <Tabs.Screen name="settings" options={{ title: '설정' }} />
    </Tabs>
  );
}

자주 쓰는 Expo SDK API

# 설치 예시
npx expo install expo-camera expo-location expo-notifications
npx expo install expo-image-picker expo-file-system expo-secure-store

4. 개발 워크플로우---

5. Ubuntu에서 실기기 연결 & 실행

# Metro 서버 시작
npx expo start

# 실행 옵션
# a → 연결된 Android 기기/에뮬레이터 실행
# i → iOS (Mac 전용, Ubuntu 불가)
# w → 웹 브라우저
# r → Metro 재시작

# Android 기기 연결 확인
adb devices

# Android 에뮬레이터 실행 (Android Studio 설치 후)
npx expo start --android

iOS 실기기 테스트: Ubuntu에서는 직접 불가. 대신 Expo Go 앱을 iPhone에 설치하고 QR 코드로 연결하면 됩니다. 단, Native 모듈 포함 시 EAS Build로 TestFlight 배포 필요.

6. EAS (Expo Application Services)

Ubuntu에서 iOS 앱을 빌드하려면 EAS Build (클라우드)가 필수입니다.

# EAS 로그인
eas login

# 프로젝트 초기화
eas init

# eas.json 생성 (빌드 프로필 설정)
eas build:configure

// eas.json 예시
{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

# Android APK 빌드 (로컬)
eas build --platform android --profile preview --local

# iOS IPA 빌드 (클라우드)
eas build --platform ios --profile production

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

7. app.json 주요 설정

{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "backgroundColor": "#ffffff"
    },
    "android": {
      "package": "com.yourcompany.myapp",
      "permissions": ["CAMERA", "ACCESS_FINE_LOCATION"]
    },
    "ios": {
      "bundleIdentifier": "com.yourcompany.myapp",
      "infoPlist": {
        "NSCameraUsageDescription": "사진 촬영을 위해 카메라가 필요합니다."
      }
    },
    "plugins": [
      "expo-camera",
      ["expo-notifications", { "sounds": ["./assets/notification.wav"] }]
    ]
  }
}

8. Managed vs Bare Workflow

대부분의 프로젝트는 Managed Workflow로 시작하고, 필요할 때 npx expo prebuild로 Bare로 전환할 수 있습니다.

9. 자주 쓰는 명령어 요약

npx expo start              # 개발 서버 시작
npx expo start --clear      # 캐시 초기화 후 시작
npx expo install <패키지>   # Expo 호환 버전으로 설치
npx expo prebuild           # android/, ios/ 폴더 생성 (Bare 전환)
npx expo doctor             # 환경 문제 진단
eas build --platform all    # iOS + Android 동시 빌드
eas update                  # OTA 업데이트 배포

10. 추천 학습 순서

1. npx create-expo-app 으로 프로젝트 생성 → Expo Go로 실기기 확인

2. Expo Router 파일 기반 라우팅 익히기

3. Expo SDK API 하나씩 추가 (Camera, Location 등)

4. EAS Build 설정 → Android APK → iOS IPA 빌드

5. EAS Update 로 OTA 배포 연습

6. 필요 시 Bare Workflow 전환 및 네이티브 모듈 추가

공식 문서는 docs.expo.dev 가 잘 정리되어 있으며, 특히 Expo Router 문서를 꼼꼼히 읽어보길 권장합니다.