[TIL #62] React-Native 초기 세팅

Whoyoung90·2021년 7월 13일
1
post-thumbnail
post-custom-banner

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

3. npm 설치

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

4. Android Studio 설치

공식 홈페이지에서 다운받은 후
AVD ManagerSDK 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인 듯!

profile
비전공으로 일식 쉐프가 되었듯, 배움에 겸손한 프론트엔드 개발자가 되겠습니다 :)
post-custom-banner

0개의 댓글