[Expo 정리] Expo docs - 1

Zoey·2024년 9월 18일

RN 공부

목록 보기
1/2

Expo 앱 개발하기

주요 개념

다음 개념들을 이해하는 것이 중요하며, 이 가이드를 읽거나 Expo 도구를 사용할 떄 이러한 정의를 참조하는 것이 좋다.

"Expo 앱"은 Expo 도구를 사용하는 React Native 앱을 설명하는 약어이다. "Expo 앱"은 Expo SDK의 단일 패키지, Expo Router, Expo CLI, Continuous Native Generation 등을 사용할 수 있으며, 이들을 조합하거나 다름 Expo 도구들을 사용할 수 있다.

"Expo 앱"과 "Expo 도구를 사용하지 않는 React Native 앱"의 개발 과정은 다른가?

Expo는 독립적으로 채택할 수 있는 다양한 도구와 서비스를 제공하므로, 어떤 도구를 사용하는지에 따라 달라질 수 있다. 대부분의 경우, Expo에서 제공하는 기능에는 Meta가 제공하는 React Native 도구들과 비교할 만한 것이 없다.

"Expo"와 "Expo Application Services(EAS)"의 차이점은 무엇일까?

  • Expo는 대규모의 React Native 앱을 개발하고 유지하는 데 도움을 주는 강력한 오픈 소스 프로젝트이다. 예를 들어, Expo CLI, Expo Router, Expo SDK 패키지 등이 있다. 모든 Expo 오픈 소스 도구는 무료로 사용할 수 있으며, MIT 라이센스를 따른다.
  • EAS는 Expo 및 React Native 프로젝트에서 사용할 수 있는 호스팅 서비스 모음으로, 앱을 빌드, 제출, 업데이트하고 이 모든 과정을 자동화할 수 있게 한다. 팀과의 협업도 지원한다.

Expo 오픈 소스 도구를 사용하면 반드시 EAS도 사용해야 하나?

  • 그렇지 않다. Expo 프로젝트는 그저 React Native 앱일 뿐이다. Fastlane과 같은 네이티브 빌드, 업데이트 도구를 사용할 수 있다.
  • 대부분의 EAS 서비스는 자체 인프라에서도 실행할 수 있으며, 이를 설정하는 방법을 제공한다. 예를 들어 EAS Update 대신 자체적으로 업데이트를 호스팅하거나 로컬 빌드 또는 자체 CI에서 빌드를 실행할 수 있다.

EAS를 사용하지 않는 경우에도 EAS를 사용할 수 있나?

  • 그렇다, EAS는 React Native 프로젝트에 적합하다.

Expo Go: 학습, 실험 및 프로토타입 도구

  • Expo Go는 React Native 프로젝트를 기기나 에뮬레이터에서 빠르게 실행할 수 있는 가장 빠른 방법이다.
  • 하지만, Expo Go와 Snack은 프로덕션 앱을 빌드하는 데 사용하기에는 적합하지 않으며, 주로 프로젝트 시작 또는 프로토타입 작성에 적합하다. 앱을 스토어에 배포하려면 개발 빌드가 더 유연하고 신뢰할 수 있는 환경을 제공한다.

개발 빌드

개발 빌드는 expo-dev-client 라이브러리를 포함하는 디버그 빌드이다. 빠른 반복 개발을 가능하게 하며, Expo Go보다 더 유연하고 완전한 개발 환경을 제공한다. 네이티브 라이브러리를 설치하거나 앱 설정을 변경하고자 할 때 사용할 수 있다. 개발 빌드는 로컬에서 생성하거나 EAS Build를 사용하여 클라우드를 생성할 수 있다.

Android 및 iOS 네이티브 프로젝트

