프랑스 스타트업 Alan의 기술 블로그를 의역/요약한 글입니다.

---

Alan은 React Native를 줄곧 사용해왔습니다. 모바일 개발 환경을 웹 개발 환경과 유사하게 만들어 줄 뿐만 아니라 네이티브 코드 의존성과 iOS, 안드로이드의 차이를 어느 정도 대신 맡아줬기 때문이죠.

하지만, 최근에 React Native 기반 모바일 개발 환경에서 Expo로 마이그레이션을 진행했습니다. 그 이유와 여정을 지금부터 공유하려고 합니다.

왜 Expo인가 ❓

Expo는 React Native 위에 일렬의 툴을 구축한 생태계입니다. Expo에서 구현한 코드들을 사용하면 대부분의 네이티브 기능을 조작할 수 있고, iOS와 안드로이드를 로컬에서 컴파일 할 필요가 현저하게 줄어들어 개발 속도에서 큰 이점을 가지고 있습니다.

Alan의 엔지니어들은 풀스택 엔지니어들이지만, 네이티브 기능을 다루는데 미흡한 면이 있었습니다. 모바일 앱에 좀 더 원활한 기여를 바랬던 우리에게 Expo는 아주 좋은 선택지였습니다.

Expo에서 최근 릴리즈한 expo-dev-client와 expo-config-plugins가 Alan이 Expo를 선택함에 있어 주요했습니다.

React Native 앱의 구조 📱

우선 Expo에 대해 이야기하기 전에 RN의 구조를 잠시 살펴볼 필요가 있습니다. RN 앱의 코드는 2개의 영역으로 나뉘어져 있습니다.

• 앱의 코어 로직을 구현하는 JavaScript 영역. 개발의 대부분은 여기서 이루어집니다.

• 카메라, 파일 시스템 등 네이티브 기능을 쉽게 조작하기 위한 네이티브 모듈.

JavaScript 코드는 하나의 파일로 번들링 되고, 네이티브 코드가 이를 불러와서 사용하게 됩니다. 네이티브 코드는 바이너리로 컴파일 된 후 기기에 설치 됩니다.

Expo Dev Client

RN의 구조를 봤을 때, 우리에게 필요한 건 JS 코드를 싣고 원하는 네이티브 기능들을 포함 할 수 있는 커스텀 앱 뼈대가 필요했습니다. expo-dev-client가 딱 안성맞춤이었어요.

Continuous Native Generation

네이티브 앱을 지속적으로 관리하는 것은 어려운 일입니다. 심지어 앱이 크로스 플랫폼이라면 더 말 할 것도 없죠. 앱이 커지면 커질수록 관리해야 하는 것들이 많아지고 개발자들이 네이티브로 개발하고자 하는 의지를 꺾고 개발 속도에 영향을 주게 됩니다.

다행히 이런 문제점들을 해결하고자 하는 사람들은 많았고 Continuous Native Generation이라는 기술이 만들어졌습니다. CNG는 템플릿 또는 설정 파일에 정의된 값들을 인풋으로 사용해서 필요한 네이티브 코드를 생성해주는 추상적인 개념입니다. CNG의 결과물은 보통 네이티브 앱으로 컴파일 가능한 네이티브 프로젝트입니다. Expo Prebuild의 프로세스 또한 CNG를 사용해서 RN 프로젝트를 생성하고 있습니다.

Expo Config Plugins

expo-config-plugins는 CNG 과정에서 네이티브 코드를 커스텀 할 수 있고 네이티브 의존성 관리를 도와줍니다. expo-config-plugins는 커스텀 네이티브 기능이 필요할 때 특히 유용합니다.

마이그레이션 🧳

4개의 앱을 Expo로 마이그레이션 해야 했고 아주 길고 험난할 것을 예상했습니다. 마이그레이션 전에 우리는 2가지를 염두 해두었습니다.

1. 마이그레이션 브랜치와 머지 지옥 피하기

2. 네이티브 코드 찾고 분류하기

마이그레이션 브랜치와 머지 지옥 🔥

마이그레이션이 진행되는 동안에 다른 개발자들이 앱 기능을 지속적으로 개발해야 했기 때문에 마이그레이션 브랜치를 새로 생성하는 방법을 선택하는 게 가장 먼저 떠오른 방법이었습니다. 다만, 마이그레이션 브랜치와 기능이 출시되는 브랜치 간 싱크를 계속 맞춰야 하는 번거로움이 있습니다. 그래서 저희는 새로운 프로젝트를 모노레포에 만드는 방식을 선택했습니다. app-1과 app-1-expo라는 디렉토리를 나눈 뒤, 엔트리 포인트에서 둘 다 같은 앱 컴포넌트를 사용하도록 했습니다.

이렇게 구성하면 앱은 개발을 계속 이어나갈 수 있고, 우리는 마이그레이션 도중 앱이 깨지는지 확인을 쉽게 할 수 있습니다. Expo로 마이그레이션이 끝나면 단순히 Expo 버전의 앱만 배포하고 예전 버전은 선셋 시키면 됐습니다.

