[React Native] - Expo 설치 및 실행, Expo 빌드하기(APK 파일 생성)

💻 준비물

1. 노드
2. 비주얼 스튜디오 코드

 

🙋🏻‍♂️ Expo 회원가입

1. 회원가입 페이지 접속 (링크) → 회원가입 진행

 

🔗 Expo 패키지 설치 (프로젝트 생성)

1. 비주얼 스튜디오 실행 → (생성할 프로젝트의 상위) 폴더 열기 → 터미널 열기

2. 패키지 설치 명령어 실행

npm install -g eas-cli

3. expo 프로젝트 생성 명령어 (App-Name] 으로 Expo 프로젝트 생성)

npx create-expo-app [App-Name]

4. 생성한 프로젝트로 이동 → expo 로그인 정보 등록

cd [App-Name] 
npx expo login

• (1번에서 가입했던) 이메일(or 이름) 입력 → 비밀번호 입력

 

🌐 Expo 프로젝트 생성(등록)

1. Expo 로그인 (링크)

2. (좌측 메뉴) [All projects] 클릭 → [Create Project] 클릭

3. Display Name 입력 (시 Slug는 자동 입력) → [Create] 클릭

4. id 명령어 복사

5. 프로젝트 ID 적용

 

💁🏻‍♂️ 실행방법

 

🙋🏻‍♂️ Expo (베포 없이) 실행

(비주얼 스튜디오에서 생성한 프로젝트로 이동한 후에 작업)

 

 

1. (스킵가능) App.js 속 코드 수정

2. 실행 명령어 입력

npx expo start

3. 실행 완료 (시뮬레이터 사용 준비완료)

 

💻 (데스크톱 / 노트북) 시뮬레이터 실행 방법

• i → (IOS 시뮬레이터 실행)
• a → (Andriod 시뮬레이터 실행)
• (2개 모두 실행 하고 싶다면?) i → a (IOS 실행 완료 후 →Android 실행 가능)

 

👀 결과

 

💻 (모바일) 시뮬레이터 실행 방법

▶️ 준비 과정 (Expo GO 다운로드)

• AppStore or PlayStore 실행 → expo 검색 후 다운로드 → 열기 → 로그인 진행

 

 

📱실행 방법 1 (QR 코드)

1. 홈 화면으로 이동 → [카메라] 앱 실행
2. 터미널에 있는 QR 코드 인식 → [Expo Go에서 열기] 알림 클릭

 

 

 

🚨 [Error] - ‘There was a problem loading the requested app.’ 에러가 나왔다면?

• 해결 방법 : 프로젝트 실행 네트워크와 ↔ 휴대폰 네트워크가 일치하는지 확인해 보자!
• 예) 노트북(사내 와이파이) ↔ 휴대폰 (LTE) == X

 

 

📱실행 방법 2 (Expo Go)

1. Expo Go 실행 → Projects 선택

 

 

 

 

 

🙋🏻‍♂️ Expo에 베포 하기

(비주얼 스튜디오에서 생성한 프로젝트로 이동한 후에 작업)

 

1. (스킵가능) App.js 속 코드 수정
2. 빌드 명령어 입력

eas build -p android --profile preview

3. 애플리케이션 id 입력 (수정하지 않으면 프로젝트 이름인 기본 값으로 진행) → enter

4. Key 스토어 생성 여부 -> Y or N

5. 이후 10분 후 베포 완료 (무료 사용자의 베포는 ‘사용자 대기 시스템’으로 진행)

 

 

📱 APK 파일로 실행(And 디바이스)

1. Open this link on your Andriod devices (or scan the QR code) to install the app: [링크] 클릭
2. (로그인된) EXPO 사이트에 bulid 파일(APK) […] 클릭 → [Download build] 클릭
3. APK 파일 (데스크톱 or 노트북에) 다운로드 진행
4. Android 디바이스에서 Apk 파일 실행(카톡, 구글 드라이브, 링크 직접 접속 등으로 전달)
5. 실행 완료

‣ 👀 만약 안드로이드 실물 디바이스 없이 APK 파일 테스트를 진행하고 싶다면?

* Android 시뮬레이터 실행 → 시뮬레이터 화면 속으로 APK 파일을 ‘드래그’ → 앱 목록 확인 후 실행