[Expo] Expo 앱과 구성 파일, 개발주기에 대하여, EAS(Expo Application Services)란?

오랜만입니다!

정말 오랜만에 글을 쓰는 것 같네요! 사실 12월 중순부터 창업팀에 들어가게 되서 많이 바빴습니다.

작은 규모의 창업팀에서 기획 단계부터 시작해서 고도화를 했습니다! 원래는 더 빨리 끝낼 수 있어야 하는데 개발과 빌드, 배포까지 하려다 보니 많이 늦어졌더라구요.. 그래서 다시 블로그로 정리를 시작하려고 합니다. 

진행했던 프로젝트는 1차 MVP 개발이 끝나구 짧은 테스트 기간을 가졌고 이제 정부지원사업에 제출할 문서들을 정리중입니다.

문서같은 것은 기획/경영 해주시는 분들이 계셔서 며칠 밤새시면서 작업하실것 같네요.. 저는 글솜씨가 없어서 그런거 잘 적으시는 분들이 참 존경스럽습니다! 블로그라도 작성하면서 글솜씨 향상 목표 겸 기록용 해야죠..!

 

---

오늘은 Expo로 프로젝트를 진행했는데 구현했던 것과 빌드 도구 등을 공유하고 싶어서 내용을 적어보려고 합니다!

Expo 프로젝트를 진행하면서 EAS(Expo Application Services)가 없었더라면 계속 삽을 팠을 거고 개발 기간이 무한대로 늘어났을 거에요(너무 감사합니다!!)

그리고 너무 급해서 깊이 있게 공부하지 못했던것 것들도 공부하고 싶어서 오랜만에 포스팅 겸 작성해보려고 합니다!

 

 

Expo 도구를 사용하는 React Native 앱을 설명하는 데 사용하는 약어입니다.

 

1.  Expo 앱

앞서 말씀 드린것 처럼 Expo는 React Native와 연동할 수 있는 클라우드 시스템, 프레임워크인데 Expo 프로젝트를 새로 생성할 수 있습니다. 

제가 처음 접했을 때 React Native로 개발하려고 했지만 초기 설정이 오래 걸리구 에러가 많이 생겨서 Expo 앱으로 전환했던것 같습니다. 물론 다른 장단점이 있었지만 단기간에 빠르게 개발하려면 Expo 앱으로 만들어야 해서 Expo 프로젝트를 접하게되었습니다.

Expo, React Native의 차이와 장단점은 예전에 작성해둔 블로그가 있었는데 못찾겠네요 이건 찾으면 수정해두겠습니다

 

 

2. Expo 프로젝트 생성하기

Expo 프로젝트를 생성할 떄는 Node가 설치되어 있어야 합니다.

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

노드는 완전 최신 버전 보다는 안정된 버전을 설치하시는 게 좋습니다

그리고 추가적으로 NVM이라는 게 있는 Node Version Manager라는 게 있습니다. 노드 버전을 관리해주는 건데 나중에 자세하게 작성해보겠습니다.

Node를 설치하면 expo 프로젝트를 생성할 수 있습니다 cmd창이나 터미널에 아래의 코드를 실행해주시면 됩니다!

 

npx create-expo-app@latest
npx create-expo-app@latest <프로젝트 이름>

 

1. Expo 주요 파일 정리

React나 React Native를 보면 설정해주는 파일의 index.js나 package.js, app-config.js 등이 있습니다. Spring에서는 gradle파일 처럼 환경 설정해주고 프로젝트를 실행할 때 설정이나 설치해야하는 것 등이 있습니다. React Native와 Expo는 다른 점이 없지만, 제가 Expo 프로젝트를 EAS를 사용하여 필요한 파일의 목록과 그 파일들의 역할을 정리해보겠습니다.

 

1. app.json, app.config.js

app.json은 Expo 프로젝트의 기본적인 정보를 작성하는 겁니다. 

간단하게 앱의 이름, 설명, 아이콘 이미지, android&ios 설정 등이 있습니다. 자료 조사하면서 쓸만한 것들을 찾아보면서 괜찮아보이는 것과 제가 실제로 사용했던 내용을 알려드리겠습니다.

