Expo로 앱 개발하기

핵심 개발 루프에 대한 정신적 모델을 구축하는 데 도움이 되는 엑스포 앱 개발 프로세스의 개요다.

이 문서는 Expo 앱의 개발 프로세스를 이해하는 데 도움을 준다.

핵심 개발 루프의 멘탈 모델과 Expo 도구가 어떻게 거기에 부합하는지 이해하는 데 도움이 된다.

핵심 컨셉

다음 개념들을 이해하는 것이 중요하며, 이 가이드의 나머지 부분을 읽을 때, Expo 도구를 사용할 때 이러한 정의를 반복해서 참조하는 것을 권장한다.

Expo app이란 무엇인가?

Expo app은 Expo 도구를 사용하는 React Native 앱 을 나타내는 약어다. "Expo app"은 Expo SDK 단일 패키지 또는 Expo Router, Expo CLI, Continuous Native Generation, 이들의 조합 또는 기타 다른 Expo 도구를 사용할 수 있다.

Expo와 Expo Application Service(EAS)의 차이점은?

Expo는 React Native 앱을 구축하고 유지 관리하는 데 도움이 되는 강력한 도구를 제공하는 오픈 소스 프로젝트다. 예를 들어, Expo CLI, Expo Router 및 Expo SDK 패키지가 있다. 모든 Expo 오픈 소스 도구는 무료로 사용할 수 있으며 MIT 라이선스를 따른다.

Expo Application Services(EAS)는 Expo 및 React Native 프로젝트에서 사용할 수 있는 호스팅 서비스 모음으로 다음과 같은 기능을 제공한다:

• 앱 빌드, 제출 및 업데이트
• 이러한 모든 프로세스에 대한 자동화 설정
• 팀과의 협업

EAS는 Expo 및 React Native 프로젝트에서 발생할 수 있는 몇 가지 문제를 해결하기 위해 물리적 리소스를 제공한다.

1. 무선 업데이트를 위한 애플리케이션 서버 및 CDN:

   • Expo 앱은 JavaScript 번들과 에셋을 포함하는 무선 업데이트(over-the-air updates) 를 통해 새로운 기능과 버그 수정을 배포할 수 있다.
   • 이를 위해서는 업데이트 파일을 호스팅하고 앱에 전달할 수 있는 서버 인프라가 필요하다.
   • EAS는 이러한 업데이트를 제공하기 위한 애플리케이션 서버와 CDN (Content Delivery Network)을 제공한다.
   • 개발자는 EAS를 사용하여 업데이트를 쉽게 배포하고 관리할 수 있으며, 서버 인프라 설정 및 유지 관리에 대해 걱정할 필요가 없다.

2. 빌드 실행을 위한 물리적 서버:

   • React Native 앱을 iOS 및 Android용으로 빌드하려면 Xcode와 Android Studio를 실행할 수 있는 물리적 또는 가상 머신이 필요하다.
   • 개발자 자신의 컴퓨터에서 이러한 빌드를 실행할 수 있지만, 팀 환경에서 일관성과 자동화를 위해서는 전용 빌드 서버를 사용하는 것이 좋다.
   • EAS Build는 iOS 및 Android 앱을 빌드하기 위한 호스팅된 빌드 인프라를 제공한다.
   • 개발자는 코드를 EAS로 푸시하면 EAS에서 앱을 빌드하고 결과 바이너리를 제공한다.
   • 이를 통해 개발자는 로컬 개발 환경에서 빌드 프로세스를 설정하고 관리할 필요 없이 앱을 쉽게 빌드할 수 있다.

EAS는 이러한 서비스를 관대한 무료 플랜으로 제공하므로, 학생이나 취미 프로젝트에 적합하다. 무료 플랜에는 일정 한도의 무선 업데이트 및 빌드 시간이 포함되어 있어 소규모 프로젝트에서 추가 비용 없이 EAS의 이점을 누릴 수 있다.

