[React Native] M3 Macbook Pro에 리액트 네이티브(React-Native-Cli) 초기 세팅하기 (개발 환경 구축부터 Android, iOS 기기 Build까지)

 

설레는 마음으로 개봉한 M3 맥북 프로.

개발의 세계에서 가장 어려운 게 세팅이라 했건만 인텔 아이맥 한번 세팅해 본 경험만으로 자만감이 차올랐던지, 신중함 없이 신나게 세팅하다 실패하여 구매한 지 하루만에 결국 포맷을 하게 되었다.

검색해 보니 아직 M3 Macbook Pro의 React Native Cli Setting 방법이 없길래 다른 사용자들이 필자처럼 삽질하지 않기를 바라는 마음에 포맷 후 세팅 기록을 정리했다.

부디 이 긴 여정을 끝까지 함께하길 바라며 버전 정보부터 정리한다.

Version Info

System:
  OS: macOS 14.3
  CPU: (11) arm64 Apple M3 Pro
  Memory: 78.47 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.7.3
    path: /opt/homebrew/bin/node
  Yarn: Not Found
  npm:
    version: 10.5.0
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.04.08.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/0xseo/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11567975
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/0xseo/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: 0.73.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

 

---

1. Chrome 설치

mac에서 기본으로 설정해 놓은 Safari보다는 크롬이 더 편하다.

 

2. VScode 설치

이하 생략하겠다.

 

3. Xcode 설치

세팅할 것들이 많다 보니 오래 걸리는 것을 우선으로 설치했다. (M3 18G 최고..) 찾아보니 여러 가지 방법이 있던데 정석대로 앱스토어에서 설치했다.

 

1) 설치 후 맥북 왼쪽 위 사과 모양 옆에 있는 Xcode 탭에서 Settings를 클릭한다.

예전에는 Xcode로 빌드하기 위해서는 유료 개발자 계정이 필요했는데, 이제는 무료 개발자 계정으로도 빌드까지는 가능하다.

 

2) 개발자 계정을 등록하기 위해 Accouts 탭으로 이동, 개발자 계정을 설정한다.

 

3) React Native iOS setting을 위해 Platforms 탭으로 이동, iOS platform에서 Get 버튼을 누른다.

지금은 설치한 이후이기 때문에 on disk 상태이다. 처음 설치한 당신은 iOS도 watchOS와 같은 상태일 테니, 버튼을 누른다. 참고로 꽤나 오래 걸린다. 노트북 성능이 괜찮다면 다음 단계로 넘어갔다가 돌아오자.

 

4) iOS simulator 설치가 끝났다면 바로 옆 Locations 탭으로 이동, Command Line Tools를 설정해준다.

참고로 시뮬레이터 설치가 끝나기 전에 미리 설정해둬도 어차피 다시 해야 한다. 제대로 설정이 되었다면 기기 비밀번호를 물어보니 반드시 확인하자.

 

4. Android Studio 설치

React Native 공식 세팅 문서를 보면 Xcode와 안드로이드 스튜디오 중 하나만 설치해도 괜찮은 것처럼 써 있는데, 둘 다 설치해야 한다. 

 

1) 크롬에 Android Studio Download라고 검색하자.

 

2) 누가 봐도 공식 사이트라고 소리를 지르고 있다. 보라색 부분을 클릭하자.

 

3) 매번 다운받을 때마다 버전이 달라지는 것 같다. 각자의 최신 버전 다운로드를 클릭하자.

 

4) 약관이 뜰 텐데, 쭉 내려서 동의하고 Mac with Apple chip을 선택한다.

 

5) dmg 파일을 설치한 후 launchpad로 가 실행한다.

 

6) 마찬가지로 사과 옆 Android Studio 탭에서 Settings 클릭

 

7) 왼쪽 Languages & Frameworks > Android SDK를 누르면 SDK Platforms, SDK Tools가 나온다. 먼저 SDK Platforms 선택!

 

