[React Native] m1 에서 React Native 개발환경 세팅 및 프로젝트 생성(2024 ver)

M1 의 기본적인 개발환경 세팅은 끝마친 상태입니다(Rosetta, iterm, homebrew)

맥으로 개발을 한다면 위의 3가지는 기본적으로 세팅이 완료되어 있어야 합니다~!

노마드 코더(니콜라스) 의 영상이 제일 정확하고 따라하기 쉽기 때문에 해당 영상을 참고해서 세팅해주세요

https://www.youtube.com/watch?v=B26yiuC5zPM

 

2024/06/17 기준으로 작성된 버전이며, react-native의 업데이트에 따라 설정 방법이 바뀔 수 있기 때문에 정확한 설정은 react-native의 공식 문서를 참조하시길 바랍니다.

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

Set Up Your Environment · React Native

 

 

MacBook Air (M1)

macOs : Sonoma 14.5

Xcode : 15.4

node : v20.14.0

nvm : 10.7.0

npm : 0.39.3

ruby : 3.3.2

rbenv : 1.2.0

watchman  : 2024.05.06.00

cocoapods : 1.15.2

zava : openjdk 17.0.11

 

 

---

공통 세팅

1. Node.js, watchman 설치

watchman은 파일 변화를 감지 해주는 툴입니다.

brew install node
brew install watchman

2. ruby 설치

brew install ruby

3. cocodpods설치

sudo gem install cocoapods
pod --version

정상적으로 설치가 완료되면 pod --version 으로 설치된 버전을 확인할 수 있습니다.

 brew install이 rosetta2 어쩌고 안되면 : arch -arm64 brew install [package] (터미널에 나온 에러메세지 그대로 해주시면 됩니다)

 

iOS 세팅

1. Xcode설치

https://developer.apple.com/download/all/?q=Xcode

예전 기억에 따르면 Xcode는 앱스토어보다 사이트에서 설치하는게 훨씬 시간이 단축돼서 이번에도 사이트에서 다운로드 해줍니다.

사이트에서 본인 macOs 에 맞는 버전을 설치하시면 됩니다.

(한동안 os 업데이트 안한 상태에서 최신버전인 Xcode 15.4 설치 했다가 os 버전 안맞다고 해서 업데이트부터 했네여..) 

 

압축파일 푼 다음, app파일을 Applications 로 이동시켜주면 됩니다.

(기존에 xcode가 깔려있는 경우 replace!)

 

설치 후 Settings -> Locations 에서 Command Line Tools 에 문제 없이 선택 되어있는지 확인!

 

2. Simulator 추가

Xcode 설치가 끝났다면 Simulator을 추가해줘야 합니다.

Window -> Devices and Simulators 탭으로 이동 후 하단의 + 버튼을 클릭하여 원하는 simulator을 추가해주면 되는데 (react-native를 실행할때 기본적으로 iPhon 13이 지정되어 있는건지.. iPhone 13이 없으면 실행이 잘 안돼서 iPhone 13은 필수적으로 추가해줬습니다)

 

 

---

Android 세팅

1. java 17 설치

최신 reactive-native에서는 java17을 권장하기 때문에 해당 버전을 설치해줍니다. 

brew install --cask zulu@17

# Get path to where cask was installed to double-click installer
brew info --cask zulu@17

 

java 경로 설정

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

java 가 정상적으로 설치되면 java --version 을 통해 버전 확인이 가능해야 합니다.

 

저는 openjdk@17을 설치했습니다 (julu, openjdk 둘 중 아무거나 설치해도 됩니다 17이기만 하면)

arch -arm64 brew install openjdk@17
// 권한 에러 나오면
sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexe/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk

// 컴파일 환경 설정 (선택사항)
export CPPFLAGS="-I/opt/homebrew/opt/openjdk@17/include"

//환경변수
echo 'export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

//버전 확인
java -version

 

 

2. Android Studio 설치

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

 

저는Apple chip을 사용하고 있기 때문에 Mac with Apple chip 용 android studio를 설치해줍니다.

 

3. Android SDK

