[RN] React-Native 시작하기
저는 Mac을 사용하고 있습니다.
Mac 기준으로 작성하였습니다.
아래의 CRNA
는 테스트 했을 때 신기하더군요~ :)
당연한 것이지만, 최초 가이드 문서는 페이스북 github 홈페이지의 react-native의 문서페이지.. 아래의 getting-started
를 우선 들어가보시면 됩니다.
그럼 기본적으로 Xcode 나 android studio 설치 및 설정은 getting-started에서 참고해서 하신 것이라 생각하고 .. RN 설치관련 된 부분만 작성합니다.~
- Getting Started에서 자신의 운영체제와 Target OS를 선택해서 가이드를 참고하면 됩니다.
React-Native 셈플 파일 실행을 위한 과정입니다.
최소한의 설치
- 당연히 brew를 설치
https://brew.sh/index_ko
2. npm 을 사용하기 위해 node를 설치
$ brew update
$ brew uninstall node
$ brew install node
$ brew postinstall
3. npm 설치 확인
$ npm —-version
샘플 APP 설치를 위한 2가지 방법
샘플 앱 실행을 위해서는 크게 2가지가 존재합니다.
CRNA (Create-react-native-app)
Xcode나 android studio를 설치할 필요가 없는 방식
바로 실행해 보길 원하는 경우
이제 맥이 필수가 아닙니다.
해보지는 않았지만 Expo 를 이용하면, android studio, Xcode 가 필요없이 개발 진행을 도와주고, Expo Clint로 테스트 도 쉽게 되는 것 같습니다. 테스트 샘플 진행은 Expo없이 진행한 내용입니다.
- 패키지 메니저로 설치하고
$ npm install -g create-react-native-app
2. 프로젝트를 생성합니다.
$ create-react-native-app 프로젝트명
3. 그리고
$ cd 프로젝트 명
$ npm start
4. 결과를 보면..
5. 먄약 실행이 안된다면
Android: USB에 안드로이드 폰을 연결하세요.
https://developer.android.com/studio/run/device.html#developer-device-options
그리고 실행후에는 안드로이드 폰은 노트북과 같은 Wi-Fi에 있어야 됩니다.
or
노드는 설치가 되어있으셨을 것이고.. 이것을 한번 설치해보세요.$ brew install watchman
6. Readme.md 파일 확인
자세한 설명은 프로젝트 Readme.md에 나와있습니다.
구조를 보면 ios, android 와 같은 폴더가 없습니다.
React-native 명령어를 이용하는 방법
이전 react native를 사용하는 보통의 개발 방법입니다.
이후에 CRNA가 2017년에 나왔죠.. 앞으로는 CRNA를 권장할 가능 성도 있을 것 같습니다.
react-native 명령어를 이용하는 방법은 iOS 개발을 위해 Mac이 꼭 필요하죠..
- 커멘드 라인 도구의 설치
$ npm install -g react-native-cli
2. 신규 프로젝트 초기 설치는
$ react-native init 프로젝트명
$ cd 프로젝트명
$ react-native run-iosor $ react-native run-android
3. Error 발생시?
처음에 언급한 getting-started Site에서 빠진 부분이 없는 지 확인해야됩니다.
iOS : Xcode -> Preferences -> Locations -> Command Line Tools 의 설정이 빠져있다면 설정해주세요.
android: JDK 설치 유무확인, SDK Manager에서 필수 설치 미설치 여부 확인
참고 (기타 메모사항)
1. NVM : 버전 관리자(Node Version Manager): Node.js의 도구
https://stackoverflow.com/questions/31472755/sudo-npm-command-not-found
https://ko.wikipedia.org/wiki/NVM
2. NPM : 패키지 관리자(Node Packeage Manager)의 약어 입니다.
npm is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code
3. -g 옵션은
$ npm install -g ..
-g를 하면 글로벌 패키지에 추가됩니다.
글로벌 패키지에 추가하면 이 프로젝트뿐만 아니라 다른 프로젝트도 해당 패키지를 사용할 수 있습니다.
테스트 할때의 버전정보
- mac : 10.13.6(17G65)
- jdk : Java SE Development Kit 8u181
- android studio : 3.1.4
- Xcode : 9.4.1
- brew
$ brew — version
Homebrew 1.7.1
Homebrew/homebrew-core (git revision bda6; last commit 2018–08–13)
- react-native
$ react-native — version
react-native-cli: 2.0.1
react-native: 0.55.4
- yarn
$ yarn — version
1.9.4
- CRNA
$ create-react-native-app — version
create-react-native-app version: 1.0.0
- node
$ node — version
v10.8.0
- npm
$ npm — version
6.2.0
- nvm
$ nvm — version
0.33.0
기타
개발도구 (Text Edit)
개발도구는 VSC(Visual Studio Code)를 사용했습니다.
설치 후에 확장
기능에서 React Native Tools
를 추가로 설치하고 사용하시면 됩니다.
- 속도도 빠르고, 정의로 이동하는 링크기능도 잘 되고.. 검색해보니 많이들 사용하는 것 같아서 사용했습니다.
좋은 하루되세요. 🙇