환경 설정하기

여기서는 Android Studio와 Xcode로 프로젝트를 실행할 수 있도록 환경을 설정하는 방법을 알아본다.

이를 통해 Android 에뮬레이터와 iOS 시뮬레이터로 개발하고, 앱을 로컬에서 빌드하는 등의 작업을 할 수 있다.

Android

종속성 설치하기

• Node, Watchman, React Native CLI, JDK, Android Studio가 필요하다.
• 앱 개발할 때는 원하는 에디터를 사용할 수 있지만, Android용 React Native 앱을 빌드하기 위해선 Android Studio를 설치해야 한다.

Node & Watchman

Homebrew 설치 후 터미널에서 다음 명령을 실행한다:

brew install node
brew install watchman

• 이미 시스템에 Node를 설치한 경우에는 Node 18 이상인지 확인한다.
• Watchman은 Facebook에서 만든 파일시스템의 변경 사항을 감시하는 도구다. 더 나은 성능을 위해 설치하는 것이 좋다.

JDK

• Homebrew를 사용하여 Azul Zulu OpenJDK 배포판을 설치한다.
• Homebrew 설치 후 터미널에서 다음 명령을 실행한다:

brew install --cask zulu@17

# cask가 설치된 경로를 얻어 설치 프로그램을 더블클릭한다.
brew info --cask zulu@17

• JDK 설치 후, ~/.zshrc (또는 ~/.bash_profile)에 JAVA_HOME 환경 변수를 추가하거나 업데이트한다.
• 위의 단계를 사용했다면 JDK는 /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home에 위치할 것이다

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

• Zulu OpenJDK 배포판은 Intel과 M1 Mac 모두에 대한 JDK를 제공한다.
• 이를 통해 Intel 기반 JDK를 사용하는 것에 비해 M1 Mac에서의 빌드 속도가 더 빨라질 것이다.
• 이미 시스템에 JDK를 설치했다면 JDK 17을 권장한다. 더 높은 버전의 JDK를 사용하면 문제가 발생할 수 있다.

Android 개발 환경

안드로이드 개발이 처음이라면 개발 환경을 설정하는 것이 다소 지루할 수 있다.

이미 안드로이드 개발에 익숙하다면 몇 가지 설정해야 할 사항이 있을 수 있다.

어떤 경우든 다음 몇 단계를 주의 깊게 살펴본다.

1. Android Studio 설치

• Android Studio를 다운로드하고 설치한다.
• Android Studio 설치 마법사에서 다음 항목 옆의 체크박스가 모두 선택되어 있는지 확인한다:
  • Android SDK
  • Android SDK Platform
  • Android Virtual Device
• 그런 다음 "Next"를 클릭하여 이러한 모든 구성 요소를 설치한다.

• 설치가 완료되고 시작 화면이 나타나면 다음 단계로 진행한다.

2. Android SDK 설치

• Android Studio는 기본적으로 최신 Android SDK를 설치한다.
• 그러나 네이티브 코드를 사용하는 React Native 앱을 빌드하려면 특히 Android 14 (UpsideDownCake) SDK가 필요하다.
• 추가 Android SDK는 Android Studio의 SDK Manager를 통해 설치할 수 있다.
• 이를 위해 Android Studio를 열고 More Actions 버튼을 클릭한 다음 SDK Manager를 선택한다.

• SDK Manager 내에서 SDK Platforms 탭을 선택한다.
  • Show Package Details 옆의 체크박스를 선택한다.
  • Android 14 (UpsideDownCake) 항목을 찾아 확장한 다음, 다음 항목이 선택되어 있는지 확인한다:
    • Android SDK Platform 34
    • Intel x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom System Image 또는 (Apple M1 Silicon의 경우) Google APIs ARM 64 v8a System Image

• 다음으로 SDK Tools 탭을 선택한다.
  • Show Package Details 옆의 체크박스를 선택한다.
  • Android SDK Build-Tools 항목을 찾아 확장한 다음 34.0.0 이 선택되어 있는지 확인한다.

• 마지막으로 Apply를 클릭하여 Android SDK와 관련 빌드 도구를 다운로드하고 설치한다.

3. ANDROID_HOME 환경 변수 설정

• 네이티브 코드로 앱을 빌드하기 위해 몇 가지 환경 변수를 설정해야 한다.
• ~/.zprofile 또는 ~/.zshrc (bash를 사용하는 경우 ~/.bash_profile 또는 ~/.bashrc) 구성 파일에 다음 줄을 추가한다:

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

• source ~/.zprofile (또는 bash의 경우 source ~/.bash_profile)을 실행하여 현재 셸에 구성을 로드한다.
• echo $ANDROID_HOME 을 실행하여 ANDROID_HOME 이 설정되었는지 확인하고, echo $PATH 를 실행하여 적절한 디렉토리가 경로에 추가되었는지 확인한다.

