[React Native] Expo-CLI 개발 환경 세팅 방법 정리

 

 

 

 

 

 

🌈 Expo-CLI 개발 환경 세팅 하기

1️⃣ Expo CLI 설치

2️⃣ 프로젝트 생성

3️⃣ 프로젝트 실행(웹/가상장치)

4️⃣ Expo app에서 실행

 

 

 

 

1️⃣ Expo CLI 설치

 

◾ expo-cli 설치 명령어 입력 

npm install --global expo-cli

 

global 설치를 원하지 않는 경우 프로젝트를 시작할 경로에서 아래 명령어를 입력한다.

npm install expo-cli

 

 

◾설치 확인

expo-cli --version

 

 

 

 

2️⃣ 프로젝트 생성

◾ 프로젝트 생성할 폴더로 이동후 [ expo init 프로젝트명 ]  입력

expo init 프로젝트명

 

 

◾ template 선택

- blank : 비어있는 하나의 페이지만 존재하는 템플릿

- blank(TypeScript) : blank와 동일하면서 TypeScript를 사용할 수 있는 템플릿

- tabs(TypeScript) : react-navigation을 통해 여러 페이지가 만들어져 있는 템플릿

- Bare wokrflow : Non-Expo 앱을 만들때 사용

 

 

 

 

3️⃣ 프로젝트 실행(웹/가상장치)

 

◾ 프로젝트 폴더로 이동후 expo 실행

cd my-app
expo start 또는 npm start

 

 

 

◾ 웹에서 실행

w버튼을 누를 경우 expo가 데스크탑 웹에서 실행된다. 

 

 

◾ 가상 장치에서 실행

a버튼을 누를 경우 안드로이드 스튜디오에 설치된 가상장치에서 expo가 실행된다.

 

 

 

 

 

4️⃣ Expo app 에서 실행

 

◾ Expo app 설치

 

- Android

https://play.google.com/store/apps/details?id=host.exp.exponent

Expo - Google Play 앱

 

- iOS App Store

https://search.itunes.apple.com/WebObjects/MZContentLink.woa/wa/link?path=apps%2fexponent

Connecting to the iTunes Store.

 

 

◾ Expo app 실행 후 Scan QR Code  선택 → VS Code콘솔의 QR 코드 스캔

PC와 모바일 기기가 동일한 네트워크에 연결되어 있어야 실행된다.

 

 

 

◾ 실행 확인