Mac에서 React Native 빌드 환경 설정하기

React Native 프로젝트를 Mac에서 빌드하고 실행하기 위해서는 몇 가지 환경 설정이 필요합니다. 이 가이드는 React Native CLI를 사용하여 Android 및 iOS에서 프로젝트를 실행할 수 있도록 환경을 설정하는 과정을 설명합니다.

---

⚠️ 주의 사항

이미 만들어진 React Native 프로젝트에 맞는 환경설정을 하려는 경우, 해당 프로젝트에서 사용 중인 JDK 및 package.json에 명시된 의존성 버전이 다를 수 있습니다. 이를 확인하고 적절한 버전을 맞춰야 합니다.

• 팀 프로젝트에서는 Node.js, JDK, 및 의존성 버전을 맞추는 것이 중요합니다.
• nvm(Node Version Manager)을 사용하면 여러가지 node 버전을 관리하고 명령어를 통해 필요한 버전으로 전환할 수 있습니다.
• React Native Doctor와 같은 설정 보조 툴을 활용하면 환경 설정을 점검하는 데 도움이 됩니다.

이제 Mac에서 React Native 빌드 환경을 설정하는 과정을 단계별로 살펴보겠습니다.

---

1. Homebrew 설치

Homebrew는 macOS의 패키지 관리자입니다. 터미널을 열고 아래 명령어를 실행하여 Homebrew를 설치합니다.

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

설치가 완료되면 버전을 확인합니다.

brew --version

---

2. Node.js 및 npm 설치

React Native는 Node.js 환경에서 동작하므로, Node.js와 npm(Node Package Manager)을 설치해야 합니다.

brew install node

설치 후, 정상적으로 설치되었는지 확인합니다.

node --version
npm --version

---

3. Watchman 설치

Watchman은 파일 변경을 감지하여 React Native의 코드 변경 사항을 반영하는 데 유용한 도구입니다.

brew install watchman

설치가 완료되었는지 확인합니다.

watchman --version

---

4. Java Development Kit(JDK) 설치

Android 빌드를 위해 JDK가 필요합니다. 설치 방법은 두 가지가 있습니다.

4-1. Homebrew를 이용한 설치

아래 명령어를 실행하여 AdoptOpenJDK를 설치할 수 있습니다. (예: JDK 11 설치)

brew install adoptopenjdk11

설치 후, 정상적으로 설치되었는지 확인합니다.

java -version

⚠️ 참고: 프로젝트에 필요한 JDK 버전이 다를 수 있으므로, 프로젝트에 맞는 버전을 선택해야 합니다.

4-2. 직접 다운로드하여 설치

1. AdoptOpenJDK 또는 Oracle JDK 사이트에 접속합니다.
2. 원하는 버전의 JDK를 다운로드하고 설치합니다.
3. 설치된 JDK의 경로를 환경 변수에 추가합니다. (예: JDK 11.0.15.1을 설치했다고 가정)

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-11.0.15.1.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

⚠️ 주의: 환경 변수 설정 시, 설치한 JDK 버전에 맞게 경로를 변경해야 합니다.

4. 변경 사항을 적용합니다.

source ~/.bash_profile # 또는 source ~/.zshrc

---

5. Android Studio 설치 및 설정

5-1. Android Studio 설치

brew install android-studio

설치 후, Android Studio를 실행하고 SDK Manager에서 필요한 SDK 및 도구를 설치합니다.

5-2. 환경 변수 설정

Android 빌드를 위해 환경 변수를 설정해야 합니다. ~/.bash_profile 또는 ~/.zshrc 파일을 열어 아래 내용을 추가합니다.

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

변경 사항을 적용하려면 다음 명령어를 실행합니다.

source ~/.bash_profile # 또는 source ~/.zshrc

5-3. ADB 명령어 설정 및 실행

**ADB(Android Debug Bridge)**는 Android 기기와 통신할 수 있도록 해주는 도구입니다. React Native에서 디바이스를 연결하거나 앱을 실행하기 위해 adb 명령어가 필요합니다.

ADB가 정상적으로 동작하는지 확인하려면 아래 명령어를 실행합니다.

adb devices

이 명령어를 실행하면 연결된 Android 기기의 목록이 출력됩니다. 만약 기기가 인식되지 않는다면 USB 디버깅이 활성화되어 있는지 확인해야 합니다.

참고: 실제 기기가 연결되어 있다면 Android Studio에서 가상 머신을 생성할 필요 없이 바로 실행할 수 있습니다.

---

6. React Native CLI 설치

React Native CLI를 전역으로 설치합니다.

npm install -g react-native-cli

설치 후, 정상적으로 설치되었는지 확인합니다.

react-native --version

---

7. 프로젝트 생성 및 실행

7-1. 프로젝트 생성 또는 기존 프로젝트 가져오기

새로운 프로젝트를 생성하거나 기존 프로젝트를 클론하여 사용할 수 있습니다.

• 새로운 프로젝트 생성:

react-native init MyReactNativeApp

• 기존 프로젝트 가져오기:

git clone <repository_url>
cd MyReactNativeApp

7-2. 의존성 설치

npm install

7-3. npm start 실행

npm start

7-4. iOS에서 실행

react-native run-ios

7-5. Android에서 실행

react-native run-android

---

마무리

설정이 끝나고 npm start까지 정상적으로 실행되었지만, run하는 과정에서 설치된 의존성들이 오픈소스이기 때문에 다양한 충돌이 발생할 수 있습니다. 

개인적인 경험으로는

• @react-native-community 같은 라이브러리는 직접 node_modules에서 라이브러리 내부 소스에 접근하여 간단한 논리 오류를 수정하면 해결되는 경우도 있었습니다.
• react-native-date-picker 같은 오픈소스 라이브러리는 npm 사이트에서 안전한 상위 버전으로 교체하여 빌드 에러를 해결한 적도 있습니다.

대부분 의존성 문제는 원인이 되는 소스 경로를 상세히 알려주기 때문에 해당 경로를 추적하여 수정하거나 의존성 채로 교체한다면 최종 빌드 까지 도달 할 수 있을 것 입니다💪