728x90

참고문서

[RN] React-Native 시작하기

medium.com/@jang.wangsu/rn-react-native-%EC%8B%9C%EC%9E%91-3aab881f574f

Introduction

reactnative.dev/docs/getting-started

 

1. React-Native 시작하기 전

Homebrew 설치하기

brew.sh/index_ko

 

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

 

npm 을 사용하기 위해 node 설치

$ brew update
$ brew uninstall node
$ brew install node
$ brew postinstall

 

npm 설치확인

$ npm --version

 

 

 

 

Yarn 설치하기

$ npm install --global yarn


/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.4

 

 

2. React-Native 를 위한 2가지 방법

샘플 앱 실행을 위해서는 크게 2가지가 존재합니다.

 

1. CRNA (Create-react-native-app)를 이용하는 방법

Xcode나 android studio를 설치할 필요가 없는 방식으로 바로 실행해 보길 원하는 경우에 이용합니다.

이때 Expo 를 이용하면, android studio, Xcode 가 필요없이 개발 진행을 도와주고, Expo Clint로 테스트도 가능합니다.

 

2. React-native 명령어를 이용하는 방법
이전 react native를 사용하는 보통의 개발 방법입니다.
CRNA가 2017년 나왔으며 앞으로는 CRNA를 권장할 가능성이 있습니다.
react-native 명령어를 이용하는 방법은 iOS 개발을 위해 Mac이 꼭 필요합니다.

 

 

2-1. CRNA (Create-react-native-app)를 이용하는 경우, 설치

-- CRNA 설치

$ npm install -g create-react-native-app

-- 프로젝트를 생성합니다.

$ create-react-native-app 프로젝트명
$ cd 프로젝트 명
$ npm start

 

먄약 실행이 안된다면

Androi인 경우는 USB에 안드로이드 폰을 연결하세요.
https://developer.android.com/studio/run/device.html#developer-device-options
그리고 실행후에는 안드로이드 폰은 노트북과 같은 Wi-Fi에 같이 존재해야 합니다.

 

 

노드는 설치가 되어 있다면 아래  watchman 설치, 자세한 설명은 프로젝트 Readme.md에 나와있습니다.

$ brew install watchman
6. Readme.md 파일 확인

 

 

2-2. React-native 명령어를 이용하는 방법

-- react-native-cli 설치

$ npm install -g react-native-cli

-- react-native 를 설치하진 마세요.

$ react-native init 프로젝트명
$ cd 프로젝트명

$ react-native run-ios
또는 
$ react-native run-android

* npm install -g react-native  을 설치하지 마세요.

 

Error 발생시

처음에 언급한 getting-started Site에서 빠진 부분이 없는지 확인해야 됩니다.

 

iOS : Xcode -> Preferences -> Locations -> Command Line Tools 의 설정이 빠져있다면 설정해주세요.

Android: JDK 설치 유무확인, SDK Manager에서 필수 설치 미설치 여부 인해야 합니다.

 

테스트 버전정보

$ brew --version
Homebrew 2.4.2
Homebrew/homebrew-core (git revision 94f44; last commit 2020-06-30)

$ react-native --version
react-native-cli: 2.0.1
react-native: 0.62.2

$ yarn --version
1.22.4

$ create-react-native-app --version
3.5.0

$ node --version
v14.4.0

$ npm --version
6.14.4

 

+ Recent posts