React native 설치

O'Reilly의 책을 보며 기본 환경 설정을 해봤는데 맥 기준이라(iOS는 책 따라하면 잘 됨) 윈도우 기반 환경 설정에 대한 검색이 따로 필요 할 수 있다.(Hello world는 언제나 중요하다.)

 

React native의 개발은 expo와 react-native 두 가지 방식이 있다.(npm 패키지)

* 처음에 두개가 같은 건 줄 알고 검색을 통해 윈도우에 expo를 설치하곤 책을 따라 가다가 아차 싶었음..

 

react-native : iOS, Android base코드가 함께 있어 단말이나 에뮬레이터를 통해 컴파일을 거쳐 결과를 확인

expo : 개발 PC에 node 서버를 작동시켜 프로젝트를 활성화 시키고 단말의 expo앱을 통해 접속하여 결과 확인하는 방식(PC와 단말이 같은 네트워크에 묶여 있어야 함)

 

위 책을 통해 공부를 하실 분들은 react-native를 쓰시면 될 것 같다. 

*공통적으로 JDK는 필요

 

#맥(react-native 책 방식 수정)

0.homebrew 설치 

https://brew.sh/index_ko

 

1. node, watchman, flow 설치

brew install node

brew install watchman

brew install flow

 

2. react command-line 설치

npm install -g react-native-cli

 

3-1. iOS개발자 계정, xcode 설치

3-2. 안드로이드 Studio 설치

https://developer.android.com/studio

android studio 실행 후 SDK 매니저 실행 (SDK Build-tools, API, Support Repository, Intel x86 패키지 설치)

* Sutdio, SDK 설치 후 SDK 경로를 ANDROID_HOME으로 환경변수 추가(~/.bash_profile)

 

4. 프로젝트 생성 : react-native init test-app

 

5-1. 아이폰에서 프로젝트 실행

iOS폴더 xcode에서 열고 run

* 실패 시 test-app폴더에서 npm install, npm start 실행

* iOS packager가 실행 되고 실제 단말에서 테스트하기 위해서는 단말등록, 앱 배포 인증 필요... 

 

5-2. 안드로이드에서 프로젝트 실행

android studio를 통해 테스트 할 avd 생성 후 실행 or 단말 연결

test-app 폴더에서 react-native run-android

* 가끔 .. Device is UNAUTHORIZED를 포함한 에러를 일으키는데 adb server restart를 통해 

adb server를 재시작 하여 단말 연결을 다시 해본다. (emulator -list-avds 로 연결 단말 확인)

 

 

#윈도우(react-native android only)

1. node.js 설치

 

2. react command-line 설치

npm install -g react-native-cli

 

3. 프로젝트 생성 : react-native init test-app

 

4. 안드로이드 스튜디오, SDK 설치 

android studio 실행 후 SDK 매니저 실행 (SDK Build-tools, API, Support Repository, Intel x86 패키지 설치)

 

5. 안드로이드의 device manager 실행, 테스트 단말 생성, 실행 or 테스트 단말 연결

 

6. 윈도우 커맨드 실행하여 test-app이동 후 react-native run-android 실행

 

* 윈도우 시스템 환경변수에 JAVA_HOME 추가 필요 (같은 식으로 ANDROID_HOME도 추가)

 

* 그 외 run-android가 안되는 경우 위 맥의 5-2를 참고(안드로이드 스튜디오에서 테스트 단말이 제대로 연결 되었는지 확인 필요)

 

#expo 방식

1. node.js 설치

2. npm을 통한 express(expo포함) 설치

npm install express 
npm init -y

* package.json의 version 수정 (6.4.1)

3. react native 프로젝트 생성

expo init test-app

 -> blank, tab 스타일 선택, 타이틀 이름 설정 후 엔터

4. 프로젝트 실행

cd test-app

npm start

5. 핸드폰에 expo 앱 설치

6. expo앱으로 4의 QR코드 스캔 (같은 네트워크에 개발 단말, 데스크탑 연결)