Expo 주요 개념 정리

Expo 주요 개념 정리

 

🗝️  Key concepts of Expo

---

Expo app:

Expo app는 Expo tools를 사용하여 개발된 리액트 네이티브 앱을 의미합니다. 여기서 'Expo tools'는 Expo SDK, Expo Go, Expo CLI 등을 포함하여 앱 개발, 테스트, 배포 과정에서 제공하는 다양한 도구와 라이브러리를 지칭합니다.

Expo 앱과 기본 React Native 앱의 개발 프로세스 차이

Expo app과 Expo 도구를 사용하지 않는 리액트 네이티브 앱은 개발 프로세스가 다릅니다. Expo는 다양한 도구와 서비스를 제공하며, 이들은 독립적으로 사용할 수 있습니다. Expo가 제공하는 기능 중 일부는 React Native의 기본 도구에는 없거나 직접 설정이 필요한 것들이 많습니다. 이를 통해 Expo는 개발을 더 쉽고 빠르게 할 수 있도록 돕습니다.

Expo와 Expo Application Services (EAS)의 차이점?

Expo:

Expo는 React Native 앱 개발을 간편하게 해주는 오픈 소스 프레임워크와 도구 모음입니다. 다음과 같은 기능을 제공합니다:

Expo CLI: React Native 프로젝트를 생성하고 관리하는 데 도움을 주는 명령줄 도구입니다.
Expo SDK: iOS와 Android에서 모두 작동하는 사전 구축된 컴포넌트와 API 모음입니다. 카메라, 위치 서비스, 알림 등 다양한 기능을 제공합니다.
Expo Router: 앱 내 내비게이션을 위한 라우팅 솔루션입니다.
Expo Go: 개발자가 네이티브 코드를 빌드하지 않고도 앱을 미리 보고 테스트할 수 있는 모바일 앱입니다.

Expo의 주요 특징:

Expo 도구는 무료이며 오픈 소스입니다. 개발 과정에서의 일관성을 제공하고 다양한 내장 기능과 라이브러리 덕분에 개발 속도를 높여줍니다. 이를 통해 개발자는 기본적인 기능 구현에 더 집중할 수 있습니다.

Expo Application Services (EAS):

Expo 프레임워크를 보완하는 호스팅 서비스 모음입니다. 다음과 같은 기능을 제공합니다:

EAS Build: 앱의 바이너리 파일 (APK, IPA 등)을 클라우드에서 빌드할 수 있는 서비스입니다. 로컬 기기에서 빌드할 필요가 없습니다.
EAS Submit: 앱을 앱 스토어에 자동으로 제출하는 도구입니다.
EAS Update: 앱의 오버 더 에어(OTA) 업데이트를 관리할 수 있는 서비스입니다. 앱 스토어 검토 과정을 거치지 않고도 사용자에게 업데이트를 푸시할 수 있습니다.
EAS Build Automation: 빌드와 배포 과정을 자동화할 수 있는 기능입니다. 환경과 설정 관리를 포함합니다.

EAS의 주요 특징:

EAS는 Expo 프레임워크와 통합되어 작동하지만, 독립적으로 운영되는 클라우드 기반 서비스입니다. 이 서비스를 통해 애플리케이션 서버, CDN, 빌드 서버와 같은 물리적 자원의 문제를 해결할 수 있으며, 상업적 프로젝트와 팀 협업에도 적합한 무료 플랜을 제공합니다. Git을 사용할 때 GitHub를 반드시 사용할 필요는 없지만, GitHub의 기능이 유용한 경우가 많듯이, Expo 프레임워크와 EAS도 서로 보완적인 관계입니다.

 

Expo 오픈 소스 도구를 사용하는 경우 EAS를 반드시 사용해야 하나요?

아닙니다. Expo 프로젝트는 React Native 앱을 쉽게 개발하기 위한 도구이며, 네이티브 앱과 유사한 구조를 가집니다. Fastlane과 같은 다른 네이티브 빌드 및 업데이트 도구를 사용할 수 있습니다. 다만, EAS를 사용하는 것이 더 효율적일 수 있습니다. EAS를 통해 인프라 설정 및 유지 관리에 소요되는 시간과 자원을 절약할 수 있기 때문입니다.

Expo Go:

