React-Native 초기 세팅 (mac 기준)

1. nvm 설치 (Node Version Manager)

2. node.js 설치

nvm은 한 컴퓨터안에서 여러 node.js 버전을 마음대로 설치할 수 있게 해주는 프로그램이다.

 

특정 버전의 node.js를 설치할 수 있지만, 여러 node.js의 버전을 설치해야 할 경우 대응이 불가능하기 때문에 nvm으로 설치한다.

 

원하는 node.js버전을 원하는 조건에 따라 사용할 수 있어서 용이하기 때문에 복수 버전을 설치하는 방법이 권장된다 한다.

 

구글에 "mac os nvm 설치하기"를 검색하고 오픈 소스로 올라온 글대로 설치하면 된다.

 

출처 : https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1

NVM(Node Version Manager) 맥OS에서 설치 & 사용하기

---

3. npm 설치

고맙게도 node.js를 설치하면 자동으로 npm도 함께 설치가 된다.

---

4. Android Studio 설치

공식 홈페이지에서 다운받은 후

AVD Manager와 SDK Manager에 이용하려는 프로그램을 체크하고 Apply해준다.

---

4-1. bash_profile에 환경변수 설정

터미널로 vi ~/.bash_profile을 다시 열고 nvm설치 시 입력했던 내용 위에 export 5가지를 추가해준다

 

export ANDROID_HOME=/Users/kim-wooyoung-MacBookPro/Library/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

# bash_completion

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

 

source ~/.bash_profile로 재실행(=시스템에 등록)

 

adb 입력해서

 

Android Debug Bridge version과 일반 Version

두가지가 뜨면 성공!

 

✅ 본인이 MacOS Catalina and zsh users 라면

bash_profile이 아니라 zshrc에 작성해야 한다!!

Android 시뮬레이터 오류 해결

---

5. Java 설치

리액트 네이티브로 안드로이드 앱을 개발하기 위해서는 JDK(Java Development Kit)를 설치해야 한다.

 

oracle java 사이트에서 JAVA SE 11(LTS)를 들어간 후,

해당하는 파일(mac OS installer)을 다운받는다.

 

버전 확인은 터미널에서 java --version 확인.

설치파일은 cd Library/Java/JavaVirtualMachines로 들어가 ls를 입력해보면 설치한 jdk가 뜬다.

(버전 확인하고 다시 최상위로 나오자!! => cd ..)

---

6.Xcode 설치

AppStore에서는 macOS11버전만 설치가능하다고 나온다. 아마도 m1이겠지...?

 

아래 버전은 apple delveloper사이트에서 본인 OS와 호환되는 버전을 다운받자.

 

용량이 제일 많다.. 무려 10GB..

 

 

설치 후 xcode - preferences - locations-Command Line Tools에

 

비어있는 박스를 클릭하여 다운받은 버전을 연결해주면 끝!

 

(나는 Xcode12.2)

---

7. Cocoapods 설치

ObjectC나 Swift로 개발된 오픈 라이브러리들을 내 프로젝트에 간편하게 확장시킬 수 있도록 도와주는 ios 프로그램이다.

 

최신 Cocoapods 버전은 낮은 OS와 Xcode버전과 호환이 안되는 문제가 있어서 버전을 명시하여 설치하였다.

 

$sudo gem install cocoapods -v 1.8.4

 

pod --version 입력 시 1.8.4가 나오면 성공!

 

😡 Blocking

pod --version 입력 시

TimeTrack 5-4-3-2-1부터 runtimeError 등등 꽤 긴 에러가 뜨면서 인식이 안됐었다.

전체 제거, 항목별 제거, 재설치(gem, brew)를 여러번 해봤지만 해결책은 어이없이 간단했다.

xcode-preferences-locations-Command Line Tools에 Xcode설정이 풀려있던 것 🥵

다시 재설정해주고 나니 1.8.4 버전으로 잘 떴다.

---

8. React Native CLI 설치

$npm install -g react-native-cli 설치

 

$react-native --version 버전 확인시

 

react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

 

이렇게 나오면 성공!

 

RN은 초기설정이 절반이라 한다... 처음 접하는 설정이다보니 조금 더뎠지만 오류없이 깔끔하게 마쳤다.

역시 네이티브 개발은 Mac인 듯!