❗Android 에서 실행하는 빌드를 생성하는 것을 중점으로 작성되어 있는 글입니다.

Expo 의 2가지 개발 환경

Expo 를 통해 개발 하는 개발 환경을 선택할 때, 2가지 방식이 존재한다. 하나는 Expo Go, 하나는 Development Build(개발 빌드) 이다.

Expo Go

사용자 정의 네이티브 모듈 없이 제한된 샌드박스 환경에서 앱 개발을 할 수 있다. Expo 를 빠르게 테스트해보기에 적합하지만, 장기적인 프로젝트에는 적합하지 않다.

Development Build

개발 도구를 포함한 사용자의 앱을 직접 빌드한다. 사용자 정의 네이티브 모듈을 지원하며, 프로덕션 프로젝트를 목적으로 설계되어 있다.

---

Development Build 를 사용하면 앞서 살펴본 것 과 같이, Expo Go 를 사용하는 것과 달리, 네이티브 런타임에 대한 완전한 제어권을 얻을 수 있다. 이를 통해 네이티브 라이브러리를 설치하거나, 프로젝트 설정을 수정하거나, 직접 네이티브 코드를 작성할 수 있다.

즉, 만약 내 프로젝트가 장기적이고 앱 출시까지가 목표라면, Development Build 를 활용하는 것이 적합할 것이다.

expo-dev-client

Develeopment Build 는 expo-dev-client 라는 패키지를 포함하는 디버그 빌드이다. 따라서 해당 패키지를 설치해주자.

expo-dev-client 패키지는 React Native에서 기본적으로 제공하는 개발 도구 UI를 대체하여 더욱 강력하고 확장 가능한 UI를 제공하며, 다음과 같은 기능을 추가로 지원한다.

• 네트워크 디버깅
• 업데이트 실행 (PR 미리보기 등)
• 런처 UI

---

Development Build 는 EAS 를 사용하여 원격적으로 생성 하거나, Android Studio와 Xcode 를 사용하여 로컬 컴퓨터에서 생성 할 수 있다.

로컬 로 생성할 경우, npx expo run:[android|ios] 또는 eas build --local 명령어를 사용하면 된다.

이 글에선, EAS 를 사용하여 Development Build 를 만드는 방법을 알아보겠다.

1️⃣ EAS 로그인 및 expo-dev-client 패키지 설치

EAS 를 사용하기 위해, EAS CLI 를 설치하고 EAS 에 로그인 하는 과정이 필요하다.

npm install -g eas-cli

eas login

또한 앞서 얘기했듯, Development Build 에 필요한 expo-dev-client 를 설치하자.

npx expo install expo-dev-client

2️⃣ 설정 파일 생성

EAS 로 빌드를 하기위해서는 eas.json 이라는 설정파일이 필요하다.

eas.json 은 첫번째 빌드 시, 자동으로 프로젝트의 루트 디렉토리에 생성된다. 혹은 다음 명령어를 통해 직접 생성할 수도 있다.

eas build:configue

이 설정파일은 기본적으로 개발, 미리보기, 프로덕션 빌드 프로필 이 포함된다. 최소 설정 예시는 다음과 같다.

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

개발 빌드 프로필 에서 developmentClient 속성을 true 로 설정하여 디버그 빌드를 생성할 수 있게 된다.

iOS 빌드 시의 주의점

주의할 점은, iOS 빌드를 진행할 때 developmentClient 가 true 로 설정되어있다면, distribution 은 항상 internal 로 설정해야한다.

또한, TestFlight(App Store에 앱을 출시하기 전에 앱의 베타 버전을 테스트 하는 기능) 에 배포하는 경우, distribution 은 store 로 설정해야 한다.

3️⃣ 빌드 생성하기

이제 Development Build 를 생성해보겠다.

방법은 각각 생성된 빌드가 어떤 운영체제에서 실행되는 지, 어떤 곳에서 실행되는 지 에 따라 Android 혹은 iOS, Emulator/Simulator 혹은 기기 으로 나뉜다.

3️⃣-1️⃣ Android 빌드 생성하기

Android 는 Emulator 와 기기, 모두 빌드를 생성하는 명령어가 같다. 다음 명령어를 실행해보자.

eas build --profile development --platform android

생성된 Development Build 확인하기

다음 화면은 명령어를 실행하고 일정 시간이 지난 뒤, 빌드가 생성난 뒤의 화면이다. 빌드 상세 내용, 기기 혹은 Emulator 에서 실행하는 방법 을 안내 받을 수 있다.

Build details 에 해당하는 링크는 Expo Dashboard 로 이동하여 빌드에 대한 상세 내용을 확인할 수있다.

Open this link on your Android devices (or scan the QR code) to install the app 에 해당하는 링크를 기기로 전송하여, 기기에서 .apk 를 설치할 수 있다. 혹은 기기에서 QR 코드를 인식하는 것만으로도 .apk 를 설치할 수 있다.

Install and run the Android build on an emulator? 라는 질문에 Y 를 입력하면 Android Emulator 에 빌드가 설치된다.

4️⃣ 빌드 사용하기

이제 빌드를 생성하고, 기기 혹은 Emulator 에 설치했으니, 이를 실행해보겠다. Development server 에서 빌드한 결과물을 실행해 볼 수 있다.

Development server 켜기

Emultor 혹은 기기에서 빌드를 설치하고 실행하고나면, 다음과 같은 화면이 뜨는 것을 확인할 수 있다. 이는 앞서 얘기했던 런처 UI 에 해당하는 화면이다.

Start a local development server with: 문구에서 다음 명령어를 입력하여 Development server 를 켜라는 것을 확인할 수 있다. 프로젝트 로 돌아가 터미널에서 다음 명령어를 실행해보자.

npx expo start

위의 명령어를 통해 Development server 를 켜고난 후, Fetch development servers 버튼을 클릭해보면, 런처 UI 에서 빌드가 Development server 에서 실행되고 있음을 다음과 같이 확인할 수있다.