보통 앱을 만들면 자동으로 생성되는데 아래의 링크에서 app.json와 app.config.js의 속성과 설명을 확인할 수 있습니다. 

https://docs.expo.dev/versions/latest/config/app/

app.json / app.config.js

sdkVersion(유형: string) : 프로젝트를 실행할 Expo sdkversion입니다. package.json과 일치해야합니다.

version(유형: string) : 앱 버전입니다. ios.buildNumber, android.versionCode과 동일해야 합니다. (저는 eas를 사용해서 build 할 때마다 자동으로 version이 올라가도록 설정했었습니다)

githubUrl(유형: string): 깃허브 링크를 연동하여 소스코드를 공유하고 싶을 때 사용 가능합니다.

backgroundColor(유형 : string) : 앱의 배경색 입니다. 만약 다크모드와 라이트 모드를 사용하게 되면 배경색이 달라지는 데 아니라면 기본 배경색을 지정할 수 있습니다.

icon(유형: string): 앱의 아이콘 이미지입니다. 프로젝트 내에 있는 이미지, 1024x1024 크기가 좋습니다.

 

제가 사용했던 내용은 푸시 알림 기능을 구현하였습니다. expo의 notification을 사용했고 앱을 종료 했을 때, 앱을 실행하더라도 채팅 페이지가 아니라면 알림이 전송하도록 구현을 했었습니다. 급하게 만든 거였는데 덕분에 빠르게 구현할 수 있었습니다ㅠㅠ 

notification (유형: object)

이건 object 타입이라서 아래처럼 사용하실 수 있습니다.

"notification": {
      "icon": "아이콘 이미지 링크(안드로이드 전용)",
      "color": "색상",
      "iosDisplayInForeground": true
      "androidMode": "default",
      "androidCollapsedTitle": "운동 알림",
    },

안드로이드는 위 내용과 같이 적용해줘도 되는 것 같지만 ios는 제한 사항이 많아서 Apple development에서 APNS를 설정해줘야 합니다. 이 내용은 추후에 업로드 하겠습니다. EAS로 쉽게 생성할 수 있답니다.

그리고 이 notification은 google 클라우드 메시징, APNS을 사용하게 된다면 eas.json을 설정해줘야 합니다. 

그리고 plugins를 설정해줘야 합니다.

 

androidStatusBar(유형: object)

안드로이드의 경우에 상태 표시줄을 구성요소입니다. <StatusBar> 태그와 비슷하다고 생각하시면 될 것 같습니다.

제가 구현했을 때 디자인 때문에 다크모드, 라이트모드를 바꿔줬어야 했는데 <StatusBar> 태그도 android만 적용이 됩니다..

"androidStatusBar": {
	"barStyle": "light-content or dark-content 둘중 하나 default: dark-content"
    "backgroundColor": "string"
    "hidden": true/false
    "translucent": true/false
}

hidden은 표시 여부 입니다. defualt는 false입니다.

translucent는 true인 경우 상태바가 앱의 콘텐츠 위에 떠있는 것이고 false라면 상태 표시줄이 앱의 콘텐츠를 아래로 밀어냅니다.

 

plugins(유형 : 배열) : 프로젝트에 추가 기능을 추가하기 위한 구성 플러그인 목록입니다.

예를 들어 카메라를 사용하려고 한다면, 

npx expo install expo-camera

Expo 카메라를 설치하고 plugins에 추가해줍니다. 아래는 여러 plugin이 필요할 때 배열로 넣어주는 방식입니다.

"plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera."
        }
      ]
    ]

splash(유형: object) : 앱의 로딩 및 시작 화면에 보여질 것입니다.

그냥 expo를 실행하면 expo 로고와 실행 로그가 나옵니다. 하지만 이 로딩 화면을 꾸며주는 것 설정 시 사용합니다.

"splash" : {
	"backgroundColor" : "string"
    "resizeMode" : "cover or contain 중 하나"
    "image" : "string"
}

resizeMode의 default 값은 contain입니다.

 