네이티브 코드 찾고 분류하기 🖥️

Alan의 RN 코드는 7년 넘은 것도 있습니다. RN 생태계에서 이건 거의 우주의 탄생 때부터 함께한 코드죠. 긴 세월 동안 우주에는 많은 변화가 있었기도 하고, 때론 우리의 아주 세부적인 요구사항을 충족 시키기 위해 프로젝트 내 네이티브 코드는 진화해왔습니다.

결론적으로 우리는 네이티브 코드를 천천히 파악한 뒤, 분류하는 작업을 진행했습니다.

• 네이티브 기능을 위해 우리의 커스텀 네이티브 코드를 딱히 변경할 필요 없는 경우

• Alan의 요구사항에 맞추려면 네이티브 코드에 사전 작업이 필요한 경우

마이그레이션 할 때 문제가 되는건 보통 후자입니다. 그래서 우린 후자를 좀 더 세분화하고 각 항목 별로 액션 아이템을 만들어두고 작업했습니다.

• expo-config-plugin을 지원하는 네이티브 코드의 경우 expo-dev-client에 쉽게 올림

• 지원하지 않는 경우, expo-config-plugin을 지원하는 다른 대체제를 찾아보고 변경할 필요가 있는지 확인해 봄

• 위의 두 방법이 안될 경우, 우리가 직접 플러그인을 만들어냄 🔨

총 30개 가량 내부 Expo config plugin을 제작했고 4개의 앱을 마이그레이션 하는데 대략 6개월이 소요됐습니다.

Expo가 우리 CI에 미친 영향

우리는 expo-dev-client로 빌드한 앱을 90명 정도 되는 개발자들에게 공유할 방법을 찾아야 했습니다. Expo에서 Expo Application Services라는 서비스를 제공하고 있고 아주 유용합니다. 하지만, 우리는 유구한 역사를 가진 CI와 복잡한 배포 파이프라인을 마음대로 도려낼 수 없었기에 기존 CI에 Expo를 어떻게든 끼워넣는 방법을 모색했습니다.

우선 Expo 앱을 생성하는 CI를 만들었고 기존에 사용하고 있던 Fastlane으로 앱 컴파일 및 스토어 제출을 자동화 시켰습니다. 이후, expo-dev-client로 만들어진 프로젝트 앱을 빌드하고 AppCenter와 S3로 배포하는 플로우도 새롭게 추가했습니다.

AppCenter는 개발자들이 실제 기기 (iOS, Android)에서 앱을 설치 후 테스트할 수 있게 하기 위함이고 S3는 시뮬레이터에 쉽게 설치할 수 있도록 하기 위함이었습니다.

기나긴 여정의 끝

우린 S3에 있는 expo-dev-client 빌드를 다운 받아서 시뮬레이터에 설치하는 간단한 스크립트를 생성했고 yarn 스크립트에 추가했습니다.

제품 개발자들은 이제 `yarn workspace app-1 install-dev-client -p [ios|android]` 커맨드 하나로 시뮬레이터에서 앱을 손쉽게 실행할 수 있게 되었습니다.

마이그레이션의 결과

Expo로의 전환은 모바일 개발 환경에 큰 변화를 주었고 개발 환경이 개선 된 것에 대한 긍정적인 내부 피드백이 정말 많았습니다. 심지어 신규 입사자 온보딩에서 모바일 웹 개발 환경을 초기 설정하는 단계도 간소화되었습니다.

숫자로 보면:

• ~7분 걸리던 로컬 빌드 타임은, S3에서 다운받고 앱을 설치하는 것 포함, ~2분으로 축소

• 지난 5년 간의 네이티브 코드 변경을 추적했는데 대략 달에 200번의 변경 사항이 포함되었습니다. Alan에는 총 90명의 개발자가 있습니다.

  • 만약 200번의 변경 사항 중 10% 정도가 로컬에서 앱 빌드가 필요하다고 가정하고, 대략 20%의 엔지니어가 이 작업을 수행한다고 했을 때, 달에 30시간 정도를 절약할 수 있습니다.

더 이상 Xcode, Xcode 서명, Android와 자바의 버전 이슈를 신경 쓸 일이 없어졌습니다!

---

예전에 Expo Go로 RN 앱을 만들어서 테스트 했던 기억이 있는데, 못 본 사이 아주 많은 발전이 있었네요. Expo 앱 클라이언트를 설정 파일로 커스텀하게 만들 수 있는게 정말 좋은 것 같아요. 앱 개발 할 때 빌드 기다리고 설정 깨지고 기기마다 다른 환경이 정말 짜증나는 일인데 그걸 어느 정도 유하게 만들어주는 것 같습니다.

원글: https://medium.com/alan/our-journey-from-react-native-to-expo-for-mobile-app-development-at-alan-%EF%B8%8F-3b1569e8ab7c