ARM mac(m1, m2,...)에서 React Native 개발환경 세팅하기

최초 작성일 : 2023.08.31

최종 수정일 : 2023.09.01

 

1. 개요

맥북을 포맷하고 새로 React Native 개발 환경을 세팅하려고 보니 세팅 방법이 좀 바뀌어 있었다.

최신 버전에 맞게 React Native 개발환경을 세팅해보자.

참고로 이 글은 대부분 공식 문서를 참고하고 있으니 homebrew같은 기본적인 세팅이 되어있다면 공식 문서만 따라가도 좋을듯 하다.

 

React Native 개발환경 세팅 공식 문서 (Last updated on Aug 29, 2023)

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

Setting up the development environment · React Native

 

 

2. Android Studio, Xcode 설치

일단 시간이 오래 걸리는것부터 다운받아두자.

Android Studio와 Xcode는 각 공식 사이트에서 받을 수 있다.

Xcode는 App store에서 받을수도 있긴 한데, 멋모르고 업데이트를 눌렀다가 기존 프로젝트들이 펑펑 터졌던 경험이 있어 해서 가급적 apple developer에서 다운받아 설치하는것을 권장한다.

 

Android Studio (버전 : Android Studio Giraffe | 2022.3.1 Patch 1)

https://developer.android.com/studio

Download Android Studio & App Tools - Android Developers

 

Xcode (버전 : 14.3.1)

https://developer.apple.com/xcode/

Xcode 15 - Apple Developer

 

 

3. oh-my-zsh 설치 (옵션)

반드시 설치할 필요는 없다.

하지만 각종 플러그인, 테마가 있어 zsh를 좀 더 편하게 사용할 수 있다.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

설치가 완료되면 이런 메세지가 출력된다.

 

 

4. homebrew 설치

mac용 패키지 관리자로, 이후 homebrew를 이용해 여러가지를 설치할 것이다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

설치가 완료 되면 Next steps도 잊지말고 해주자.

 

homebrew가 제대로 설치 완료됐는지 확인한다. 버전 정보가 나오면 제대로 설치된 것이다.

brew -v

 

여기서 부턴 앞서 첨부한 react native 공식 문서의 내용이다.

 

 

5. node 설치

homebrew를 이용해 node를 설치해준다.

brew install node

버전 확인

node -v

현재 버전 : v20.5.1

 

 

6. watchman 설치

homebrew를 이용해 watchman를 설치해준다.

brew install watchman

버전 확인

watchman -v

현재 버전 : 2023.08.28.00

 

 

7. cocoapod 설치

cocoapod은 Xcode의 종속성을 관리한다.

자세한 내용은 공식 사이트 참조.

https://cocoapods.org/

CocoaPods.org

cocoapod은 homebrew가 아닌, get install을 통해 설치한다

sudo gem install cocoapods

버전 확인

pod --version

 

 

8. JDK설치

homebrew를 이용해 JDK를 설치해준다.

brew tap homebrew/cask-versions
brew install --cask zulu11

버전 확인

brew info --cask zulu11

 

 

9. Android 환경 변수 추가

config 파일을 열고

open ~/.zshrc
혹은
open ~/.zprofile

아래 내용을 맨 끝에 추가해준다.

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

 

 

10. Android SDK 설치

Android studio를 실행하고 Settings > Languages & Frameworks > Android SDK 메뉴로 이동한다.

우측 하단의 Show Package Details를 체크하고 Android 13.0 ("Tiramisu") 하위의 "Google APIs ARM 64 v8a System Image"를 체크한 뒤 Apply를 눌러 마무리한다.

 

 

11. 프로젝트 생성

드디어 React Native의 설치과정이 끝났다! 아래 명령어를 통해 첫 프로젝트를 생성해보자.

npx react-native init testApp

아래와 같은 화면이 나오면 성공적으로 설치가 완료된 것이다.

설치가 완료됐다면 프로젝트 폴더로 이동해서 아래 명령어로 실행해보자.

Android

npm run android

IOS

npm run ios

가상머신과, 아래 화면이 뜨면 성공이다!

Android

IOS

Android Studio와 Xcode에서 실행하는 방법은 아래 글 참고.

https://w-storage.tistory.com/46

[React Native] Xcode, Android Studio 에서 React Native 프로젝트 실행하기

 

12. Troubleshooting

프로젝트 생성을 했는데 아래와 같은 오류를 발견했다.

 

xcrun: error: SDK "iphoneos" cannot be located

xcrun: error: SDK "iphoneos" cannot be located

xcrun: error: unable to lookup item 'Path' in SDK 'iphoneos"

 

cocoapod가 Xcode를 찾을 수 없는 문제인 것 같다.

아래 명령어를 입력해서 해결했다.

sudo xcode-select --switch /Applications/Xcode.app