Expo의 새로운 빌드 시스템 EAS build와 Expo Development Client

Dev-Yuns
Cross-Platform Korea
7 min readJul 11, 2021
Photo by Randy Fath on Unsplash

지난 4월 EXPO SDK 41이 릴리즈되면서 EAS build 라는 개념이 소개되었습니다. 이번 SDK 42의 릴리즈 포스팅에서도 역시 EAS build가 점점 개선되고 있음을 강조하고 있습니다. 이번 포스팅에서는 Expo의 새로운 개념인 EAS build와 함께 Managed workflow에서 개발 효율을 높여줄 수 있는 Expo Development Client를 기존 빌드 시스템과의 비교를 통해 알아보겠습니다.

기존 Expo managed workflow의 빌드 시스템

React native로 개발을 진행할 때, 보통 Expo의 SDK를 사용한 Managed workflow와 Bare workflow 중 하나를 선택하게 됩니다. Managed workflow에서 네이티브 코드에 대한 부분은 Expo에 의해 ‘Managed’ 되고, 개발자는 오직 자바스크립트/타입스크립트를 통한 앱 로직에만 집중할 수 있습니다. 또한 개발 중인 앱은 따로 빌드 과정을 거치지 않고 React native를 실행할 수 있는 런타임을 내장한 Expo go라는 앱을 통해 앱의 Preview를 얻을 수 있도록 해줍니다. Expo의 SDK 버전은 이 런타임의 버전을 일컫습니다.

Bare workflow와 가장 큰 차이점이 여기에서 나타납니다. 일반적인 React native 프로젝트에서는 프로젝트 폴더 내에 네이티브 코드를 관리하기 위한 iosandroid 폴더가 존재합니다. 반면 Expo 프로젝트에서는 네이티브 코드는 찾아볼 수 없고 리액트 프로젝트와 구조가 유사합니다.

Managed workflow에서 네이티브 코드를 신경쓰지 않고 개발할 수 있는 이유는 빌드 시스템과 관련이 있습니다. 개발 중에는 자바스크립트 코드를 바로 Expo go의 런타임 환경에서 실행할 수 있습니다. 그리고 준비된 앱을 expo build 명령어를 통해 build를 시도하면 turtle 이라는 빌드 도구를 사용합니다. turtleexpo build명령어를 통해 업로드된 자바스크립트 파일들을 미리 빌드된 shell app 리소스에 복사하여 app signing credential로 서명하여 Shell app 을 만듭니다.

turtle은 미리 빌드된 ‘껍데기 앱(Shell app)’에 자바스크립트 파일을 업로드 하는 형식이기 때문에 만약 추가적인 native module이 필요할 경우, expo install 명령어를 통해 제공되는 패키지만 사용할 수 있습니다. Expo에서 지원하지 않는 모듈이 필요한 경우, expo eject 를 통해 expo를 걷어내고 Bare workflow에서 작업을 진행해야했습니다.

Managed workflow에서 앱의 개발 사이클

Managed workflow는 통상적으로 앱 개발에 사용되어지는 패키지 들을 포함하고 있지만 아래와 같은 니즈들이 존재해왔습니다.

  1. Expo sdk에서 지원하지 않는 라이브러리를 사용하고자 하는 니즈
  2. 사용하지 않는 삭제하여 앱의 번들 사이즈를 줄이고자 하는 니즈
  3. 다른 라이브러리가 존재하지 않는 네이티브 코드를 추가하고 싶다는 니즈

그리고 이러한 필요성을 Managed workflow를 벗어나지 않고 충족시키기 위해 개발자로 하여금 자신의 런타임을 Customizing 할 수 있도록 해주는 기능들이 나타나게 됩니다.

커스터마이징 가능한 런타임 환경

커스터마이징 될 수 있는 런타임 환경은 개발 모드와 프로덕션 모드 2가지로 구분할 수 있습니다. 기존의 workflow에서는 개발 모드는 Expo go에서, 프로덕션 모드는 패키징된 앱에 expo updates를 통해 수정할 수 있었습니다. 이제는 개발 모드에서는 expo-dev-client 를, 프로덕션에서는 EAS build 를 사용할 수 있습니다.

Expo Development Client

이제 개발자는 Expo Development Client를 통해 Managed workflow에서 개발 중인 런타임을 직접 사용자 지정할 수 있습니다. 기존 Expo go와 동일한 사용 경험을 제공하지만, 각각의 커스텀된 런타임 환경을 구성할 수 있습니다. Client의 디버그 빌드를 생성하면, 개발 클라이언트를 구성할 수 있고, 여기에서 릴리즈 빌드를 생성하면 커스텀된 런타임이 만들어집니다.

개발 클라이언트를 한번 빌드하고 나면 자바스크립트/타입스크립트를 통한 앱의 비즈니스 로직에 집중할 수 있으며, 만약 새로운 네이티브 코드를 작성하거나 설치하려는 경우 다시 개발 클라이언트 단으로 돌아가서 빌드를 시도하면 됩니다. 개발 클라이언트 패키지에 포함된 config plugin 을 통해 prebuild 단계에서 클라이언트를 자동으로 구성할 수도 있습니다. 또한 EAS Build 내부에 Internal Distribution이라는 기능을 통해 동료들간에 런타임 환경을 공유할 수도 있습니다.

EAS Build

EAS는 Expo Application Service의 준말로, 클라우드 빌드 서비스입니다. EAS build는 실행 시 새로운 VM을 구성하고 여기에 프로젝트를 다운로드합니다. 자바스크립트 의존성과 네이티브 의존성을 설치하고 난 후, fastlane 혹은 gradle을 사용하여 빌드를 시작합니다. 빌드가 완료되면 서명과 함께 바이너리를 만듭니다.

이제 managed workflow 프로젝트를 EAS build할 수 있는 상태로 만들기 위해 eject 명령어와 별개로 javascript 앱을 기반으로 하는 ios 및 android 프로젝트를 생성하고 구성할 수 있습니다. 이 새로운 명령어를 prebuild 라고 합니다.

EAS Build에서 prebuild 명령을 실행한 다음, RN 앱과 같이 결과 프로젝트를 빌드하기만 하면되고 여기에는 더 이상 shell app은 없습니다. 이 과정에서 개발자는 사용하지 않는 네이티브 패키지를 삭제하여 앱의 사이즈를 크게 줄일수도 있습니다. 또한 prebuild에는 config plugin이라는 툴을 사용할 수 있습니다. 이것은 prebuild 과정에서 실행되는 기능으로써 네이티브 코드를 핸들링할 수 있습니다.

결론

Expo Development client와 EAS build의 등장으로 인해 네이티브 패키지가 필요한 경우 expo를 걷어내지 않고 workflow를 유지할 수도 있습니다. Expo가 제공하는 기능이 점점 확장되면서 앱 개발의 편의성이 점점 더 증대되는 것 같습니다. 개발 생산성 증대를 위해 Expo를 채택해보는 것도 좋은 선택이 될 수 있을 것 같습니다.

Reference

--

--