EAS를 사용하면 개발자는 서버 인프라 및 빌드 프로세스 관리와 같은 복잡한 작업을 처리할 필요 없이 Expo 및 React Native 앱을 더 쉽게 개발, 배포 및 유지 관리할 수 있다. 이를 통해 개발자는 앱 자체에 더 집중할 수 있으며, 특히 소규모 프로젝트나 예산이 제한된 상황에서 도움이 된다.

Git을 사용하기 위해 반드시 GitHub를 사용해야 하는 것은 아니지만, 많은 경우에 도움이 된다. EAS와 Expo도 마찬가지다.

Expo Go: 학습, 실험, 프로토타이핑을 위한 선택적 도구

Expo Go와 Snack을 함께 사용하면 React Native 프로젝트를 더 빠르게 시작하고 기기나 에뮬레이터에서 실행할 수 있다.

그러나 Expo Go와 Snack은 프로덕션 앱을 구축하기 위한 것이 아니다. 프로젝트를 시작하거나 프로토타입을 만들 때는 좋은 도구이다. 앱을 스토어에 배포할 계획이라면 개발 빌드가 더 유연하고 안정적이며 완전한 개발 환경을 제공할 것이다. 이 가이드에서는 Expo Go에 대해 자세히 다루지 않으며, 이 섹션이 Expo Go를 언급하는 유일한 부분이다.

개발 빌드(Development builds)

개발 빌드는 expo-dev-client 라이브러리를 포함하는 앱의 디버그 빌드다. 개발 빌드는 가능한 한 빠르게 반복할 수 있도록 도와주며, Expo Go보다 더 유연하고 안정적이며 완전한 개발 환경을 제공한다. 네이티브 라이브러리를 설치하고 앱 설정을 사용하거나 설정 플러그인을 생성하여 네이티브 프로젝트에 변경 사항을 적용할 수 있다. 로컬에서 개발 빌드를 생성하거나 EAS Build를 사용하여 클라우드에서 빌드를 생성할 수 있다.

Android와 iOS 네이티브 프로젝트

모바일 플랫폼용 React Native 앱은 서로 연결된 두 부분으로 구성된다:

1. JavaScript 앱

이 부분은 React 컴포넌트와 대부분의 (전부는 아니더라도) 애플리케이션 로직을 포함한다. React 웹사이트의 JavaScript와 거의 동일한 역할을 한다.

2. 네이티브 프로젝트

Android 및 Xcode 프로젝트는 JavaScript 앱을 번들로 묶고, 각 플랫폼에서 JavaScript 앱의 실행 환경 역할을 한다. 또한 네이티브 컴포넌트의 렌더링을 처리하고 플랫폼별 기능에 접근하며 설치된 네이티브 라이브러리와 통합하는 수단을 제공한다. 홈 화면에 표시되는 이름, 아이콘, 필요한 권한, 연결된 도메인, 지원되는 오리엔테이션 등과 같은 앱 구성은 네이티브 프로젝트에서 설정된다.

다른 모바일 앱과 마찬가지로, 사용자에게 배포되는 애플리케이션은 Android Studio 또는 Xcode 프로젝트를 컴파일("빌드")하여 생성된다.

npx create-expo-app 으로 새 앱을 초기화할 때, android 또는 ios 디렉토리가 보이지 않을 것이다. npx expo prebuild 를 실행하여 네이티브 프로젝트를 생성할 수 있으며, 이 명령은 네이티브 프로젝트를 초기화한 다음 프로젝트의 Expo 앱 구성(app.json/app.config.js)을 적용한다.

클라우드 기반 개발 워크플로우를 사용하는 경우, 자신의 컴퓨터에서 prebuild를 실행하거나 Android Studio 또는 Xcode를 설치할 필요가 없을 수 있다(물론 이러한 작업이 유용할 수도 있다). 이에 대해서는 아래의 로컬 및 클라우드 기반 개발 워크플로우에서 설명한다.

npx create-expo-app MyApp && cd MyApp && npx expo prebuild
npx create-expo-app --template bare-minimum
npx react-native init MyApp && cd MyApp && npx install-expo-modules