8) 만약 이미 시작된 프로젝트에 합류하는 거라면 해당 프로젝트의 android sdk 버전을 잘 확인해오도록 하자. 하지만 초기 세팅이라면 Android 14.0 (“UpsideDownCake”)을 추천한다. 하지만 무작정 다운받는다면 다음으로 넘어가기 위해 필요한 시간이 몇 배로 뛰니, 오른쪽 아래 Show Package Details를 체크한 후 아래 항목들을 선택한다.

• Android SDK Platform 34
• Sources for Android 34
• Google APIs ARM 64 v8a System Image

 

9) 이제 옆의 SDK Tools를 선택, 마찬가지로 Show Package Details를 체크한 후 아래 항목을 선택한다.

• Android SDK Build-Tools의 34.0.0 (필자는 다른 프로젝트를 위해 다른 버전도 다운받는 것임을 참고)

 

10) OK를 누르면 이런 비슷한 창이 뜰 것이다. (항목은 당신이 선택한 항목들) OK를 한번 더 누른다.

참고로 10번 항목은 (아마도) Xcode simulator 설치와 함께 이 대장정에서 가장 오래 걸리는 과정일 것이다. 노트북의 성능이 괜찮다면 5. iTerm2 설치와 이후 과정을 병행하고 설치가 끝나면 다시 돌아오도록 하자.

 

11) 설치가 끝났다면 다시 같은 방법으로 들어가 맨 위 Android SDK Location을 복사한다.

 

12) 5. iTerm2 설치에서 세팅한 iTerm2에서 다음 command를 입력한다.

vi ~/.zshrc

 

13) 환경 변수를 설정해주기 위해 다음을 붙여넣기한 후 저장하고 나간다.

vi 편집기는 처음 실행되면 읽기 모드이므로 i를 눌러 insert mode로 변환한 후 입력해야 한다. 
입력이 끝나면 Esc키를 눌러 다시 읽기 모드로 변경하고, :wq + Enter키를 눌러 저장 후 나갈 수 있다.

export ANDROID_HOME=저장한 경로
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

 

14) 다음 command를 입력하여 zshrc 파일을 실행한다.

source ~/.zshrc

 

15) 환경 변수 설정이 잘 됐는지 확인하기 위해 다음 command를 입력한다.

adb

결과가 길게 나오면 설치가 잘 된 것이다. 오류가 나면 SDK 설치는 잘 됐는지, 경로나 command가 틀린 것은 아닌지 확인한다.

 

16) 가상 기기 생성을 위해 Android Studio의 기기 관리자 (Device Emulator)를 연다.

 

17) +버튼을 통해 가상 기기를 생성한다.

 

18) 원하는 가상 기기 (필자는 pixel 5를 선호한다)를 선택한 후 Next

 

19) 아까 다운로드한 Android SDK 버전에 맞는 System Image를 선택한다.

 

20) 이름을 지어주고 생성한다.

 

5. iTerm2 설치

mac과 intel chip에 상관없이 터미널과의 소통을 도와주는 iTerm2 터미널을 설치한다. 앞으로 모든 터미널 설치는 특별한 언급이 있지 않는 한 iTerm2로 진행한다.

 

1) https://iterm2.com/ 으로 설치

 

2) Finder > 응용 프로그램 (Application) > Iterm2를 찾아 우클릭 후 정보 가져오기를 누른다.

 

3) Rosetta를 사용하여 열기를 체크한다.

 

4) 앱이 열려 있다면 한번 닫고 다시 켠다.

 

6. Homebrew 설치

 

1) 아래 command를 iTerm2 터미널에 입력한다.

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

시간이 다소 걸린다. 만약 좋은 컴퓨터로 Xcode iOS simulator와 안드로이드 SDK, Homebrew를 동시에 설치하고 있다면 잠깐 멈추고 기다려주자.

 

2) 설치가 끝나면 아래 두 줄을 추가로 입력해주자.

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc
eval "$(/opt/homebrew/bin/brew shellenv)"

아마 터미널에서 입력하라고 뜨는 명령어와는 살짝 다를 것이다. iTerm2는 zshrc를 사용하는 것이 좋기 때문에 위 코드를 입력하자.

.zshrc 파일을 확인하면 첫 줄의 일부가 들어가 있을 것이다.

 

여기까지 왔으면 반은 성공한 것이나 다름없다!

 

