RN - mac OS에서 개발 환경 세팅

1. brew 설치여부 확인

brew -v

🧐 설치가 안되어 있다면 👇

https://brew.sh/index_ko

Homebrew

2. rbenv 설치

brew install rbenv

react native에서 ruby가 필요하다. rbenv는 ruby를 버전별로 지원한다.

 

3. ruby 2.7.6 설치 (2023년 3월 기준)

rbenv install 2.7.6

rbenv global 2.7.6
rbenv rehash

gem install bundler

4. node, npm 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm install --lts

node -v
npm -v

5. watchman 설치

brew install watchman

watchman -v

 

6. JDK 설치 (*JDK : Java Development Kit)

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

java -version
javac -version

7. Xcode 설치

App Store에서 다운로드 가능

Xcode settings > Locations > CommandLineTools에 정상설치 확인

8. 안드로이드 스튜디오 설치

https://developer.android.com/studio 여기에 접속해서 다운로드 및 설치하기

 

8-1. 안드로이드 환경변수 설정

$HOME/.zshrc 파일 수정

$HOME/.bash_profile or $HOME/.bashrc (카탈리나 미만 버전)

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

adb 명령어 입력시 아래와 같이 나오면 성공

command not fond error 발생시 

터미널에 source .bash_profile 을 입력하고 실행해본다.

그래도 실행이 안될 경우, 환경변수를 올바르게 설정했는지 확인해본다.

 

9. CocoaPods

sudo gem install cocoapods

10. React Native CLI 설치

npm install -g react-native-cli

11. react-native 프로젝트 생성

npx react-native init 프로젝트명

cli로 설치한 경우 package.json에 생성된 script가 "start" 밖에 없을 것이다.

npm run start 명령어 입력후 

아래 터미널창에서 옵션 입력을 통해 ios, android가 실행되는 줄 알았으나,,,

저기서 더 진전이 되지 않는다..

 

대안) react-native-cli를 global 로 설정하지 말자

* 일단 10번에서 글로벌로 설치한 cli를 삭제한다.

 npm uninstall -g react-native-cli @react-native-community/cli

** cli 삭제 후 11번 재실행

 

12. ios 실행

> 실행 전 pod install 해주자

npm run ios

실행시 오류가 발생한다면,,,

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path ~파일경로/ReactNative/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '~파일경로/ReactNative/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

 

아차차.. ios 폴더에 들어가서 명령어를 실행해주자

cd ios
npm run ios

실행화면

13. 안드로이드 실행

우측상단 모바일 아이콘 클릭 > Deivce Manager 실행 > Create Device

하드웨어 선택, 시스템 이미지 설치 (Recommended 중 가장 최신버전 설치 권장)

 

시스템 이미지까지 생성완료 후 디바이스가 생성된 것을 확인할 수 있다.

 

Actions 의 재생버튼을 클릭하면 안드로이드 시뮬레이터가 구동되면서 아래와 같은 실행화면을 확인할 수 있게 된다.

 

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

 

#1. gradle이 캐싱되어서 제대로 작동하지 않을 수 있다.

~/.gradle로 이동

rm -r .gradle

 

#2. 위 명령어 실행시 permission denied 될 경우

license에 동의해줘야 한다.

Review licenses that have not been accepted (y/N)? -> y 입력

 

#3. Execution failed for task ':react-native-gradle-plugin:compileKotlin'.

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
e: /Users/(중략)/node_modules/react-native-gradle-plugin/src/main/kotlin/com/facebook/react/tasks/BundleHermesCTask.kt: (138, 11): This declaration is experimental and its usage must be marked with '@kotlin.ExperimentalStdlibApi' or '@OptIn(kotlin.ExperimentalStdlibApi::class)'

 

찾아보니 gradle 7.5이상 부터 해당 오류가 발생하지 않는다고 하여, 버전을 변경해줬다.

https://stackoverflow.com/questions/74401011/kotlin-experimentalstdlibapi-or-optinkotlin-experimentalstdlibapiclass/74544868#74544868

'@kotlin.ExperimentalStdlibApi' or '@OptIn(kotlin.ExperimentalStdlibApi::class)'

## 버전 변경 방법

android studio 프로젝트 파일 열기 > gradle >gradle-wrapper-properties 클릭 > distributionUrl 7.5.1 로 변경

distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-bin.zip

우측 상단 Sync Project with Gradle Files 클릭하면 해당버전을 재설치한다.

#4. 잘 되는 줄 알았으나.. 또 다시 마주한 에러 ..ㅎ

Error: spawnSync adb ENOENT

 

android-platform-tools 가 없어서 나는 오류이다.

(어..왜지..? 아까 분명 설치해준것 같은데..)

brew install --cask android-platform-tools

버전확인해주기

그리고 다시 안드로이드를 실행해본다...젭알!

드디어 성공했다..