React Native - Expo 프로젝트 만들기

Expo

다양한 기능을 제공해 리액트 네이티브 개발을 도와주는 도구이다.

장점 : 개발자의 편의를 돕는 도구를 사용할 수 있다.

단점 : expo에서 제공하는 기능 외의 네이티브 모듈을 추가로 사용할 수 없다. 리액트 네이티브 버전이 업그레이드 되도 expo가 업그레이드 되기 전까지는 그 기능을 사용할 수 없다.

https://expo.canny.io/

Expo Feedback

위의 사이트에서 엑스포 로드맵과 피드백 내용을 확인할 수 있다.

 

expo 프로젝트 만들기

* 원하는 운영체제의 모바일 디바이스가 있는 경우, App Store에서 Expo Go, Play 스토어에서 Expo 어플을 다운받으면 iOS, 안드로이드 에뮬레이터를 설치하지 않고 바로 expo로 만든 어플을 확인할 수 있다.

 

1. expo-cli 설치하기

npm install -g expo-cli

터미널에서 위의 명령어를 입력한다.

 

2. 터미널에서 로그인하기

expo login

위 명령어를 입력한 후, 이메일과 비밀번호를 입력해 로그인한다.

 

3. 프로젝트 생성하기

expo init [ 프로젝트 이름 ]

프로젝트 이름에는 영문 대/소문자 숫자 @ . - _ (네 개의 기호)만 사용 가능하다.

템플릿 선택에서는 blank를 선택한다.

 

여기까지 진행하면 프로젝트 이름으로 된 폴더가 생성된다.

이 폴더 안에는 expo에서 제공하는 기본 파일들이 저장되어 있다.

 

4. 프로젝트 실행하기

expo start

 

엑스포가 실행되며 엑스포 개발자 도구 페이지가 자동으로 열린다.

 

페이지가 열리지 않으면 터미널에서 localhost::(숫자) 의 주소를 복사해 인터넷 주소창에 입력하면 된다.

 

5. 모바일 기기와 연동하기

위 페이지의 QR코드를 모바일 기기의 expo 어플에서 인식하면 연결할 수 있다.

로딩 화면을 거치고 나면

app이 정상적으로 작동하는 것을 확인할 수 있다.

* 에뮬레이터를 다운받은 경우, a(android)나 i(iOS)를 눌러서 해당 운영체제의 에뮬레이터를 실행할 수 있다.

 

설치 중에 만난 오류

expo login을 입력했는데 나온 오류메시지

'expo'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

expo-cli를 잘 설치했는지 확인한다. 내 경우는 -g를 넣지 않고 다운받았더니 위의 메시지가 나왔고, 다시 1번의 설치를 진행해주었다.

 

a나 i를 누른 경우 나온 오류메시지

RuntimeError: abort(Error: No Android connected device found, and no emulators could be started automatically.

안드로이드 기기가 있어서 에뮬레이터를 다운받지 않았는데, 에뮬레이터를 실행하려고 하니 나온 오류다.

실물 기기가 있으면 그곳에서만 화면을 확인할 수 있다.

오류와 함께 expo 실행이 중지되므로 다시 expo start로 실행시켜준다.

 

 

 

강의 사이트

https://inf.run/Nwk7

처음 배우는 리액트 네이티브 - 인프런 | 강의