들어가기에 앞서
하단의 참고한 자료를 바탕으로 비전문가가 정리한 글이므로 오류가 있을 수 있습니다.
오류에 대한 피드백은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.
Expo와 EAS란?
최근 Microsoft가 2025년 3월 31에 App Center의 지원을 종료할 것이라는 발표를 하였습니다. 그 대안으로서, Expo와 Expo Application Services(EAS)를 소개합니다.
React Native와 Expo
Expo는 React Native 앱을 구축하고 유지 관리하는 데 도움을 주는 도구를 제공하는 오픈 소스 프로젝트입니다.
최신 네이티브 버전(0.74)의 공식 문서에서도 Expo와 함께 프로젝트를 구축하길 권장할 정도로 Expo는 과거와 달리 많이 안정화되었다고 생각합니다. 또한, Expo는 파일 기반 라우팅, 고품질 범용 라이브러리, 네이티브 파일을 관리할 필요 없이 네이티브 코드를 수정하는 플러그인 작성 기능 등을 제공하기에, 충분히 React Native와 함께 프로젝트를 구축할만 하다고 생각합니다.
Expo 프로젝트를 생성하시려면 아래의 명령어를 입력해주세요. 해당 명령어는 기본적으로 프로젝트를 타입스크립트 환경으로 구축 하며, Expo CLI, Expo Router 같은 유용한 라이브러리들이 포함됩니다.
npx create-expo-app@latest
Shell
복사
프로젝트를 생성한 후 개발 서버를 실행하려면 아래 명령어를 입력해주세요. http://localhost:8081에서 클라이언트가 번들러와 상호 작용할 수 있는 서버를 시작합니다. 기본 번들러는 Metro입니다.
#개발 서버 실행 명령어
npx expo start
Shell
복사
정상적으로 서버가 실행된다면 개발서버 연결 QR코드와 키보드 커맨드가 보입니다.
아래는 키보드 커맨드 설명입니다.
Keyboard shortcut | 설명 |
A | 연결된 안드로이드 에뮬레이터 또는 기기에서 프로젝트를 실행합니다. |
Shift + A | 안드로이드 에뮬레이터 또는 기기를 선택합니다. |
I | 연결된 IOS 시뮬레이터에서 프로젝트를 실행합니다. |
Shift + I | IOS 시뮬레이터를 선택합니다.(실제기기는 안 보임) |
W | 웹에서 프로젝트를 실행합니다. |
R | 프로젝트를 리로드합니다. |
S | Expo Go 환경과 개발 빌드 환경을 스위칭합니다. |
M | 기기에서 개발 메뉴를 엽니다. (웹은 미지원). |
Shift + M | 기기에서 실행할 개발 툴을 보여줍니다. |
J | |
O | 편집기에서 프로젝트 코드를 엽니다. |
C | 터미널에서 QR코드를 다시 보여줍니다. |
? | 모든 명령어를 보여줍니다. |
EAS
Expo Application Services (EAS)는 Expo와 React Native 프로젝트에서 사용할 수 있는 호스팅 서비스 모음으로, 주로 사용하는 기술들인 build, submit, update에 대해 알아보겠습니다. Expo사의 클라우드 서비스를 이용해야 하므로 사전에 회원가입을 완료해주세요.
Build
EAS Build는 앱 바이너리(기기에 설치하는 apk,aab,ipa)를 구축하기 위한 호스팅 서비스입니다. 쉽게 말해 직접 복잡한 작업을 하지 않아도 앱을 자동으로 만들어주는 서비스라고 생각하시면 됩니다.
빌드 과정은 다음과 같습니다.
1.
터미널에서 EAS 서비스와 상호 작용하는데 사용하는 명령툴 설치
# 공식 문서에서는 yarn보다는 npm을 통한 설치를 권장합니다.
# npx eas-cli@latest 명령어를 사용하셔도 됩니다.
npm install -g eas-cli
# 권한 설정 문제 발생시 sudo를 넣어주세요
sudo npm install -g eas-cli
Shell
복사
2.
Expo 계정 로그인
# 이미 계정 연동을 완료하셨으면 이 과정은 스킵하시면 됩니다.
eas login
Shell
복사
3.
EAS 클라우드 서버와 연동하기 위한 프로젝트 설정
eas build:configure
Shell
복사
대쉬보드. 프로젝트 목록이 보임.
자동 생성된 초기 eas.json 설정
eas.json을 보시면 build 섹션에 development, preview, production 프로필이 자동으로 정의되어 있는 걸 알 수 있습니다. 저의 경우에는 개발할 때 development 프로필 설정은 무시하고 로컬 빌드로 진행하였으며, 개발 완료 후 내부 테스트는 preview 빌드로 , 출시는 production 빌드로 진행했습니다.
# local build
npx expo run:android
npx expo run:ios
# preview 빌드
eas build --profile preview --platform all
# production 빌드
eas build --profile production --platform all
Shell
복사
EAS로 앱 생성부터 배포까지 상세하게 진행하고 싶으시다면 제 블로그 글을 참고해주세요. 
Submit
eas submit은 사실 별거 없습니다. 말 그대로 빌드한 앱을 스토어에 “제출” 하는 것이기 때문입니다.
제출하는 상세 과정은 위의 제 블로그 글인 ios편과 android편을 참고해주세요.
저 같은 경우에는 빌드와 동시에 제출하도록 package.json에 스크립트로 작성했습니다. 아래와 같이 —atuo-submit 플래그를 지정하면 빌드가 완료된 후 자동으로 제출까지 진행됩니다.
"build:preview:all": "eas build --profile preview --platform all --auto-submit",
"build:preview:ios": "eas build --profile preview --platform ios --auto-submit",
"build:preview:android": "eas build --profile preview --platform android --auto-submit",
"build:production:all": "eas build --profile production --platform all --auto-submit",
"build:production:ios": "eas build --profile production --platform ios --auto-submit",
"build:production:android": "eas build --profile production --platform android --auto-submit",
JSON
복사
Update
EAS Update는 앱의 업데이트를 실시간으로 사용자에게 배포하는 서비스를 제공합니다. 코드 푸시(Code Push)와 비슷한 기능을 하며, 사용자가 앱을 다시 설치하지 않고도 최신 버전을 사용할 수 있도록 합니다. 또한, 네이티브 코드에 관한 수정은 불가하고 스타일, 이미지, 스크립트코드 등 비네이티브 코드만 수정 가능합니다.
Update에서 중요한 개념 중 하나는 바로 Channel입니다. 채널은 여러 빌드에 쉽게 식별할 수 있는 이름으로 설정되며 eas.json에서 정의할 수 있습니다. 즉, eas.json의 빌드 섹션에서 정의한 preview, production 프로필에 “channel” 옵션을 설정하면 해당 프로필로 생성한 빌드들이 “channel” 옵션에서 설정한 이름에 소속되게 됩니다. 프로젝트에 update 설정을 진행하시려면 아래 명령어를 입력해주세요.
npx expo install expo-updates
eas update:configure
Shell
복사
# eas.json
{
"build": {
"preview": {
"channel": "preview",
},
"production": {
"channel": "production",
}
},
}
JSON
복사
# app.config.ts 또는 app.json
updates: {
url: 'https://u.expo.dev/abcd',
},
runtimeVersion: '1.0.0',
JavaScript
복사
상단과 같이 eas.json에서 채널 관련 설정을 완료하고, app.config.ts(js) 또는 app.json에서 update 관련 설정을 추가하면 eas update를 진행할 시, 자동으로 동일한 이름을 가진 Branch와 호환 설정이 됩니다. 이름에서 눈치챌 수 있듯이, 브랜치는 정렬된 커밋 목록인 Git 브랜치와 유사한 정렬된 업데이트 목록입니다. 기본적으로 branch의 이름은 채널의 이름과 동일하게 설정되며, 원하는 이름으로 변경 가능합니다.
eas update 명령어를 사용하여 업데이트를 게시하면 새 업데이트 번들이 생성되어 EAS 서버에 업로드됩니다. branch 이름은 업데이트를 식별하는 데 사용되며 업로드된 번들과 연결됩니다.
업데이트가 빠르고 안정적으로 이루어지려면 업데이트를 최대한 작게 유지하는게 중요합니다. 한번에 너무 많은 업데이트를 진행하면 다소 시간이 걸릴 수 있습니다.
여담
무료 플랜 빌드 횟수 제한
무료 플랜의 경우 한달에 ios 15개 , android 15개로 총 30개의 빌드를 생성할 수 있습니다. Expo.dev의 Account settings > billing 탭에서 현재까지 빌드한 횟수를 확인가능합니다.
한가지 팁을 드리자면 빌드를 삭제하면 차감되었던 횟수가 다시 원상복구됩니다. 어차피 무료플랜의 경우 빌드 파일을 다운로드할 수 있는 기간이 최대 30일이므로, 혹시라도 30회를 전부 채우셨으면 오래된 빌드는 삭제하시고 다시 빌드를 진행하시면 됩니다.
EAS Secrets
일반적으로 .gitignore를 통해 노출해서는 안 되는 정보를 담아 놓은 파일인 .env파일을 커밋 목록에서 제외합니다. 이로 인해 원격 서버에서 실행되는 EAS 빌드 작업은 .env 파일 사용이 불가합니다.
바로 이런 상황에서 활용할만한 것이 EAS Secrets입니다. EAS Secrets는 name,value 형식으로 문자열이나 파일을 저장하는 도구입니다. 계정 전체 적용 secrets는 최대 100개, 프로젝트별 secrets도 최대 100개까지 저장가능합니다. EAS Secrets는 expo 웹사이트나 EAS CLI를 통해 생성 및 관리가 가능합니다.
다음은 EAS CLI를 통해 secrets를 생성하는 방법입니다.
1.
현재 프로젝트에 해당하는 secret 생성
eas secret:create --scope project --name 원하는이름 --value 원하는값 --type string
Shell
복사
2.
생성 확인
eas secret:list
Shell
복사
3.
.env 파일에 적힌 값을 import 하는 방법도 있습니다.
# local에 존재하는 .env 파일의 값을 importing하는 명령어
eas secret:push --scope project --env-file .env
Shell
복사
위와 같이 계정에 저장된 secrets는 eas build시 활용되며, app.config.js 또는 app.json에서 정의한 환경 변수 값에 맞게 삽입됩니다.
저의 경우에는 주로 카카오 API key를 secrets 에 저장 및 활용하였습니다.
