Expo Go 프로젝트를 Expo Dev Client로 마이그레이션하기

왜 Expo Go에서 Expo Dev Client로 마이그레이션이 필요한가?

Expo Go는 React Native 앱 개발을 빠르게 시작할 수 있는 훌륭한 도구입니다.
하지만 FCM(Firebase Cloud Messaging)과 같은 네이티브 모듈을 사용해야 할 때 한계가 있습니다.
Expo Go는 제한된 네이티브 모듈만 지원하기 때문에, 더 많은 네이티브 기능을 활용하려면 Expo Dev Client로 마이그레이션해야 합니다.

Expo Go와 Expo Dev Client의 차이점

1. Expo Go:

   • 미리 컴파일된 앱으로, 별도의 빌드 과정 없이 Expo 클라이언트 앱을 통해 앱을 실행
   • 제한된 네이티브 모듈만 사용 가능
   • 개발 시작이 매우 빠름

2. Expo Dev Client:

   • 커스텀 네이티브 모듈 사용 가능
   • 직접 빌드한 앱을 기기에 설치하여 개발
   • 모든 React Native 네이티브 모듈 지원

마이그레이션 과정

1. 새 프로젝트 생성 및 설정

# 새 프로젝트 생성
npx create-expo-app 새프로젝트이름
cd 새프로젝트이름

# expo-dev-client 설치
npx expo install expo-dev-client

2. package.json 설정 수정

개발 클라이언트를 사용하도록 스크립트를 수정합니다:

"scripts": {
  "start": "expo start --dev-client",
  "android": "expo run:android",
  "ios": "expo run:ios",
  "web": "expo start --web"
}

3. 파일 복사 및 종속성 설치

기존 프로젝트에서 필요한 파일들을 새 프로젝트로 복사합니다:

• src 폴더
• assets 폴더
• App.js/App.tsx 파일

또한 기존 프로젝트의 package.json에서 사용했던 의존성들을 새 프로젝트에 설치합니다:

npm install 패키지1 패키지2 ...

4. app.json 설정 확인

app.json 파일에서 아이콘, 스플래시 이미지 등의 경로가 올바른지 확인해야 합니다. 특히 다음 항목들을 주의 깊게 확인하세요:

• icon
• splash.image
• android.adaptiveIcon.foregroundImage

예를 들어:

{
  "expo": {
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png"
      }
    }
  }
}

이 파일들이 실제로 존재하지 않으면 prebuild 과정에서 오류가 발생합니다.

5. 네이티브 빌드 준비

npx expo prebuild

이 명령어로 iOS와 Android 네이티브 프로젝트를 생성합니다. 이 과정에서 app.json에 지정된 아이콘이나 스플래시 이미지가 없으면 오류가 발생합니다.

6. 앱 빌드 및 실행

# iOS 앱 빌드 및 실행
npx expo run:ios

# Android 앱 빌드 및 실행
npx expo run:android

run:ios와 start --dev-client의 차이

이 두 명령어의 차이점은 개발 작업 시 매우 중요합니다:

npx expo run:ios:

• 네이티브 iOS 앱을 처음부터 빌드하고 실행
• 네이티브 코드(Objective-C/Swift) 변경 시 필요
• FCM과 같은 네이티브 모듈 추가/변경 시 필수
• 빌드 시간이 오래 걸림(몇 분)

npx expo start --dev-client:

• 이미 설치된 앱을 개발 모드로 실행
• JavaScript/React 코드 변경 사항만 반영
• 네이티브 코드 변경사항은 반영되지 않음
• 매우 빠르게 시작됨

실제 사용 예: FCM 설정 후 테스트

Firebase Cloud Messaging과 같은 네이티브 기능을 추가하거나 수정한 후에는 반드시 npx expo run:ios 또는 npx expo run:android를 사용해야 합니다. start --dev-client로는 네이티브 레벨의 변경사항이 반영되지 않기 때문입니다.

일반적인 문제 해결

prebuild 오류: 아이콘 또는 스플래시 이미지 파일 없음

Error: [android.dangerous]: withAndroidDangerousBaseMod: ENOENT: no such file or directory, open './assets/adaptive-icon.png'

해결 방법:
1. 필요한 이미지 파일을 추가하거나
2. app.json 파일에서 경로를 실제로 존재하는 이미지 파일로 변경하거나
3. 해당 설정을 제거

결론

Expo Go에서 Expo Dev Client로의 마이그레이션은 네이티브 모듈 사용을 위한 필수 과정입니다.
초기 설정은 다소 복잡할 수 있지만, 이 과정을 통해 FCM과 같은 다양한 네이티브 기능을 React Native 앱에서 활용할 수 있게 됩니다.
특히 run:ios와 start --dev-client 명령어의 차이를 이해하면 개발 과정에서 시간을 크게 절약할 수 있습니다.