React Native

Expo - 개념 및 설치

크런키스틱 2023. 4. 14. 13:20
728x90

어플을 만드는 것에 관심이 생겨 언어를 알아보던 중에 Flutter와 React-Native에 대해 알게 됐다.

그 중, 기존에 사용했던 React.js를 알고 있으면 러닝커브가 낫다는 점에서 React-Native로 시작해보기로 결정했다.

 

1. React Native란?

React Native(이하 RN)은 React 개발자가 React를 개발하던 방식과 흡사하게 네이티브 앱(Android/iOS)을 개발할 수 있도록하는 프레임워크다. 다시 말해 node.js기반의 JS로 모바일 앱을 개발할 수 있는 프레임워크다. 또한 react-native-web 플러그인을 이용하면 개발한 앱을 웹서비스로도 이용 가능하다. 즉 Android, iOS, Web 서비스를 동시에 개발할 수 있는 특징이 있다.

 

2. Expo란?

Expo는 RN를 보다 쉽게 개발할 수 있도록 지원하는 개발환경으로 다음과 같은 특징을 가진다.

  • 네이티브 앱의 개발 환경 지원: Android나 iOS 에뮬레이터를 제공하고 빌드환경까지 제공
  • 실제 단말기 없이도 에뮬레이터를 통해 개발이 가능하고, MAC 머신이 없어도 마켓에 등록할 실행파일을 빌드
  • 원격 개발 지원: AWS 인스턴스에서 개발하고 로컬의 안드로이드 폰으로 테스트 가능 (hot loading 지원)
  • OTA 지원: 마켓에 등록된 앱을 실시간으로 변경 가능(유료서비스)

하지만 다음과 같은 단점도 존재한다.

  • Expo에서 지원하는 라이브러리만 사용하는 것이 원칙: 모든 npm을 사용할 순 없음
  • 특히, native로 구성된 npm 혹은 library들은 사용 불가

결국, React Native와 Expo를 정리하면,

  • React Native는 javascript, css 코드 뿐만 아니라 각 운영체제와 연결되는 bridge들을 포함한 infra로 구성된 것이다.
  • React Native는 쉽게 예를 들어 번역을 하는 것으로, javascript를 각 naitve(android, ios)로 요청을 보내준다.
  • 배포를 위해 준비해야 될 사항들이 많다. (android는 java, android studio sdk가 필요하고 ios의 경우 xcode가 필요하다.)
  • 이를 간단하게 모든 infra를 구성하고, javascript, css 부분 만을 추가하여 테스트 할 수 있게끔 지원해주는 툴이 expo이다.

분명 단점도, 존재하지만, 빠른 속도와 편한 환경 제공이 React Native 입문자와 규모가 크지않은 어플 제작에는 도움이 될 것 같아 선택했다.

 

3. 설치

npm i --global expo-cli sharp-cli
npx create-expo-app test

ios)

brew install watchman

이렇게 실행하면 아래와 같이 프로젝트가 생성된다.

 

 

4. 어플 다운로드

expo의 장점 중 하나가 Android 단말기를 통해 개발중인 프로젝트를 실시간으로 테스트 할 수 있으며 이를 위해 Expo(Expo Go) 앱을 구글 플레이를 통해 설치한다.

  1. play store에서 expo 어플 다운로드
  2. 계정 회원가입 및 필요한 추가 설정 진행

 

5. 코드 실행

expo login

expo 어플 혹은 사이트에서 생성한 계정을 입력해 로그인을 진행하면 된다.

이제 명령어를 통해 코드를 바로 expo 어플을 통해 확인할 수 있는데 이 때, 옵션이 중요하다.

expo start
// expo start --tunnel

expo start 명령어를 통해 프로젝트를 실행하면 Metro라는 번들러가 실행되어 Android와 iOS 단말기를 통해 실시간 테스트가 가능하다.

다만, expo start는 기본적으로 local 환경으로 연결되기 때문에 코드를 실행 중인 host와 휴대폰에서 연결 중인 데이터 host가 같아야 성공적으로 실행된다.

그게 아닐 경우, expo start --tunnel를 통해 실행해야지 Public IP나 자동생성된 도메인 주소로 원격 접속이 가능하다.

사진에 생성된 QR을 찍거나, 생성된 주소를 입력해보면 bundling 을 위한 로딩 이후에 아래와 같이 실행되는 것을 확인할 수 있다.

 

- 프로젝트 재실행

expo start로 실행된 Metro는 ctrl+c 를 눌러 종료할 수 있으며, 이 때 Metro와 실행 중이던 앱 혹은 웹 서비스의 연결을 끊기게 된다. 다만 앱과 웹이 종료되지는 않는다. 이렇게 앱/앱이 동작중인 상태에서 expo start로 프로젝트를 재실행해도 기존의 앱/웹이 자동으로 연결되진 않는다. 앱의 경우 뒤로 가기를 선택하여 expo go로 돌아간 후 현재 실행중인 metro 서버(개발 서버)를 선택해서 앱을 재실행해야 한다.

 

- 개발 중인 앱의 Reload

원격 개발을 하는 경우 앱 서비스와 Metro의 연결이 종종 끊기곤 하는데 이 때 Metro 콘솔에서 r 을 입력해 앱을 리로드하면 다시 연결된다. 간혹, npm을 추가 설치하는 경우에는 r 로 리로드를 해도 npm을 인식하지 못하는 경우가 있다. 이 때는, Metro를 종료하고 다시 실행하면 된다.

 

- 캐시 삭제

간혹 가다 캐시를 삭제하고 다시 실행할 필요가 있는데, 이 때는 옵션에 -c 만 주면 된다.

expo start -c -tunnel
728x90