이것들 외에도 ios, android, web에 설정하는 것들도 있는데 주로 사용하는 것을 일단 정리해봤습니다.

위 링크를 통해서 더 자세하게 확인 할 수 있습니다!

 

 

 

2. bable.config.js : 

Bable이란 자바스크립트 컴파일러입니다. Expo 문서에서는 '최신 JavaScript(ES6+)를 모바일 기기의 JavaScript 엔진과 호환되는 버전으로 변환하는 JavaScript 컴파일로 사용됩니다'라고 설명했습니다. 

일단 bable.config.js를 만드려면 터미널에 아래의 명령을 실행해줍니다.

npx expo customize

위 명령어는 다양한 구성 파일을 생성하도록 합니다. 여기에서 bable.config.js를 선택합니다.

그러면 루트에 아래와 같이 생성된다고 합니다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

문서에 bable-preset-expo 라는 게 있는데 기본 React Native 사전 설정( @react-native/babel-preset)을 확장하고 트리 쉐이킹, 번들 분할, React Server Components, Hermes 컴파일, 고급 데드 코드 제거, 재생성, Expo DOM 구성 요소, 서버 사이드 렌더링 등에 대한 지원을 추가합니다. 

 

저는 테일 윈드를 사용할 때 bable.config.js를 사용했는데 bable-preset-expo를 사용해서 tailwind와 연동 했습니다. 더 자세한 내용은 추후에 작성해야 겠네요

https://github.com/expo/expo/tree/main/packages/babel-preset-expo

expo/packages/babel-preset-expo at main · expo/expo

 

 

 

3. metro.config.js : 

Expo CLI는 JavaScript 코드와 에셋을 번들링하는 동안 Metro를 사용합니다. 

Metro도 커스텀해서 파일을 생성해줍니다. 아래의 명령어를 실행해줍니다.

npx expo customize metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

module.exports = config;

그러면 metro.config.js 파일이 생성됩니다.

이것도 테일 윈드를 사용하고 앱에 적용하기 위해서 시행착오를 겪으면서 사용했던 것 같습니다. 

metro도 JavaScript 번들러입니다. 엔트리 파일과 다양한 옵션을 받아서 모든 코드와 종속성을 포함하는 단일 JavaScript 파일을 제공합니다.  metro는 1. resolution, 2. transformation 3. serialization 과정을 거칩니다. resolution은 다른 파일에서 필요한 파일을 찾는 과정이며 resolution이 실행됨과 동시에 transformation도 병렬로 발생합니다. transformation은 다양한 플랫폼이 이해할 수 있도록 변환해주는 과정입니다. 모든 과정이 끝나면 변환했던것을 직렬화 해줍니다. 자세한 내용은 https://metrobundler.dev/docs/concepts 에서 확인해주시면 되겠습니다!

 

 

4. package.json : 

이 파일은 React에서도 중요한 파일입니다. package.json은 JavaScript 프로젝트의 메타데이터를 포함하는 json파일입니다. 이는 라이브러리를 설치하면 추가됩니다. 

expo-doctor : Expo에서는 package.json의 라이브러리 목록에서 라이브러리의 버전을 확인할 수 있습니다. 

npx expo-doctor

위 명령어를 실행하고 

npm install

을 실행하면 라이브러리의 최신 버전을 설치할 수 있습니다. 

이 과정을 생략하고자 한다면 아래의 코드를 복사해주시면 됩니다.

{
  "expo": {
    "install": {
      "exclude": ["expo-updates", "expo-splash-screen"]
    }
  }
}

그 외에도 autolinking, doctor, appConfigFieldsNotSyncedCheck가 있습니다.

 

 

5. eas.json : 

마지막으로 eas.json에 대해 정리하겠습니다.

https://docs.expo.dev/eas/json/

Configuration with eas.json

위 링크에서 차근차근 확인해주시면 됩니다

프로젝트에서 EAS build와 EAS submit에 사용 가능한 속성을 설정할 수 있습니다. android와 ios를 구분해서 설정할 수 있으며, "build" object로 시작하여 build 할 때 설정할 것들을 설정하고 그에 맞춰서 build가 됩니다. 