Android 디바이스 준비하기

• React Native 안드로이드 앱을 실행하려면 안드로이드 디바이스가 필요하다.
• 이는 물리적 안드로이드 디바이스일 수도 있고, 안드로이드 가상 디바이스(AVD)를 사용할 수도 있다.
• 어느 쪽이든 개발을 위해 안드로이드 앱을 실행할 수 있도록 디바이스를 준비해야 한다.

물리적 디바이스 사용하기

• 물리적 안드로이드 디바이스가 있는 경우, USB 케이블을 사용하여 컴퓨터에 연결하고 여기의 지침을 따라 개발에 사용할 수 있다.

가상 디바이스 사용하기

• Android Studio를 사용하여 프로젝트를 열면 Android Studio 내에서 AVD Manager를 열어 사용 가능한 안드로이드 가상 디바이스(AVD) 목록을 볼 수 있다.
• 다음과 같은 아이콘을 찾아보자:

• 최근에 Android Studio를 설치했다면 새 AVD를 만들어야 할 가능성이 높다.
• Create Virtual Device...를 선택한 다음, 목록에서 아무 휴대폰이나 선택하고 "Next"를 클릭한 다음, UpsideDownCake API 레벨 34 이미지를 선택한다.

• Next를 클릭한 다음 Finish를 클릭하여 AVD를 만든다.
• 이 시점에서 AVD 옆의 녹색 삼각형 버튼을 클릭하여 AVD를 실행할 수 있다.

iOS

종속성 설치하기

• Node, Watchman, React Native CLI, Xcode, CocoaPods이 필요하다.
• 앱 개발할 때는 원하는 에디터를 사용할 수 있지만, iOS용 React Native 앱을 빌드하기 위해선 Xcode를 설치해야 한다.

Node & Watchman

• Homebrew 설치 후 터미널에서 다음 명령을 실행한다:

brew install node
brew install watchman

• 이미 시스템에 Node를 설치한 경우에는 Node 18 이상인지 확인한다.
• Watchman은 Facebook에서 만든 파일시스템의 변경 사항을 감시하는 도구다. 더 나은 성능을 위해 설치하는 것이 좋다.

Xcode

• 최신 버전의 Xcode를 사용하는 것이 좋다.
• Mac App Store에서 설치할 수 있다.
• Xcode를 설치하면 iOS 시뮬레이터와 iOS 앱을 빌드하는 데 필요한 모든 도구도 함께 설치된다.

명령줄 도구

• Xcode 명령줄 도구도 설치해야 한다.
• Xcode를 열고 Xcode 메뉴에서 Settings... (또는 Preferences...) 를 선택한다.
• Locations 패널로 이동하여 Command Line Tools 드롭다운에서 가장 최신 버전을 선택하여 도구를 설치한다.

Xcode에서 iOS 시뮬레이터 설치하기

• Xcode > Settings... (또는 Preferences...)를 열고 Platforms (또는 Components) 탭을 선택한다.
• 사용하려는 iOS 버전에 해당하는 시뮬레이터를 선택한다.
• Xcode 버전 14.0 이상을 사용하여 시뮬레이터를 설치하는 경우 Xcode > Settings > Platforms 탭을 열고 + 아이콘을 클릭한 다음 iOS... 옵션을 선택한다.

CocoaPods

• CocoaPods는 iOS에서 사용할 수 있는 종속성 관리 시스템 중 하나다.
• CocoaPods는 Ruby gem이다.
• 최신 버전의 macOS에 포함된 Ruby 버전을 사용하여 CocoaPods를 설치할 수 있다.

[선택사항] 환경 구성하기

• React Native 0.69 버전부터는 .xcode.env 파일을 사용해서 Xcode 환경 설정을 할 수 있다.
• 시스템 Node가 아닌 지정된 버전의 Node를 사용할 수 있다.
  • .xcode.env 파일 안에는 NODE_BINARY 변수가 있는데, 여기에 로컬에 설치된 node 의 위치를 입력한다.
  • 만약 다른 버전의 node 를 사용하고 싶다면 이 변수 값을 알맞게 바꿔주면 된다.
• 다른 환경 변수들도 관리할 수 있다.
  • .xcode.env 파일에는 빌드에 필요한 다른 환경 변수들도 추가할 수 있다.
  • 빌드 과정에서 특별한 환경 설정이 필요한 스크립트를 실행해야 한다면, 이 파일에 필요한 환경 변수를 정의하여 소스로 사용할 수 있다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # 이 코드가 nvm을 로드한다.