[React-Native] 개발 환경 설정 for windows 10

개발 장비

• LG gram 15Z990-HA70K (16GB 메모리, 512GB SSD)
• Window 10 Pro

사용 IDE 및 언어

• vscode
• android studio
• node.js
• java 8 & openJDK
• cmder
• postman

프로젝트 생성

틈틈이 react-native 에 프로젝트 세팅에 대해 연구하고 테스트를 하였습니다.

expo를 이용하면 편할 것 같지만 여러 개선점이 있었고, react-native를 학습하고 싶은데 expo 이슈에 신경쓰게 되면 주객전도가 될 것 같아 expo를 사용하지 않습니다.

결국 개발 환경은 Create React Native App으로 하지 않고, react-native-cli을 통해서 진행합니다.

자바 외 다른 프로그램 설치 및 환경변수 설정은 생략하겠습니다.

링크 React-Native 설정

1. react-native cli 설치

npm install -g react-native-cli

2. 프로젝트 생성

react-native init 프로젝트명
예) react-native init HelloWorld

3. 프로젝트 확인

실행을 하면 에뮬레이터나 단말기에 화면이 나타나게 됩니다. 그러나 한 번에 동작하지 않고 빌드 중에 오류가 날 것 입니다. 구글링을 통해 쉽게 해결할 수 있습니다.
(추후 이슈 해결에 대한 글을 작성하겠습니다.)

cd /
cd 프로젝트명

// ios
react-native run-android

// android
react-native run-ios

4. 라이브러리 설치 (선택)

처음 리액트를 접했을 때 라이브러리 없이 진행하였습니다. 하다보니 역시 라이브러리는 개발에 있어 시간 절약 및 효율성을 높이기 때문에 작성하였습니다.
(추후 신규 게시물에 도움이 되는 라이브러리 설치 목록을 작성하겠습니다.)

// nativebase 
npm install native-base --save 

// 네비게이션
npm install react-navigation --save 
npm install react-native-gesture-handler --save 

// vertor icon
npm install react-native-vector-icons --save

// 설치된 라이브러리와 프로젝트 연결
react-native link 

링크

React-Native 공식 사이트
NativeBase 공식 사이트
reactnavigation 공식 사이트
vector-icons 공식 사이트