eas.json의 초기설정에는 아래와 같습니다.

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

빌드할 때에는 development, preview, production의 방향이 있습니다. 각 차이점은 다음과 같습니다. 

development : 개발자 도구가 포함되어 있어 앱스토어에 제출되지 않는다(iOS내부 배포용 빌드, 시뮬레이터용 빌드 구분하여 빌드 가능,

preview : 개발자 도구가 포함되어 있지 않음. 프로덕션과 같은 환경에서 앱을 테스트하기 위해 만들어진 것.→ 앱 스토어에 배포하도록 서명되지 않았거나 스토어 배포에 최적화 되지 않은 방식임.(preview=.apk, google play store = .aab 권장)

production : 일반 대중에게 공개, TestFlight와 같은 스토어에서 진행하는 테스트 프로세스, 프로덕션 빌드는 앱 스토어를 통해 설치해야한다.(Android 에뮬레이터나 기기, iOS 시뮬레이터나 기기에 직접 설치 X), → 스토어에 제출할 때는 .aab. 를 “buildType”: “apk”사용하는 것이 좋음(기본구성)

 

build하면서 잘 안되서 이것저것하다가 결국 eas를 사용하게 되었습니다. 진짜 너무 편하게 빌드했지요,, (지인이 도와줘서 겨우 됐답니다ㅠㅠ) 아무튼 build 진행하두고 궁금한 걸 찾아봤었습니다. 덕분에 빠르게 잘 처리했었답니다ㅎㅎㅎ

빌드하는 것은 자세한 내용을 작성해야해서 다음 포스팅으로 작성하겠습니다!

 

 

 

4. Expo 개발 주기

 

Expo의 개발 주기입니다.

총 4가지 주요 활동의 순환 구조입니다.

- JavaScript 앱 코드를 작성하고 실행합니다.

여기에는 네이티브 코드 변경이 필요없는 npm에서 구성 요소 생성, 비즈니스 로직 작성 또는 라이브러리 설치가 포함됩니다. 

 

- 앱 구성요소 업데이트

app.json이나 app.config.js 파일이 수정되는 것이 포함됩니다. 앱 이름, 아이콘, 시작화면 및 기타 속성을 업데이트하는 것이 포함됩니다.

 

- 네이티브 코드를 작성하거나 네이티브 프로젝트 구성을 수정합니다

네이티브 코드를 작성하거나 수정할 때도 포함됩니다. 변경 작업을 수행하려면 네이티브 코드 프로젝트 디렉토리에 액세스 해야하거나 로컬 Expo 모듈로 네이티브 코드를 작성할 수 있습니다. 즉 네이티브 코드 android의 Java/Kotlin, ios의 swift로 변경하려면 액세스를 해야하며, 직접 수정하거나 Expo 모듈을 만들어서 네이티브 기능이 가능하도록 수정하는 것입니다. 

 

- 네이티브 코드 수정이 필요한 라이브러리를 설치합니다

네이티브 코드로 수정하려면 필요한 라이브러리가 있겠죠? 그 라이브러리를 설치하는 과정입니다. 라이브러리는 구성 plugin을 제공하거나 앱 구성을 업데이트하기 위한 단계를 제공합니다. 이전 활동과 마찬가질로 개발 빌드를 만들어야 합니다.

 

 

---

 

 

이전에도 EAS를 언급하고 eas.json에도 언급했네요. EAS가 뭔지 간단하게 정리하고 마무리하겠습니다

 

EAS(Expo Application Services)는 Expo 팀이 만든 Expo 및 React Native 앱을 위한 긴밀하게
통합된 클라우드 서비스입니다.

 

 

0. 가격

Expo는 구독형으로 되어 있습니다! 저는 프로젝트에서 무료버전을 사용했고 빌드할 떄 가장 많이 사용했네요(계정이 여러개지만..)

- 30개 모바일 앱 빌드

- 앱스토어에 제출

- 1,000 MAU에게 업데이트 보내기

 

https://expo.dev/pricing

 

참고: expo document

https://docs.expo.dev/