Continuous Native Generation (CNG)

Continuous Native Generation (CNG)은 app.json과 package.json을 사용하여 필요할 때마다 네이티브 프로젝트를 생성하는 Expo 앱 빌드 프로세스다. 이는 package.json에서 node_modules가 생성되는 방식과 유사하다.

네이티브 프로젝트 디렉토리(android와 ios)를 .gitignore에 추가하거나 프로젝트를 언제든지 삭제한 다음, 필요할 때마다 npx expo prebuild 를 사용하여 Expo 앱 구성을 통해서 다시 생성할 수 있다. 클라우드 기반 개발 워크플로우를 사용하는 경우 개발 컴퓨터에서 직접 prebuild를 실행하지 않을 수도 있다.

CNG를 사용하면 React Native의 새 버전으로 업그레이드하는 것이 훨씬 쉬워진다. 프로젝트 유지 관리를 단순화하고 App Clips, 공유 익스텐션, 푸시 알림과 같은 복잡한 기능의 설정을 용이하게 한다. 이는 모두 구성 플러그인을 통해 가능하다.

클라우드 기반과 로컬 개발 워크플로

클라우드 기반과 로컬 개발 워크플로우는 Expo 앱을 개발하고 배포하는 두 가지 주요 접근 방식이다. 선택한 방식에 따라 개발 프로세스와 앱 바이너리 생성 방법이 달라진다.

1. 클라우드 기반 개발 (EAS Build 사용):

   • EAS Build는 Expo의 클라우드 기반 빌드 서비스로, 개발자가 Android Studio나 Xcode를 설치하지 않고도 앱을 쉽게 컴파일할 수 있도록 해준다.
   • eas build 명령을 실행하면 Expo의 클라우드 인프라에서 앱이 컴파일되며, 생성된 바이너리(APK 또는 IPA)를 다운로드할 수 있는 URL이 제공된다.
   • 클라우드 빌드를 사용하면 다른 팀원이나 이해 관계자와 앱을 쉽게 공유할 수 있다. 빌드 과정이 표준화되고 모든 사람이 동일한 환경에서 작업하게 된다.
   • 또한 EAS Build는 iOS 앱을 컴파일하기 위해 Mac 컴퓨터가 필요하지 않으므로, Windows나 Linux에서도 iOS 앱을 빌드할 수 있다.

2. 로컬 개발:

   • 로컬 개발에서는 개발자 자신의 컴퓨터에 Android Studio와 Xcode를 설치해야 한다.
   • 네이티브 프로젝트 디렉토리(android 및 ios)를 생성하기 위해 expo prebuild 를 실행한다.
   • 그런 다음 Android Studio 또는 Xcode에서 직접 빌드를 실행하거나, npx expo run:android 또는 npx expo run:ios 명령을 사용하여 앱을 컴파일할 수 있다.
   • 로컬 개발은 네이티브 디버깅 도구를 사용하여 물리적 기기 또는 에뮬레이터/시뮬레이터에서 앱을 디버그해야 할 때 특히 유용하다.
   • 또한 로컬 개발에서는 네이티브 코드를 직접 수정하고 커스터마이징할 수 있는 유연성이 더 높다.

선택한 방식에 관계없이 JavaScript 코드와 Expo 구성은 동일하게 유지된다. 주요 차이점은 앱 바이너리를 생성하는 방법과 네이티브 코드를 다루는 방식이다.

개발자는 프로젝트의 요구 사항과 선호하는 워크플로우에 따라 클라우드 기반 또는 로컬 개발을 선택할 수 있다. 두 가지 방식을 혼합하여 사용할 수도 있다. 예를 들어, 대부분의 개발 과정에서는 EAS Build를 사용하고, 네이티브 디버깅이 필요한 경우에만 로컬 개발을 사용할 수 있다.

자세한 내용은 EAS Build를 사용한 클라우드 기반 워크플로우와 로컬 개발을 참조한다.

프로젝트 초기화 및 실행

