Expo XDE에서 React Native 입문

소개

React Native에서 개발을 시작할 때 몇 가지 옵션이 있습니다. 이번에는 Expo XDE라는 React Native 용 XDE를 사용하여 프로젝트를 만듭니다.

전 기사

운영 환경

mac Sierra Version 10.12.5

Expo XDE Version 2.19.3

Expo v19.0.0

Expo XDE로 새 프로젝트 만들기

Expo 계정 만들기

먼저 앱 개발용 계정을 만듭니다.
Create your account

Github 계정으로도 만들 수 있습니다. 이 계정에 애플리케이션을 연결하여 Expo 커뮤니티에 게시할 수 있습니다. Apple Developer 계정과 같습니다.

Expo 데스크톱 앱 설치

데스크톱 앱은 Mac, Windows, Linux용으로 제공됩니다.
또한 데스크톱 앱에서도 시뮬레이터는 준비되어 있지만 실기에서도 동작 확인하고 싶다면 Expo 앱을 단말기에 설치하십시오.
Start your project with Expo XDE
설치가 완료되면 자신의 계정으로 로그인합니다.

신규 프로젝트 작성

Project 아이콘에서 New Project를 선택합니다.


템플릿을 선택하고 새 프로젝트를 원하는 위치에 만듭니다. 이번에는 Blank에서 만들겠습니다.


다운로드가 시작됩니다. (상당히 시간이 걸립니다)
Expo의 좋은 점은 보일러 템플릿(베스트 프랙티스와 같은 것)을 미리 초기 환경으로서 준비해 주는 것입니다.
그러나 버전에 따라 상당히 템플리트가 변경되기 때문에 오래된 리포지토리를 다룰 때는주의가 필요합니다.

다운로드가 완료되면 새 프로젝트 화면이 열립니다.

iOS 시뮬레이터 시작

Device 아이콘에서 iOS Simulator를 시작합니다.
처음 시작하면 시뮬레이터에 Expo 앱이 설치됩니다.


템플릿 앱이 시작됩니다.


Command+D로 메뉴 화면이 열립니다.

실제 기기에서의 동작 확인

먼저 Expo 앱을 설치합니다.
또한 개발 PC와 단말기를 같은 네트워크에 연결해야 합니다.
Share 아이콘을 클릭하면 QR 코드가 표시되므로, 그것을 expo 앱으로 로드하면 실제 기기에서 동작 확인할 수 있습니다.

데스크톱 앱에서 QR 코드를 표시합니다.


실제 기기의 앱으로 QR 코드를 로드합니다.


기본값으로 실제 기계를 흔들면 메뉴 화면이 표시됩니다.
제스처 설정을 변경하려면 Profile 탭의 Options에서 변경할 수 있습니다.

여기까지 Expo XDE를 사용한 React Native 앱의 신규 프로젝트의 순서를 설명했습니다만, 환경이나 버젼에 따라서는 에러가 되는 경우도 있으므로, 빠지면 공식의 issue를 맞는가 공식 블로그 등을 맞추어 봐 제발.

Expo.io 블로그

Expo.io 문서