7. Node 설치

다음 command를 입력하여 Node를 설치, 버전을 확인해주자.

brew install node
node --version

 

React Native 공식 세팅 문서를  확인하면 0.73 이상의 React Native에서는 Node 18 이상의 버전을 사용하라고 되어 있다. 확인하자.

 

8. Watchman 설치

Watchman은 React Native에서 사용하는 디버깅 및 hot-reload 툴이다.

 

다음 command를 입력하여 Watchman를 설치, 버전을 확인해주자.

brew install watchman
watchman --version

 

9. JDK 설치

JDK(Java Development Kit)는 자바 어플리케이션을 구축하기 위한 핵심 플랫폼 구성요소이다.

 

React Native 공식 세팅 문서에서 Azul Zulu 17을 권장한다고 하니 17버전으로 다운받아보자.

 

1) https://www.azul.com/downloads/?package=jdk#download-openjdk 사이트에서 스크롤을 내리고 필터를 설정하자.

하나밖에 나오지 않으니 바로 Download > .dmg 로 설치한다.

 

2) 설치 과정을 마친 후 터미널에 다음 command를 입력하여 버전을 확인한다.

java --version
javac --version

 

3) jdk도 sdk와 마찬가지로 환경 변수 설정을 해주어야 한다. 우선 다음 command로 jdk의 설치 위치를 확인한다.

cd /Library/Java/JavaVirtualmachines
ls

 

4) jdk가 해당 위치에 설치되어 있다면 다음 command를 통해 이동 후 출력된 경로를 복사한다.

cd zulu-17.jdk/Contents/Home
pwd

 

5) 다음 command로 .zshrc 파일을 연다.

vi ~/.zshrc

 

6) 환경 변수를 설정해주기 위해 다음을 붙여넣기한 후 저장하고 나간다. 

vi 편집기는 처음 실행되면 읽기 모드이므로 i를 눌러 insert mode로 변환한 후 입력해야 한다. 입력이 끝나면 Esc키를 눌러 다시 읽기 모드로 변경하고, :wq + Enter키를 눌러 저장 후 나갈 수 있다.

export JAVA_HOME=복사한 경로
export PATH=$PATH:$JAVA_HOME/bin

 

7) 다음 command를 입력하여 zshrc 파일을 실행한다.

source ~/.zshrc

 

8) 환경 변수 설정이 잘 됐는지 확인하기 위해 다음 command를 입력한다.

echo $JAVA_HOME

 

10. Ruby 설치

1) ruby의 버전 관리를 위한 rbenv를 설치하기 위해 다음 command를 입력한다.

brew install rbenv ruby-build

 

2) 3.2.2 버전의 Ruby를 설치하기 위해 아래 command를 입력한다.

rbenv install 3.2.2

 

3) mac에 기본적으로 설치되어 있는 버전이 아닌, 방금 설치한 3.2.2 버전을 이용하기 위해 다음 command를 입력한다.

rbenv global 3.2.2
rbenv rehash
rbenv versions

system이 아닌 3.2.2로 잘 설정되어 있는지 확인한다.

 

4) ruby의 버전이 잘 설치되었는지 확인한다.

ruby --version

3.2.2가 잘 확인되면 9)으로 넘어간다.

 

5) 만약 다른 버전이 출력되었다면 다음 command로 .zshrc 파일을 연다.

vi ~/.zshrc

 

6) 다음을 붙여넣기한 후 저장하고 나간다.

export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init – zsh)"

 

7) 다음 command를 입력하여 zshrc 파일을 실행한다.

source ~/.zshrc

 

8) Ruby version이 3.2.2로 잘 변경되었는지 확인한다.

ruby --version

 

9) bundler를 설치하기 위해 다음 command를 입력한다.

gem install bundler

 

11. Cocoapods 설치

 

cocoapods 설치를 위해 다음 command를 입력한다.

sudo gem install cocoapods

 

---

이제 React Native 프로젝트 시작을 위한 세팅은 모두 끝났다! 하지만 가상기기 및 실기기에서 빌드하는 것까지를 목표로 했기 때문에 게시글은 끝나지 않았다. 이제부터는 리액트 네이티브 세팅 및 troubleshooting 기록이다.

 