학습, 실험 및 프로토타입 제작에 유용한 도구입니다. Snack과 함께 사용한다면 더 빠르게 리액트 네이티브 프로젝트를 시작하고 기기나 에뮬레이터에서 실행할 수 있습니다. 그러나 Expo Go와 Snack은 프로덕션 앱을 빌드하기 위한 것이 아닙니다. 프로젝트를 시작하거나 프로토타입을 만들 때 유용합니다. 앱을 스토어에 배포할 계획이라면, 개발 빌드(development builds)를 통해 더 유연하고 안정적인 개발 환경을 제공받는 것이 좋습니다.

 

Development builds:

개발 빌드는 expo-dev-client 라이브러리가 포함된 디버그용 앱 빌드입니다. 개발 빌드는 최대한 빠르게 반복 작업을 수행할 수 있도록 도와주며 Expo Go보다 유연하고 안정적이며 완벽한 개발 환경을 제공합니다. 원하는 네이티브 라이브러리를 설치하고 앱 구성(App config)을 사용하거나 구성 플러그인(Config plugin)을 생성하여 네이티브 프로젝트를 설정하거나 변경할 수 있습니다. 또한, 로컬에서 개발 빌드를 생성하거나 EAS 빌드를 사용해 클라우드에서 빌드를 생성할 수도 있습니다.

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

1. The app JavaScript:

React Native 앱은 React 웹 앱과 유사한 구조를 가지지만, 모바일 환경에 맞춰 최적화된 네이티브 컴포넌트와 API를 사용합니다.

2. The native project:

Android와 Xcode 프로젝트는 단순히 자바스크립트 코드를 담고 있는 그릇 이상의 역할을 합니다. 먼저, 이들 프로젝트는 각 플랫폼에서 자바스크립트 앱을 실행하기 위한 진입점(launchpad) 역할을 합니다. 자바스크립트 코드가 Android와 iOS에서 제대로 동작하려면, 각 플랫폼에 맞게 구성된 프로젝트가 필요합니다. Android Studio와 Xcode는 이러한 프로젝트를 생성하고 관리하는 도구입니다.

또한, 네이티브 컴포넌트 렌더링을 담당합니다. 자바스크립트로 작성된 UI 요소들은 Android와 iOS의 네이티브 컴포넌트로 변환되어 사용자에게 표시됩니다. 이는 사용자가 네이티브 앱을 사용하는 것과 동일한 경험을 제공하기 위한 중요한 과정입니다.
이와 함께, Android 및 Xcode 프로젝트는 플랫폼별 기능 접근을 가능하게 합니다. 예를 들어, 카메라나 GPS 같은 네이티브 기능을 자바스크립트 코드에서 호출할 수 있도록 도와줍니다. 이 과정은 React Native의 핵심 장점 중 하나로, 자바스크립트 코드로 네이티브 기능을 쉽게 사용할 수 있게 해 줍니다.

마지막으로, 앱의 여러 설정들, 예를 들어 앱의 이름, 아이콘, 필요한 권한, 그리고 홈 화면에 표시되는 방식 등은 모두 네이티브 프로젝트 내에서 관리됩니다. 이러한 설정들은 사용자가 앱을 설치하고 사용할 때의 경험을 결정하는 중요한 요소들입니다.
이 모든 과정은 React Native 앱이 각 플랫폼에서 제대로 동작하고, 네이티브 사용자 경험을 제공할 수 있도록 하는 핵심 요소들입니다. Android 및 Xcode 프로젝트는 그저 자바스크립트 앱을 실행하기 위한 도구가 아니라, 앱의 전체적인 사용자 경험을 결정짓는 중요한 부분을 담당하고 있습니다.

모든 모바일 앱과 마찬가지로, 사용자에게 배포되는 애플리케이션은 Android Studio 또는 Xcode 프로젝트를 컴파일(빌드)하여 생성됩니다. npx create-expo-app으로 새 앱을 초기화할 때는 android 또는 ios 디렉터리가 표시되지 않습니다.

네이티브 프로젝트를 생성하려면 npx expo prebuild를 실행하면 됩니다. 이 명령은 네이티브 프로젝트를 초기화하고, 프로젝트의 Expo 앱 구성(app.json/app.config.js)을 네이티브 프로젝트에 적용합니다.
클라우드 기반 개발 워크플로를 사용하는 경우, 로컬에서 prebuild 명령을 실행하거나 Android Studio 또는 Xcode를 설치할 필요가 없을 수도 있습니다(물론, 이러한 작업이 유용할 때도 있습니다).

 

CNG(Continuous Native Generation)

지속적 네이티브 생성(CNG)은 node_modules가 package.json에서 생성되는 방식과 유사하게 네이티브 프로젝트가 app.json 및 package.json에서 온디맨드로 생성되는 Expo 앱을 구축하는 프로세스입니다.

