# react-native
## 설치
node.js 설치
-
yarn 설치 (빠른 npm)
-
패키지 인스톨
```
npm install -g expo-cli
```
```
yarn install
```
실행
```
yarn start
```
Nox 플레이어 설치
- https://kr.bignox.com/
Adb Path 추가
- 환경변수 Path 에 Nox\bin 폴더 추가
- 기존 안드로이드스튜디오 개발환경에서 adb 설치되어있을 수 있음. 이때, nox\bin 의 adb version 과 android 쪽 adb version 맞춰주어야 함.
## 디버깅
Redux Chrome 개발자툴 설치
- [크롬 Extention](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
React Native Debugger 설치
- https://github.com/jhen0409/react-native-debugger/releases
디버거 연결
- 1. React Native Debugger 실행
- 2. yarn start 로 앱 실행
- 3. a 키 입력하여 nox 에서 앱 실행
- 4. 휴대폰 흔들기 메뉴 클릭(2번 눌러야 메뉴열림)
- 5. 메뉴에서 Debug 실행
- 6. React Native Debugger 에서 Ctrl+T 실행 하여 포트 선택후 확인
(이제 디버깅 됨.)
## 환경설정
/src/Config/index.js 파일 (운영환경)
_Production Mode 및 배포하였을때 index.js 의 BASE_URL 및 WEB_URL 이 반영되어 실행됨._
- /src/Config/index.js.example => /src/Config/index.js 로 복사
/src/Config/index.development.js 파일 (개발환경)
_Development Mode 에서 디버깅시 index.development.js 의 BASE_URL 및 WEB_URL 이 반영되어 실행됨._
- /src/Config/index.development.js.example => /src/Config/index.development.js 로 복사
/src/Config/index.development.js 파일 편집
- BASE_URL 에 http://localhost:9090 => http://[본인내부IP]:9090 로 변경
```
BASE_URL=http://[API주소]
```
## 실행
api.ezwork.kr 백앤드에 연결하여 실행
- yarn start-cottus
api.makething.co.kr 백앤드에 연결하여 실행
- yarn start-fronnix
api.i-fms.net 백앤드에 연결하여 실행
- yarn start-hdc-icontrols
/src/Config/index.development.js 파일의 BASE_URL 에 기입된 백앤드에 연결하여 실행
- yarn start
## 배포
!! 배포전 yarn increase-version : 버전관리
cottus(api.ezwork.kr) 계정에 배포 (내부테스트)
- 1. yarn start-cottus 로 프로젝트 실행
- 2. 새로운 Command Prompt 를 연다. (WinKey + R => cmd => Enter)
- 3. 프로젝트 폴더로 이동.
- 4. expo publish 로 배포시작 (오류가 발생할때가 있는데 expo publish 를 다시 하면 배포된다.)
fronnix(api.makething.co.kr) 계정에 배포 (Icontrols 테스트)
- 1. yarn start-fronnix 로 프로젝트 실행
- 2. 새로운 Command Prompt 를 연다. (WinKey + R => cmd => Enter)
- 3. 프로젝트 폴더로 이동.
- 4. expo publish 로 배포시작 (오류가 발생할때가 있는데 expo publish 를 다시 하면 배포된다.)
hdc-icontrols(api.i-fms.net) 계정에 배포 (운영)
- 1. yarn start-hdc-icontrols 로 프로젝트 실행
- 2. 새로운 Command Prompt 를 연다. (WinKey + R => cmd => Enter)
- 3. 프로젝트 폴더로 이동.
- 4. expo publish 로 배포시작 (오류가 발생할때가 있는데 expo publish 를 다시 하면 배포된다.)
## UI Components
Expo
- https://docs.expo.io
React Native
- https://facebook.github.io/react-native/docs/getting-started
React Navigation 4
- https://reactnavigation.org/docs/en/getting-started.html
Styled Component
- https://www.styled-components.com/docs/basics#react-native
Galio Framework
- https://galio.io/
React Hook Form
- https://react-hook-form.com/kr/get-started#Quickstart
Lottie React Native
- https://github.com/react-native-community/lottie-react-native
## 참고 자료
es6 문법
-
랜덤 데이터 API
-