프로젝트 초기화 및 실행은 Expo 앱 개발을 시작하는 첫 단계다. 이 과정에서는 새 프로젝트를 만들고, 필요한 종속성을 설치하며, 개발 빌드를 생성하고 실행한다.

1. 프로젝트 생성:

   • create-expo-app 명령어를 사용하여 새 Expo 프로젝트를 생성한다.
   • 이 명령어는 새 프로젝트를 위한 기본 구조와 필요한 구성 파일을 생성한다.

2. Expo Go에서 실행 (선택 사항):

   • 빠른 실험이나 프로토타입 제작을 위해 프로젝트를 바로 Expo Go에서 실행할 수 있다.
   • 먼저 물리적 기기 또는 에뮬레이터/시뮬레이터에 Expo Go 앱을 설치한다.
   • 그런 다음 프로젝트 디렉토리에서 npx expo start 명령어를 실행하여 개발 서버를 시작한다.
   • Expo Go 앱을 열고 QR 코드를 스캔하거나 URL을 입력하여 프로젝트에 연결한다.

3. 개발 빌드 생성:

   • 대부분의 경우, 프로젝트의 개발 빌드(Development Builds)를 생성하고 사용하게 된다.
   • 개발 빌드는 expo-dev-client 라이브러리를 포함하며, 이를 통해 추가 개발 도구와 기능을 사용할 수 있다.
   • 개발 빌드를 생성하기 전에 npx expo install expo-dev-client 명령어를 사용하여 expo-dev-client 라이브러리를 설치한다.
   • 개발 빌드는 EAS Build를 사용하여 클라우드에서 생성하거나, 로컬 컴퓨터에서 생성할 수 있다.

4. EAS Build로 개발 빌드 생성 (선택 사항):

   • EAS Build를 사용하여 클라우드에서 개발 빌드를 생성하려면 eas build 명령어를 실행한다.
     • npx eas build --profile development --platform android
     • npx eas build --profile development --platform ios
   • EAS Build는 Expo의 클라우드 인프라를 사용하여 앱을 빌드하고, 생성된 바이너리를 다운로드할 수 있는 URL을 제공한다.

5. 로컬에서 개발 빌드 생성 및 실행 (선택 사항):

   • 로컬 컴퓨터에서 개발 빌드를 생성하려면 먼저 npx expo prebuild 명령어를 실행하여 네이티브 프로젝트 디렉토리를 생성한다.
   • 그런 다음 npx expo run:android 또는 npx expo run:ios 명령어를 사용하여 앱을 빌드하고 실행한다.
   • 로컬 개발을 위해서는 Android Studio와 Xcode를 설치해야 한다.

이러한 단계를 통해 Expo 프로젝트를 초기화하고 실행할 수 있다.

핵심 개발 루프

위의 다이어그램에 설명된 핵심 개발 루프는 앱을 개발할 때 일반적으로 거치는 네 가지 주요 활동의 주기다.

• JavaScript 코드 작성 및 실행: 이는 컴포넌트 생성, 비즈니스 로직 작성 또는 네이티브 코드 변경이 필요하지 않은 npm 라이브러리 설치를 포함한다. 여기서 변경한 사항은 앱의 네이티브 측면과의 상호 작용 없이 앱에 반영된다.

• 앱 구성 업데이트: 이는 앱 구성 파일(app.json 또는 app.config.js)을 사용하여 앱의 구성을 수정하는 것을 포함한다. 앱의 이름, 아이콘, 스플래시 화면 및 기타 속성 업데이트가 포함된다. 이러한 변경 사항이 모두 네이티브 프로젝트에 직접 영향을 미치는 것은 아니다. 그러나 네이티브 프로젝트에 영향을 미치는 변경을 하는 경우 앱 구성을 사용하여 네이티브 프로젝트 구성을 수정하거나 구성 플러그인을 생성하거나 사용할 수 있다. 앱 구성 파일에서 사용 가능한 속성의 전체 목록은 앱 구성 레퍼런스를 참조한다.

