[RN] ๐Ÿ“‘CLI๋กœ React Native ์‹œ์ž‘ํ•˜๊ธฐ

TATAยท2023๋…„ 7์›” 18์ผ
0

React-Native

๋ชฉ๋ก ๋ณด๊ธฐ
1/7

โ–ท 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 ๋ฒˆ๋“ค๋Ÿฌ ์‹œ์ž‘ํ•˜๊ธฐ

npm start
# ๋˜๋Š”
# npx react-native start
# port ๋ฒˆํ˜ธ ๋‹ค๋ฅด๊ฒŒ ์‹œ์ž‘
# npx react-native start --port=8082

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/v18.15.0/bin/node

ios ์‹คํ–‰

npm run ios
# ๋˜๋Š”
# npx react-native run-ios

๐Ÿ“‘ Mac์—์„œ android ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ์„ธํŒ…

# ์„ค์น˜
brew tap homebrew/cask-versions
brew install --cask zulu11

โ’ˆ ๋ชจ๋ฐ”์ผ ์—๋ฎฌ๋ ˆ์ด์…˜ 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

๐Ÿซข 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") // ์ถ”๊ฐ€โญ๏ธ
    }
}
profile
๐Ÿพ

1๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2023๋…„ 7์›” 18์ผ

์ •๋ง ์ข‹์€ ๊ธ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