React Native - Android Studio & Xcode 환경 세팅(m2 macOS)

React Native

 

 

✅ iOS 세팅

---

1. brew install node
2. brew install watchman
3. 앱 스토어에서 Xcode 설치
4. Xcode settings -> locations에서 command line tools 선택
5. brew install cocoapods

 

✅ Android 세팅

---

1. brew install node
2. brew install watchman
3. brew install --cask zulu@17
4. code ~/.zshrc 로 파일 열고 맨 밑에
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home 추가
5. 안드로이드 스튜디오 Mac (64비트, ARM) 설치 (설치할 때 설정은 standard로)
6. 설치가 다 되면 More Actions 눌러서 SDK Manager에 들어간다.
7. Show Package Details을 누르고 Android 15 (VanillaIceCream)의 Android SDK Platform 35, Google APIs ARM 64 v8a System Image 선택 후 apply
8. SDK Tools 메뉴로 가서 Show Package Details을 누르고 Android SDK Build-Tools를 36.0.0 이상으로 체크, Android SDK Command-line Tools (latest) 체크 후 apply
9. 다시 code ~/.zshrc 로 파일 열고
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
맨 밑에 넣어준다.
10. source ~/.zshrc 명령어로 적용
11. java -version, echo $JAVA_HOME, adb version, echo $ANDROID_HOME 같은 명령어들 잘 나오면 완료.

 

https://reactnative.dev/docs/set-up-your-environment

Set Up Your Environment · React Native

 

 

✅ 테스트 프로젝트 생성

---

프로젝트 생성

npx @react-native-community/cli@latest init AwesomeProject

 

Android 실행

npx react-native run-android

 

iOS 실행

npx react-native run-ios

 

Metro 서버 실행

npm run start

(React Native 앱에 자바스크립트 코드를 실시간으로 전달해주는 개발용 서버)

 

 

✅ Boilerplate

---

1. Ignite

React Native 앱을 생성해주는 CLI

https://github.com/infinitered/ignite

GitHub - infinitered/ignite: Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model ge

 

2. Create React Native App(Deprecated)

deprecated됨

대신 Expo를 사용한다. Expo도 이제 native 파일에 접근이 가능하다.

(expo eject 혹은 expo prebuild시 접근 가능)

 

3. Create Expo App

npx create-expo-app@latest

https://reactnative.dev/docs/environment-setup

Get Started with React Native · React Native

 

프로젝트 실행

ios: 

npm run ios

expo start --ios

 

android:

npm run android

expo start --android

 

Native 코드 수정할 때

npx expo prebuild
npx expo run:ios