• 네이티브 코드 작성 또는 네이티브 프로젝트 구성 수정: 이는 네이티브 코드를 직접 작성하거나 네이티브 코드 구성을 수정하는 것을 포함한다. 이러한 변경을 수행하려면 네이티브 코드 프로젝트 디렉토리에 대한 액세스 권한이 필요하거나 로컬 Expo Module을 사용하여 네이티브 코드를 작성할 수 있다.

• 네이티브 코드 수정이 필요한 라이브러리 설치: 이는 라이브러리가 네이티브 코드 프로젝트 구성을 변경해야 함을 의미한다. 라이브러리는 구성 플러그인이나 앱 구성을 업데이트하기 위한 단계를 제공한다. 이전 활동과 마찬가지로 이 작업에도 개발 빌드를 생성해야 한다.

개발 빌드를 생성할 때는 두 가지 옵션이 있다. EAS Build를 사용하여 클라우드 기반 빌드를 생성하거나 로컬에서 수행할 수 있다. 로컬에서 수행하기로 선택한 경우 CNG를 사용한 다음 npx expo prebuild --clean을 사용하거나 npx expo run android|ios 또는 Android Studio 및 Xcode를 사용하여 개발 빌드를 생성할 수 있다.

앱 개발 루프 동안 동일한 디바이스에 앱의 다양한 변형(development, preview 또는 production)을 설치할 수도 있다.

개발 루프의 또 다른 핵심 부분은 디버깅이다. 앱 디버깅에 대한 자세한 내용은 런타임 이슈 디버깅과 디버깅 도구를 참조한다.

테스터와 앱 공유

앱 개발의 다음 단계는 앱을 팀과 공유하고, 베타 테스터와 공유하거나, 여러 테스트 디바이스에서 실행하는 것이다. 전통적인 방법은 앱의 바이너리를 Google Play 베타(Android) 또는 TestFlight(iOS) 에 업로드하는 것이다. 이는 시간이 많이 걸리는 작업일 수 있으며 한 번에 하나의 활성 빌드로만 제한된다(예: TestFlight의 경우).

EAS Build를 사용하는 경우 내부 배포를 통해 테스트를 위해 앱을 공유하는 방법에 대해 자세히 알아보는 것을 추천한다.

앱을 로컬에서 컴파일하는 경우 로컬에서 릴리스 빌드를 생성할 수 있다.

앱 스토어에 앱 출시

앱 스토어에 앱을 출시하려면 EAS Submit을 사용할 수 있다. EAS Submit 사용에 대한 자세한 내용은 Google Play 스토어에 제출 및 Apple App Store에 제출을 참조한다.

로컬에서 릴리스 빌드를 생성하려면 로컬에서 릴리스 빌드를 참조한 다음 앱 스토어 가이드를 통해 앱을 제출한다.

프로덕션에서 앱 모니터링

프로덕션 앱을 모니터링하는 두 가지 방법은 크래시 리포트와 분석이다. 크래시 리포트는 사용자가 앱을 사용하는 동안 발생하는 예외 또는 오류에 대해 알아볼 수 있도록 도와준다. 크래시 리포트를 활성화하려면 Sentry 또는 BugSnag를 사용할 수 있다.

분석을 통해 사용자가 앱과 상호 작용하는 방식을 추적할 수 있다. Expo 및 React Native 생태계에서 사용 가능한 서비스에 대해 자세히 알아보려면 분석 개요를 참조한다.

앱 업데이트

expo-updates 라이브러리를 사용하면 프로덕션 앱에서 앱의 JavaScript에 대한 즉각적인 업데이트를 프로그래밍 방식으로 사용할 수 있다.

EAS Update를 사용하면 React Native 앱에서 즉각적인 업데이트를 지원한다. 글로벌 CDN의 엣지에서 업데이트를 제공하며 HTTP/3와 같은 최신 네트워킹 프로토콜을 지원하는 클라이언트에 사용한다. 또한 EAS Build를 사용하는 개발자를 위해 맞춤 설정되어 있다. 로컬에서 생성한 빌드에도 사용할 수 있다.