Expo CLI를 이용한 React Native 개발환경 구축

1. 시험환경

    · React Native

    · expo cli

    · vsCode

    · Android Studio / AVD(Android Virtual Device)

 

2. 목적

    · expo cli를 이용하여 프로젝트를 생성하고 실행한다.

    · 핸드폰 단말기에 Expo Go 앱을 설치하여 배포 앱을 확인한다.

 

3. 적용

    ① [휴대폰] Android 및 iPhone 단말기에 "Expo Go" 앱을 설치한다.

        - 윈도우 개발환경에서는 iPhone 에뮬레티어를 실행할 수 없기 때문에 iPhone 단말기를 준비해야 한다.

---

    ② 안드로이드 에뮬레이터를 사용하기 위해 Android Studio 및 AVD를 설치한다.

        - 참고 : https://languagestory.tistory.com/174

Android Studio 설치

 

 

        - 참고 : https://languagestory.tistory.com/175

AVD(Android Virtual Device) 사용

 

    ③ node.js를 설치한다.

        - 참고 : https://languagestory.tistory.com/24

node.js 최신버전 설치 (windows)

---

    ④ expo 최신 패키지를 설치한다.

        - npm install expo@latest

 

    ⑤ expo cli를 이용하여 프로젝트를 생성한다.

        - npx create-expo-app [프로젝트명]

 

    ⑥ 생성된 프로젝트 폴더로 이동하여 프로젝트를 실행한다.

        - cd [프로젝트명]

        - npx expo start

 

    ⑦ 안드로이드) AVD 실행 후 ⑥에서 실행한 콘솔은 유지하고 별도의 콘솔에서 아래 명령어를 실행한다.

        - npm run android

 

    ⑧ 아이폰) ⑥ 실행시 나타나는 QR 코드를 핸드폰 "Expo Go" 앱을 열어서 코드스캔한다.

        - QR 스캔 핸드폰은 개발 PC와 동일 네트워크에 있어야 함에 주의한다.

 

4. 결과

    · 핸드폰에서 실행된 앱을 확인한다.