[React-Native] 1. M1 Mac에서 React-Native 환경 구축

 필자가 사용하는 MAC OS에서 React-Native 개발 환경을 구축하는 방법에 대해 정리해놓고자 한다. React-Native 개발 환경에는 크게 Expo CLI와 React-Native CLI, 2가지가 있다. 그 중에서 React-Native CLI를 구축하는 방법을 정리한다.

---

1. Homebrew 설치

 Homebrew는 Mac에서 필요한 애플리케이션이나 개발 환경 등을 설치하는 데 유용하게 쓰인다. Homebrew에 대한 설치 방법은 Homebrew 홈페이지에서도 확인할 수 있다.

다음 코드를 Terminal 에 입력하여 Homebrew를 설치한다.

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

Install이 완료되면 Homebrew 명령어를 통해 설치가 잘 되었는지 확인한다.

brew --version

`brew --version` 결과 이미지

---

2. Node.js 설치

 React-Native는 JavaScript를 사용하기 때문에, JavaScript의 런타임인 Node.js를 설치해야한다. Node.js도 Homebrew를 통해 간단하게 설치할 수 있다.

brew install node

Install이 완료되면 node 명령어를 통해 잘 설치되었는지 확인한다.

node --version

`node --version` 결과 이미지

Node.js 설치가 완료되면, 패키지 관리자인 npm도 설치가 된다. npm 또한 설치가 잘 되었는지 확인한다.

npm --version

`npm --version` 결과 이미지

!!! Important !!!
필자가 글을 쓰는 22년 3월 21일 기준으로, Node v16.14.0 버전을 쓰는 것을 추천한다.
LTS가 아닌 가장 최근 버전을 쓰게 되면, iOS와 Android 둘 다 정상적으로 실행 되지 않는다.
TypeError: Cannot read properties of undefined (reading 'transformFile') at Bundler.transformFile 
위와 같은 에러가 Metro 터미널에 나타난다면, Node 버전 문제이니 Node의 버전은 LTS 버전으로 React-Native를 진행한다.

---

3. Watchman 설치

Watchman은 특정 폴더나 파일을 감시하여, 변화가 생길 경우 특정 동작을 수행하도록 설정하는 역할을 한다. React-Native에서 소스 코드의 추가, 변경이 발생하면 다시 빌드하기 위해 Watchman을 사용한다. Watchman도 Homebrew를 통해 쉽게 설치가 가능하다.

brew install watchman

Install이 완료되면, Watchman 버전을 확인한다.

watchman -v

`watchman -v` 결과 이미지

---

4. React-Native CLI 설치

지금까지는 Homebrew를 통해 사전 환경을 설치해왔지만, React-Native는 npm을 통해 설치한다.

npm install -g react-native-cli

`npm install -g react-native-cli` 결과 이미지

Install이 완료되면 마찬가지로 버전 정보를 통해 잘 설치되었는지 확인한다

npx react-native --version
or
react-native --version

`npx react-native --version` 결과 이미지

---

5. XCode 설치

 React-Native 로 iOS 앱을 빌드하기 위해서는 XCode 를 설치해야한다. 그리고 XCode Command Line Tools도 필요하다. XCode는 Homebrew 가 아니라 App Store에서 설치한다.

App Store의 XCode

XCode를 설치하면 XCode Command Line Tools가 잘 설치되었는지 확인한다. 사실 Homebrew를 설치할 때 XCode Command Line Tools를 같이 설치하기 때문에 Homebrew를 사용한다면 이미 설치되어있다. 다만, XCode에서는 Command Line Tools가 공석으로 설정되어있지 않을 수도 있기 때문에, 아래 사진과 같이 설정한다.

XCode - Preferences - Locations

- Xcode를 "Rosetta를 사용하여 열기" 하도록 설정

Xcode - 정보 가져오기 - Rosetta를 사용하여 열기

- Terminal을 "Rosetta를 사용하여 열기" 하도록 설정

  M1이 아닌 칩셋에서 생성된 React-Native 앱을 "Rosetta를 사용하여 열기" 하지 않고 터미널에서 실행할 경우 에러와 함께 빌드가 안될 수 있다. 필자는 iTerm을 주로 사용하고 있는데, 기본적으로 제공되는 Terminal 앱을 Rosetta로 열도록 설정했다. 이처럼 두 가지 터미널을 Rosetta 적용 유무에 따라 구분하여 사용한다. 터미널을 React-Native 외에 사용하지 않는다면, 해당 터미널만 Rosetta 설정하여도 상관없다. 

터미널 - Rosetta를 사용하여 열기

---

6. Cocoapods 설치

Cocoapods 은 iOS 개발에 사용되는 의존성 관리자다. React-Native로 iOS를 개발할 때도 꼭 필요하니 설치해주도록 한다.

sudo gem install cocoapods

설치가 완료되면 버전 정보를 확인한다.

pod --version

`pod --version` 결과 이미지

여기까지 React-Native의 iOS 빌드를 위한 준비작업이 끝났다. 이제 Android 빌드를 위한 준비만 해주면 된다.

---

7. JDK 설치

 방금까지 iOS 개발에 필수 요소들을 설치했다면, 반대로 Android 개발에 필수 조건들도 갖춰야한다. 필자는 Android 개발자로 활동하고 있기에 Mac을 구매하면서 바로 JDK를 설치했다. 그래서 이번 글에서 JDK 설치 방법은 위와 같이 기술하기 보단 필자가 JDK를 설치했을 때 참고했던 블로그 링크를 올린다.

https://llighter.github.io/install-java-on-mac/

맥에서 Brew로 자바 설치하기(feat. 자바버전 바꾸기)

