[React-native] 개발 환경 구축하기

부제: 에러 코드 수집하기ㅎ...ㅎㅎ ( ᵕ̩̩ㅅᵕ̩̩ )

- MacOS 기준, RN 공식문서 버전 0.63 기준으로 작성했습니다

 

 

1. node와 watchman을 homebrew를 통해 설치한다

brew install node
brew install watchman

node가 미리 설치되어 있다면 10 이상의 버전으로 설치되어 있는지 확인해주기

 

2. JDK를 homebrew를 통해 설치한다

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

JDK가 미리 설치되어 있다면 8 이상의 버전으로 설치되어 있는지 확인해주기

 

3. Xcode 설치하기

Xcode를 설치하지 않으면 error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template. 에러가 발생한다😂

 

4. Android studio 설치하기

• Android SDK
• Android SDK Platform
• Android Virtual Device

이 세가지가 모두 체크되어 있는지 확인하면서 설치를 진행하고, 설치가 다 끝났다면 Andorid studio를 실행한다

 

native code를 이용해 RN 앱을 빌드하려면 Android 10 (Q) 이상의 SDK 버전을 필요로 한다 

Android studio의 메인화면 하단 오른쪽의 "Configure" - "SDK Manager". - "SDK Platforms" 탭으로 들어간 뒤 오른쪽 하단의 "Show Package Details"을 체크해준다, 그 뒤 Android 10 (Q)항목에서

• Android SDK Platform 29
• Intel x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom System Image

항목이 선택되었는지 확인한다

그런 다음 "SDK Tools"탭을 선택하고 이 탭의 "Show Package Details"도 체크한다. "Android SDK Build-Tools"항목에서 29.0.2가 선택되었는지 확인한다

적용하고 닫기!

 

5. 대망의 환경변수 설정하기

export ANDROID_HOME=$HOME/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 쉘을 사용하고 있다면 $HOME/.bash_profile 또는 $HOME/.bashrc 파일에 추가한다

zsh 쉘을 사용하고 있다면 ~/.zprofile 또는 ~/.zshrc 파일에 추가한다

 

난 zsh 쉘이 디폴트 설정이었는데 ./bashrc 파일에 추가하는 바람에 삽질했다...👩🏻‍🌾

그리고 공식 문서에서는 이전에 글로벌 속성으로 react-native-cli 패키지를 설치했다면, 예상치 못한 문제가 발생할 수 있기 때문에 제거하는 것을 권장하고 있다(21.01.08 기준)

 

6. 프로젝트 생성하기

npx react-native init 프로젝트_이름

 

7. 프로젝트 실행하기

npx react-native run-android

 

---

* 버그 해결하기

 

1. What went wrong: Could not determine the dependencies of task ':app:installDebug'.

•  RN 프로젝트/android/gradle/wrapper/gradle-wrapper.properties 파일에서 distributionUrl로 시작하는 라인의 gradle 버전을 바꿔준다

distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

 

• RN 프로젝트/android 에서 local.properties 파일을 생성한 뒤 아래의 내용을 추가한다

sdk.dir = /Users/사용자이름/Library/Android/sdk

 

2. 터미널에서 adb devices 실행 시 command not found: adb 에러 발생

 

• (나는 bash 쉘을 사용하고 있으므로) .bash_profile 파일에서 아래의 내용을 추가한다

library/android/sdk/tools:${PATH}:/Users/사용자이름/library/android/sdk/platform-tools

저장하고 닫은 뒤 아래 코드로 바로 수정한 값 바로 적용하기(source 명령어 역할)

 source ~/.bash_profile

 

3. react-native run-android is unrecognized 에러

• RN 프로젝트/node_modules 폴더를 삭제하고 npm install 실행 - npx react-native run-android 실행

4. npx command not found 에러(react에 국한된 오류는 아니지만...)

• 아래 명령어로 npx 전역적으로 설치

sudo npm i -g npx