React Native 앱은 두 가지 상호 연결된 부분으로 구성된다.
1. 앱 자바스크립트 코드: React 컴포넌트와 대부분의 앱 로직을 포함하며, 웹사이트의 자바스크립트와 유사한 역할을 한다.
2. 네이티브 프로젝트: Android 및 iOS 프로젝트가 자바스크립 앱을 번들로 묶고, 플랫폼에서 실행하며, 네이티브 컴포넌트를 렌더링하고, 플랫폼별 기능에 접근할 수 있게 해준다.
앱을 사용자에게 배포하기 위해서는 Android Studio 또는 Xcode 프로젝트를 컴파일하여 빌드를 생성해야 한다.

create-expo-app으로 프로젝트 초기화 시 기본적으로 네이티브 프로젝트가 생성되지 않는 이유?

  • 기본 동작은 필요할 때 네이티브 프로젝트를 생성하는 Continuous Native Generation(CNG) 방법을 장려하기 떄문이다. CNG는 프로젝트 유지 관리를 더 쉽게 해준다.

Continuous Native Generation (CNG)

  • CNG는 필요할 때 앱의 네이티브 프로젝트를 app.json과 package.json에서 생성하는 과정이다. node_modules가 package.json에서 생성되는 방식과 유사하다.
  • 네이티브 프로젝트 디렉토리(android와 ios)를 .gitignore에 추가하고 필요할 때 npx expo prebuild 명령으로 다시 생성할 수 있다. 클라우드 기반 개발 워크플로를 사용하는 경우, 로컬에서 prebulid 명령을 실행할 필요가 없을 수 있다.

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

  • 새 네이티브 종속성을 추가하거나 app.json/app.config.js에서 프로젝트 설정을 변경하는 경우 npx expo prebuild --clean 명령을 실행하여 네이티브 프로젝트 디렉토리를 다시 생성해야 한다.

클라우디 기발 및 로컬 워크플로

  • 클라우드 기반 또는 로컬 개발을 선택하는 것은 개발 루프를 크게 변경하지 않는다. Javascript 코드가 실행될 네이티브 바이너리를 어떻게 생성하고 배포할지를 선택하는 문제이다.
  • 클라우드에서 앱을 빌드하려면 EAS Bulid를 사용하면 되고, 로컬에서는 Android Studio와 XCod를 설치해 빌드를 수행할 수 있다.

프로젝트 초기화 및 실행

  • 가장 쉬운 방법은 create-expo-app을 사용하는 것이다. 프로젝트를 생성한 후, 즉시 기기나 에뮬레이터에서 실행할 수 있다.

핵심 개발 루프

  • 핵심 개발 루프는 앱을 개발하는 동안 일반적으로 반복되는 네가지 주요 활동으로 구성된다.
  1. 자바스크립트 코드 작성 및 실행: 컴포너트 작성, 비지니스 로직 작성, 또는 네이티브 코드 수정이 필요없는 npm 라이브러리 설치 등.
  2. 앱 설정 업데이트: app.json 또는 app.config.js를 통해 앱의 이름, 아이콘, 스플래시 화면 등을 업데이트.
  3. 네이티브 코드 작성 또는 네이티브 프로젝트 설정 수정: 네이티브 프로젝트 디렉토리에 직접 엑세스해 변경하거나 Expo 모듈을 사용하여 네이티브 코드를 작성.
  4. 네이티브 코드 수정이 필요한 라이브러리 설치: 이러한 라이브러리를 설치하면 개발 빌드를 생성해야한다.

앱 공유 및 배포

앱이나 베타 테스터에게 배포하려면, Google Play Beta(Android) 또는 TestFlight(iOS)를 사용하여 앱의 바이너리를 업로드할 수 있다.

앱 모니터링 및 업데이트

프로덕트 환경에서 앱을 모니터링하는 방법으로는 크래시 리포트 및 분석 도구를 사용할 수 있다. expo-updates 라이브러리르 사용하여 앱을 신속하게 업데이트할 수 있다.
참고링크

profile
프론트엔드 개발자가 되기위해 기록하고 공유하는 Zoey 블로그입니다.

0개의 댓글