[React Native] React native cli - typescript 설치 및 프로젝트 생성 (mac 환경)

react native 를 시작하는 방법이 두 가지가 있는데, 하나는 expo 라는 것이고 하나는 cli 다.

expo 는 시작하기도 쉽고 배포하기 쉽다. 단... 앱이 무진장 무거워지는데다 네이티브 link 가 안된다.

그래서 눈을 돌린 것이 cli 다. cli 는 시작하기 좀 번거롭고 배포하기도 어렵지만, expo 앱에 비해 가볍고 네이티브 link 가 된다.

 

React native Cli 설치

react native cli 를 위해 다음의 사항들이 필요하다

- nodejs : js 런타임
- yarn : nodejs 패키지 관리자
- watchman : 소스코드 변경이 일어나면 자동 갱신
- react-native-cli : 우리가 써야할 애  ^^
- xcode : ios 네이티브 개발 툴
- cocoapod : ios 의존성 관리자
- android studio : 안드로이드 네이티브 개발 툴
- jdk8 : 안드로이가 java 를 써서.. 

 

각 설치 방법은 아래와 같다.

 

- 패키지 등등 설치

brew install node
brew install yarn

brew install watchman

npm install -g @react-native-community/cli
sudo gem install cocoapods

brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk8

 

- 안드로이드, xcode 설치

android studio 와 xcode 는 아래 주소에서 다운로드 한다.

안드로이드 설치 주소

xcode 설치 주소

 

안드로이드를 설치할 때는 맞춤 설치를 하여

- Android SDK
- Android SDK Platform
- Perfomance(Intel HAXM)
- Android Virtual Device 

를 선택해 설치한다.

 

안드로이드 설치 후 sdk manager 에서 show package details 를 선택하고 사용할 Android version 을 펼치기한다.

- Android SDK Platform version
- Intel x86 Atom System Image
- Google APIs Intel x86 Atom System Image
- Google APIs Intel x86 Atom_64 System Image 

를 선택 후 ok 를 누르면 설치된다.

 

또 sdk 환경변수를 설정해줘야 한다.

vi ~/.bash_profile

i 를 입력하면 입력모드가 된다.

i를 입력하고 붙여넣을 데로 이동한 후 아래를 붙여넣는다.

sdk 경로는 sdk manager 에서 확인 가능하다.

export ANDROID_HOME=SDK경로/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

 

만약 sdk 오류가 난다면 ~/.zshrc 도 수정해준다.

 

잘 되었는지 확인하기!

아래 명령어를 입력하여 설치가 잘 되었는지 확인해보자

yarn --version
node --version
react-native --version
pod --version
java -version
javac -version
adb

 

프로젝트 생성

별도의 설정 없이 typescript 로 바로 시작하는 명령어

npx react-native init my-app --template react-native-template-typescript

 

만약 코드의 import 문에 빨간 줄이 그인다면 아래를 실행해라.

npm install @types/react @types/react-native --save-dev

 

프로젝트 실행

아래 명령어를 실행하면 각 애뮬레이터들이 실행된다.

npm run android
npm run ios