[RN] React-Native 시작하기

저는 Mac을 사용하고 있습니다.
Mac 기준으로 작성하였습니다.

아래의 CRNA는 테스트 했을 때 신기하더군요~ :)

당연한 것이지만, 최초 가이드 문서는 페이스북 github 홈페이지의 react-native의 문서페이지.. 아래의 getting-started를 우선 들어가보시면 됩니다.

Getting Started · React Native

그럼 기본적으로 Xcode 나 android studio 설치 및 설정은 getting-started에서 참고해서 하신 것이라 생각하고 .. RN 설치관련 된 부분만 작성합니다.~

• Getting Started에서 자신의 운영체제와 Target OS를 선택해서 가이드를 참고하면 됩니다.

React-Native 셈플 파일 실행을 위한 과정입니다.

최소한의 설치

1. 당연히 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없이 진행한 내용입니다.

Expo

1. 패키지 메니저로 설치하고

$ 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이 꼭 필요하죠..

1. 커멘드 라인 도구의 설치

$ npm install -g react-native-cli

2. 신규 프로젝트 초기 설치는

$ react-native init 프로젝트명
$ cd 프로젝트명
$ react-native run-ios
or 
$ 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)를 사용했습니다.

Visual Studio Code - Code Editing. Redefined

설치 후에 확장 기능에서 React Native Tools를 추가로 설치하고 사용하시면 됩니다.

• 속도도 빠르고, 정의로 이동하는 링크기능도 잘 되고.. 검색해보니 많이들 사용하는 것 같아서 사용했습니다.

좋은 하루되세요. 🙇