CNG를 사용하면 네이티브 프로젝트 디렉터리(android와 ios)를 .gitignore 파일에 추가한 후에 삭제할 수 있으며, 필요할 때 npx expo prebuild 명령어로 다시 생성할 수 있습니다. 클라우드 기반 개발 환경을 사용하면 로컬 머신에서 prebuild 명령어를 실행할 필요가 없을 수도 있습니다.

CNG는 리액트 네이티브의 최신 버전으로 업그레이드하는 것을 수월하게 하고, 복잡한 기능(예: 앱 클립, 공유 확장, 푸시 알림 등)을 설정하는 데 도움을 줍니다. 이러한 과정은 설정 플러그인(config plugins)을 통해 간편하게 진행할 수 있습니다.

 

Android Studio나 Xcode에서 네이티브 프로젝트 구성을 직접 수정하고 싶은 경우 어떻게 해야 하나요?

CNG(지속적 네이티브 생성)는 Expo 프로젝트에서 네이티브 코드가 필요할 때마다 자동으로 생성해 주는 유용한 도구입니다. 그러나 때때로 Android Studio나 Xcode에서 직접 네이티브 프로젝트를 수정하고 싶을 수도 있습니다.

이 경우, 먼저 npx expo prebuild 명령어를 사용하여 android와 ios 디렉터리를 생성한 후, 생성된 디렉터리에서 직접 수정할 수 있습니다. 하지만 주의할 점은, 이렇게 직접 수정한 내용은 prebuild 명령어를 실행할 때 덮어 쓰이게 된다는 것입니다. 즉, 이후에 prebuild를 다시 실행하면, 이전에 직접 수정한 내용이 모두 사라지게 됩니다.

이러한 직접 수정을 피하고 싶다면 설정 플러그인(config plugins)을 사용할 수 있습니다. 이 방법을 사용하면 네이티브 프로젝트를 직접 수정하지 않고도 필요한 변경을 적용할 수 있으며, 필요시 CNG로 돌아가서 계속 사용할 수 있습니다.

 

언제 다시 prebuild를 실행해야 하나요?

prebuild 명령어는 Expo 프로젝트의 네이티브 코드 부분을 생성하거나 업데이트하는 데 사용됩니다. 프로젝트에 새 네이티브 종속성을 추가하거나 Expo 앱 구성(app.json/app.config.js)에서 프로젝트 구성을 변경하는 경우 npx expo prebuild --clean을 실행하여 네이티브 프로젝트 디렉터리를 다시 생성할 수 있습니다. 이 명령어는 프로젝트 설정을 최신 상태로 유지하고, 변경된 사항이 올바르게 반영되도록 도와줍니다.

새로운 종속성이 네이티브 코드 변경이 필요한지 여부를 확인하려면, 해당 라이브러리의 문서나 ‘타사 라이브러리 호환성 결정’ 가이드를 참조하면 됩니다.

 

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

클라우드 기반 또는 로컬을 선택한다고 해서 개발 루프가 크게 달라지지는 않습니다. 자바스크립트 코드가 실행되는 앱 바이너리를 어떻게 생성하고 배포하느냐에 따라 달라집니다. 클라우드 기반 또는 로컬 개발 중 어느 것을 선택할지는 새로운 네이티브 빌드를 실행할 때마다 결정할 수 있습니다.

클라우드 기반 개발은 EAS 빌드를 사용하여 간편하게 빌드를 할 수 있으며, 별도로 Android Studio나 Xcode를 설치할 필요가 없습니다. 이 방법은 앱을 팀원이나 이해관계자와 쉽게 공유할 수 있는 장점이 있습니다.

반면, 로컬 개발은 Android Studio와 Xcode를 자신의 컴퓨터에 설치해야 하며, 이 도구들을 사용해 직접 빌드를 수행하거나 npx expo run:[android|ios] 명령어를 통해 빌드할 수 있습니다. 이는 네이티브 디버깅 도구를 사용하여 물리적 장치나 에뮬레이터/시뮬레이터에서 앱을 디버깅할 때 유용합니다.

 

핵심 개발 루프

위의 핵심 개발 루프는 앱을 개발할 때 일반적으로 거치는 네 가지 주요 액티비티의 싸이클(Write and run JavaScript code, Update app configuration, Write native code or modify native project configuration, Install a library that requires native code modifications)로, 주요 개념을 한눈에 정리해 줍니다.

 

참고

Guides: Overview | Expo Docs