WSL에서 react-native 개발환경 위한 expo cli 설치

윈도우 환경에서 react-native 앱 개발을 위해서 

윈도우 bash shell 이용할 수 있는 WSL (리눅스용 윈도우 하위 시스템) 을 설치하고

빌드도구로 expo - cli 를 설치하려던 중 맥북을 구매할뻔했다.

React-native 란?

React의 UI 작성 접근 방법을 네이티브 모바일로 확장할 수 있음. 

웹뷰를 통한 UI 작성을 하지 않고 JS 코드만으로 모바일 Native UI 작성이 가능.

Expo

: 리액트 네이티브 크로스 플랫폼으로 개발하기 위한 빌드 도구.

실제 기기나 에뮬레이터에서 테스트할 수 있음

Expo 사용하는 이유

- 무료이며 오픈소스임

- 어떤 OS 위에 플랫폼(ios, android)에서든 개발 가능.

- Linux나 Windows에서 iOS 장치 용으로 개발할 수 있음.

- 공유가 쉬움

- 앱 스토어에 배포 쉬움

- 자동으로 바로 업데이트 가능

- CRNA create-react-native-app) : 리액트 네이티브 프로젝트를 시작하기 쉽게 해주는 도구. 

- CRNA를 사용하면 Xcode 나 Android Studio 필요 없음

- 카메라, 비디오, 연락처 등 자주 사용되는 인기있는 라이브러리를 번들로 제공 -> 외부 라이브러리를 추가하지 않아도 간단한 앱은 만들 수 있음.

설치방법   참고 ) http://ferrumdev.tistory.com/42

(window10 에서 WSL shell)

1. CRNA 툴 이용하여 개발환경 설치

$ npm install -g create-react-native-app

2. my-app 이라는 앱 생성

$ create-react-native-app my-app

3. my-app 이라는 이름의 폴더 생성됨. npm start 통해 실행.

$ cd my-app

$ npm start 

4. Expo cli 설치 

$ npm install -g expo-cli

5. my-app 빌드

$ expo start

6. 

localhost:19000 화면에서 안드로이드 가상 머신과 실제 단말기에서 테스트 가능.

Genymotion 설치 후 안드로이드 가상 머신 선택할 수 있음.

휴대폰에 expo 앱 설치 후 QR 코드 스캔해서 실제 단말에 실행할 수 있음.

지니모션을 이용하는 방법은 이 사이트 보면서 실행했다.   

   How to use Genymotion with Expo

7. 

1. 1) Open Android Studio
   Go to Configure -> SDK Manager or File -> Settings -> Android SDK
2.  SDK Platforms 탭 선택
   오른쪽 아래에 있는 Show Package Details 버튼 선택
   Android SDK Platform 27, Android SDK Platform 26, and Android SDK Platform 25 선택. ( 필요한 sdk 다운받으면 될듯)
   SDK Tools 탭 선택
   Android SDK Platform-Tools, Android SDK Tools 선택.
   Click Apply and OK
3. 2)  Genymotion 열기
   원하는 가상 머신 선택. 
4. 가장 많이 사용하고 있는 플랫폼 버전 확인하기 ( https://developer.android.com/about/dashboards/?hl=ko )

3) 환경변수 추가 (see detailed instructions)

C:\Users\{USERNAME}\AppData\Local\Android\Sdk\platform-tools 

를  Path 변수에 추가.

4) 

adb (Android Debug Bridge) :

에뮬레이터 인스턴스나 연결된 Android 기기와 통신할 수 있는 명령줄 도구.
Open CMD

adb 실행. 없으면 설치.

$adb 
Run $adb kill-server and $adb start-server 
Run $adb devices, ensure List of devices attached is displayed and nothing else, the device will be installed in Genymotion
Run $exp path 

*****중요******

만약 여기서

ADB server didn't ACK  

failed to start daemon  

error: cannot connect to daemon

에러가 나온다면, adb 버젼이 다르다는 것.

C:\Users\{USERNAME}\AppData\Local\Android\Sdk\platform-tools\adb.exe 버젼 확인해야함.. !!!!!!

WSL 에서 사용하는 adb 버젼과 platform-tools폴더에 설치되어 있는 adb.exe  버젼이 다르면 오류가 발생함.

버젼에 맞게 설치하기!




5) 

1. Genymotion 열기
   Settings -> ADB
   Use custom Android SDK Tools 체크.
   Click Browse select C:\Users\{USERNAME}\AppData\Local\Android\Sdk
   Start virtual device

6) 

Open CMD

Run adb devices, ensure you can see one new device

7)

$expo start
Open Expo Dev Tools
Click  Run on Android device/emulator

8) 끝

** 추가 발생 에러

에뮬레이터 실행시, 

빨간화면과 함께 building JavaScript bundle error 발생.

설치가 99% 에서 멈추고 끝남.

https://github.com/react-community/create-react-native-app/issues/429#issuecomment-400654272  보면서 해결할 수 있었음.

QR 코드 이용해서 디바이스에서 실행시,

network response timed out 

발생.

1) 디바이스와 같은 wi-fi 사용중인지 확인

2) wi-fi  public 에서 private 로 변경

3) 방화벽 인바인드 규칙에 19000 과 19001 포트 규칙 추가.

그래도 안된다면,

https://github.com/react-community/create-react-native-app/issues/144#issuecomment-308394689   확인.

IPv4 주소 값으로 세팅.

 set REACT_NATIVE_PACKAGER_HOSTNAME=my-custom-ip-address

unix ) set 대신 export

끗