JDK를 설치하는 방법으로는 "공식 홈페이지에서 다운로드" 하는 방법과 "Homebrew를 사용"하는 방법 등등이 있다. 필자는 "Homebrew"를 사용하는 것을 좋아해서 후자를 선택했다. 위 링크에 블로그 내용에 따라 설치를 진행하거나, 다른 방법을 통해 JDK를 설치해준다. 설치 후엔 JDK 버전 확인을 통해 잘 설치되었는지 확인한다.

javac -version

---

8. Android Studio 설정

 Android Studio 설치는 이미 다 마친 상태이기에 자세히 다루지 않는다. Android Studio 설치 방법은 다른 블로그에서도 많이 다루고 있으니 최신 글로 참고하면 된다. 다만, 설치를 할 때 Emulator를 같이 설치해주도록 한다.

Android Studio - Device Manager

Emulator를 설정한 후, Preferences로 가서, SDK Tools를 확인한다.

• Android SDK Location : React-Native 프로젝트와 터미널 환경 설정 파일에 추가해야 하니 복사를 해둔다.
• 다음으로 표시한 4가지 박스 안의 값들이 체크(설치)가 되어있는지 확인한다.
  1. Android SDK Build-Tools
  2. Android SDK Command-line Tools : 아마 해당 Tools은 체크가 안되어 있을 수도 있다.
  3. Android Emulator
  4. Android SDK Platform-Tools

---

9. Android SDK 경로 설정

 위에 복사했던 Android SDK Location 경로를 React-Native 프로젝트의 Android 폴더에 추가한다. 새로 생성한 프로젝트일 경우 React-Native 프로젝트의 Android 폴더에 local.properties 파일이 없을 것이다. local.properties 파일을 생성하여 Android SDK 경로를 추가한다.

local.properties 파일이 없는 android 폴더

local.properties 생성 및 Android SDK 경로 추가

local.properties 파일이 추가된 android 폴더

 React-Native 빌드를 담당하는 터미널의 환경설정 파일에도 Android SDK 경로를 추가한다. 보통 ~/.bash_profile 이나 ~/.zshrc 파일에 다음 두 줄을 추가한다.

# Android SDK
export ANDROID_SDK="/Users/choseongyun/Library/Android/sdk"
export PATH="/Users/choseongyun/Library/Android/sdk/platform-tools:$PATH"

---

10. iOS, Android 실행

(1) iOS 실행

react-native run-ios

위 명령어를 실행하여 iOS 앱을 빌드한다.

2022.09.13 추가 : "No simulator available with name "iPhone 13""

 위 명령어를 그대로 했을 때, "No simulator available with name "iPhone 13"" 에러가 나타날 수도 있다. "react-native run-ios" 명령어를 실행하면, 디폴트 iOS 모델이 "iPhone 13" 이기 때문이다. 그런데, 현재 앱을 실행할 iPhone 의 모델명이 "iPhone 13" 이 아니라면 해당 에러가 발생한다. 이럴 때는 Simulator 를 "iPhone 13" 으로 설정 및 실행한 후에 위 명령어를 실행하거나, "--simulator" 옵션을 통해 특정 아이폰 모델명을 명시해주는 것으로 해결할 수 있다. 만약, "iPhone 14 Pro Max" 로 앱을 실행하고 싶다면 다음 명령어를 실행하면 된다.

$ react-native run-ios --simulator="iPhone 14 Pro Max"

(2) Android 실행

실행에 앞서, Android Studio에서 앱을 실행할 Device를 열어준다.
그리고 다음 명령어를 순차적으로 터미널에 입력하여 React-Native의 Android 코드를 실행한다.

cd android
./gradlew clean
cd ..
react-native run-android

* 필자는 Android 실행 중에 다음과 같은 에러가 발생했다. Android Virtual Device에 메모리가 부족하다는 에러인데, 아무래도 다른 Android Project를 하거나, React-Native 환경 설정 삽질을 하면서 뭔가 꼬인 것 같다.

* What went wrong:

Execution failed for task ':app:installDebug'.

> java.util.concurrent.ExecutionException: com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: INSTALL_FAILED_INSUFFICIENT_STORAGE

위 에러가 발생할 경우, Android Studio의 Device Manager에서 앱을 설치할 Virtual Device를 Wipe Data 해준다.

---

마치며....

 첫 M1 맥북을 구매하고, React-Native 환경을 구축하면서 순간순간 M1 맥북을 다시 중고로 내다팔까 고민을 많이했다... 후우...
불과 1년도 안된 글을 참고해도 에러가 마구 쏟아져서 계속 골머리가 아팠다... 그래도 삽질에 삽질을 계속하며 위와 같이 정리를 할 수 있었다. 사실, 삽질 하고 블로그에 글을 정리하면서 현재 기준으로 불필요한 부분들을 제거해 나갔다. 그러다보니 조금 탄탄한 글이라 볼 수는 없을 것 같다. 아래에 삽질을 하며 참고했던 블로그 링크들을 첨부한다.

- https://velog.io/@taese0ng/M1-%EB%A7%A5%EC%97%90%EC%84%9C-React-Native-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

M1 맥에서 React-Native 세팅하기

- https://iot624.tistory.com/175

[React Native] M1 Mac에서 Android 에뮬레이터 돌리기

- https://velog.io/@seri_ous/M1-React-Native-Android-Studio-%EC%8B%9C%EB%AE%AC%EB%A0%88%EC%9D%B4%ED%84%B0

M1 | React Native Android Studio, 시뮬레이터

위 글에서 모르는 부분이나 잘못된 부분이 있다면 댓글로 남겨주세요~!!