[RN] 📑CLI로 React Native 시작하기

▷ CLI로 React Native 시작하기

# 설치
brew install watchman
sudo gem install cocoapods
# pod 버전 업데이트하기
# sudo gem update cocoapods

# 프로젝트 생성
npx react-native@latest init 폴더이름

---

📑 Mac에서 IOS 개발을 위한 세팅

ruby 버전 오류가 뜬다면

# Ruby 버전 맞춰주기
# 1. rbenv 설치 
     brew install rbenv ruby-build
# 2. ruby 설치
     rbenv install 2.x.x
# 3. ruby 버전 번경
     rbenv global 2.x.x
# 4. ruby path 수정
     vi ~/.zshrc
#    i를 눌러 입력모드로 => 아래 코드를 맨 아래에 붙여넣기 => :wq로 저장 후 닫기
     eval "$(rbenv init - zsh)"

Metro 번들러 시작하기

yarn start
# 또는
# npx react-native start
# port 번호 다르게 시작
# npx react-native start --port=8082
# 캐시 리셋
# npx react-native start --reset-cache

pod 설치

cd ios
pod install

ios/.xcode.env 파일

// ios/.xcode.env 파일에서
// export NODE_BINARY=$(command -v node) 를
// export NODE_BINARY=your_node_path 로 바꿔야 함
export NODE_BINARY=/Users/myuser/.nvm/versions/node/v20.12.2/bin/node

ios 실행

npm run ios
# 또는
# npx react-native run-ios
# 특정 기기로 실행
# npx react-native run-ios --simulator=\"iPhone 15 Pro\"
# 기기 확인
# xcrun simctl list devices

---

📑 Mac에서 android 개발을 위한 세팅

# 설치
brew tap homebrew/cask-versions
brew install --cask zulu11

⒈ 모바일 에뮬레이션 Android Studio 설치

참고

# 설치
brew install --cask android-studio

(Android SDK Android SDK Platform Android Virtual Device 가 체크되어 있는지 확인 후 설치하기)

⒉ Android Studio의 SDK Manager에 들어가 공식문서를 보며 설정해주기

⒊ Android Studio의 설정에서 경로 확인

# 1. 수정하러 가기
vi ~/.zprofile

# 2. i를 눌러 입력모드로 => 아래 코드를 붙여넣기 => :wq로 저장 후 닫기
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

# 환경 설정 파일이 로드
source $HOME/.zprofile

# 경로 확인하기
echo $PATH

⒋ Metro 번들러 시작하기

npm start
# 또는
# npx react-native start

⒌ android 실행

npm run android
# 또는
# npx react-native run-android

# 디바이스들 확인
# emulator -list-avds
# 특정 디바이스 실행
# emulator -avd Pixel_8_Pro_API_33 & npx react-native run-android

---

🗑️ 캐시 제거

# ios 캐시 제거
cd ios
rm -rf Podfile.lock Pods
pod install
yarn ios

# android 캐시 제거
cd android
./gradlew clean
./gradlew build


# ios
yarn cache clean
rm -rf ios/build ios/Pods node_modules
yarn install
cd ios && pod install && cd ..
yarn ios

# xcworkspace에서 빌드하기
Shift + Command + K # 빌드 캐시 초기화
Command + R # 다시 실행

---

🫢 Error - watchman

npm start로 실행했을 때
'watchman warging: Recrawled this...'오류가 뜬다면

# 차례대로 입력
watchman watch-del-all
watchman shutdown-server

그럼에도 계속 오류가 뜬다면 재설치

watchman shutdown-server
brew update
brew reinstall watchman
watchman

---

🫢 Error - adb

a 입력으로 android를 실행시킬 때
'...AdbCommandRejectedException: closed'오류가 뜬다면

# 차례대로 입력
adb kill-server
adb start-server

---

🫢 Error - 안드로이드 빌드 오류 kotlin

'Task :app:compileDebugJavaWithJavac FAILED w: Detected multiple Kotlin daemon sessions at build/kotlin/sessi'

안드로이드 빌드 중 위와 같은 오류가 발생했다.

android/build.gradle파일을 열어서 kotlin에 대한 정보를 추가해주면 된다.

/* android/build.gradle */
buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33
        kotlin_version = '1.6.10' // 추가⭐️

        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version") // 추가⭐️
    }
}

---

🫢 Error - No bundle URL present

No bundle URL present

yarn react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'

---

🫢 Warn - customiseView

Introducing Bridgeless Mode