12. VScode 터미널

1) VScode에서 리액트 네이티브 프로젝트를 시작하고 싶은 폴더를 연다.

 

2) 터미널을 연다.

 

13. React Native 프로젝트 시작

리액트 네이티브 프로젝트 ‘initApp’을 시작하기 위해 다음 command를 입력한다.

npx react-native init initApp --template react-native-template-typescript

 

<TROUBLESHOOTING>

[React Native/Error] TypeError: cli.init is not a function : react-native-cli 전역 설치X

[React Native/Error] TypeError: cli.init is not a function : react-native-cli 전역 설치X

 

리액트 네이티브를 설치하지 않았다면 react-native@0.73.6을 설치하겠느냐고 묻는다. y를 눌러 진행시키면 다음으로는 cocoapods를 설치하겠느냐고 묻는다. 마찬가지로 설치하겠다고 대답하면 된다. (사진이 없다...)

 

@0.75부터는 typescript가 기본으로 설정되기 때문에 위 command를 입력하면 오류가 난다!
(더럽게 빨리 바뀌네)
공식문서에 명시된 아래 command를 사용하자 (javascript도 사용 가능하다고 한다)
npx react-native init projectName

 

14. Android Build

안드로이드 스튜디오의 가상기기 전원을 켜거나 실기기를 케이블로 연결한 상태로 VScode terminal에 다음 command를 입력한다.

npm start
a

필자는 VScode terminal에 메트로 서버를 켜는 것을 좋아한다. 콘솔이 보기 편하고, 가상기기가 예쁘게 뜨기 때문이다. 취향껏 npm run android 등의 command를 입력해도 좋다.

 

<USB 디버깅 방법>

[React Native] Android, iOS 에뮬레이터(emulator), 실기기 build (USB debugging)

[React Native] Android, iOS 에뮬레이터(emulator), 실기기 build (USB debugging)

<TROUBLESHOOTING>

[React Native/Error] No connected devices! (com.android.builder.testing.api.DeviceException: No connected devices!) : 기기 연결

[React Native/Error] No connected devices! (com.android.builder.testing.api.DeviceException: No connected devices!) : 기기 연

 

15. Xcode 개발자 계정 setting

Xcode에서 프로젝트 폴더 > ios 폴더를 연 후 프로젝트명을 클릭하면 프로젝트 세팅을 변경할 수 있는 설정탭이 뜬다. 여기서 Signing & Capabilites 탭의 Team을 애플 개발자 계정으로 설정해준다.

 

16. iOS Build

왼쪽 삼각형을 통해 빌드해준다.

개발용 빌드시에는 Xcode에서 빌드할 필요가 없고, 안드로이드와 마찬가지로 VScode terminal에서 npm start – i를 통해 쉽게 빌드 후 개발할 수 있다.

(필자는 안드로이드의 경우 VScode terminal에서 가상기기와 실기기 빌드에 각각 성공하는지 테스트했고, iOS의 경우 VScode terminal과 Xcode 둘 모두 가상기기와 실기기 빌드에 각각 성공하는지 4가지 경우를 모두 테스트해봤다.)

 

<TROUBLESHOOTING>

[React Native/Error] No bundle URL present. : 메트로 서버 ON

[React Native/Error] No bundle URL present. : 메트로 서버 ON

<TROUBLESHOOTING>

[React Native/Error] Command PhaseScriptExecution failed with a nonzero exit code : 패키지 재설치

[React Native/Error] Command PhaseScriptExecution failed with a nonzero exit code : 패키지 재설치

---

 

만 하루를 꼬박 바치는 긴 대장정을 달리느라 고생했다!

최신 버전 React Native를 세팅하는 것도, M3 Macbook Pro에 개발 환경을 구축하는 일도 인터넷에 자료가 거의 없어 새로 산 노트북을 하루만에 포맷해야 했을 때 결심했다.

글이 10개도 안 되는 초보 블로거이지만, 가능한 세세하게 기록하여 도움이 되고 싶다고.

부디 누군가에게는 도움이 되었으면 한다.