SDK Manager에서 sdk 경로 설정 및 추가적으로 필요한 tool들을 설치해줍니다.

1. More Actions -> SDK Manager

2. Open 옆의 .. -> SDK Manager

3. Settings -> Languages & Frameworks -> Android SDK 

 

SDK Location을 지정 후 확인 해주시고

SDK Platforms(Show Package Details 클릭) : Android SDK Platform 34, Google APIs ARM 64 v8a System Image

SDK Tools : Android SDK Build-Toos (34가 설치되어 있어야함), Android SDK Command-line Tools (latest)

 

는 기본적으로 설치를 해줘야하고 저는 그냥 필요해 보이는거 추가적으로 더 설치했는데 필수인지는 모르겠네요..ㅎㅎ

 

4. Virtual Device 생성

Virtual Device Manager에서 가상머신을 등록해줍니다.

+ 버튼을 클릭해서 원하는 사이즈를 선택해주고(저는 Pixel 4 를 선택했습니다), system imageSMS 제 API Level 인 34에 맞게 UpsideDownCake로 지정해줬습니다.

 

 

5. ANDROID_HOME 환경변수 설정

설치가 완료되면 .zshrc 파일(또는 .zprofile 또는 .bash_profile, 또는 .bashrc 본인이 사용하는 config 파일에 맞게) 에서 환경변수 설정을 해줍니다.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

 

제대로 설정되면 아래 명령어를 입력시 설정한 경로가 나와야합니다.

echo $ANDROID_HOME

 

6. local.properties android sdk 설정

android 폴더 밑에 local.properties 파일을 생성해 준 뒤 sdk 경로를 적어줍니다.

 

여기까지 진행해주시면 안드로이드를 위한 개발 환경 세팅도 갖춰졌습니다!

 

 

 

프로젝트 생성 및 실행

저는 기존에 expo cli를 설치했었는데 이게 react-native cli 를 설치할 때 충돌이 발생할 수 있기 때문에 전역으로 설치했던 npm 을 삭제 후 프로젝트 단위로 설치해주도록 하겠습니다.

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

npx react-native init [PROJECT_NAME]

// npx react-native init MyApp

 

CocoaPods now? y

여기서 설치를 하지 못했다면? 생성한 프로젝트 root에서

cd ios
pod install

 

 

iOS 프로젝트 실행

npx react-native run-ios

 

해당 코드를 입력하면 새로운 터미널이 열리고, 저는 ios를 구동시킬거라 i 를 입력해줍니다

 

 

시뮬레이터가 뜨고, 빌드가 오래걸려도 참고 기다리시면..! 

 

 

success 가 뜨고 메인 화면이 나오게 됩니다.

 

난 13 말고 다른 시뮬레이터를 사용하고 싶다..?! 그럼 지정해주면 됩니다.(아니면 시뮬레이터를 먼저 구동 후 프로젝트를 실행하면 됩니다)

npx react-native run-ios --simulator='iPhone 15'

 

 

+ cocoapods 할때 ruby 와 gem 버전이 어쩌고 저쩌고 한다면

프로젝트만 생성하고

폴더 내의 Gemfile 에 명시되어있는 ruby version 을 본인이 사용하는 version 으로 변경 후 sudo gem install cocoapods 해주기

 

Android 프로젝트 실행

 

 

프로젝트를 실행하기 전에 

Android Studio의 Device Manager에 들어가서 미리 등록해둔 가상디바이스를 먼저 구동시켜줍니다.

 

그 후 프로젝트를 실행해주시면 (경로는 프로젝트 root 입니다.)

npx react-native run-android

ios와 동일하게 새로운 터미널이 열리는데 여기서 안드로이드는 a를 입력해주면 됩니다.

 

build가 끝난 후 메인페이지가 뜬다면 구동 성공~!

 

 

 

 

분명 정리하면 간단한데 생각보다 작은 에러들을 맛봤던 react-native cli 세팅 과정..!

이상.. m1에서 react native 프로젝트 생성 완료입니다

궁금하신 점이 있다면 댓글로 남겨주세요~! (도움되는 답변을 드릴 수 있을지는 미지수지만..ㅎㅎ)