Development & React Native Setting (2/3)

ChungsikPark·2023년 4월 7일

Development & React Native Setting

목록 보기

2/3

1. Node & Watchman 설치

Node와 Watchman가 설치되어 있는지 확인합니다.
아래 코드는 각각의 버전을 확인하는 코드입니다.

# 시스템에 설치된 Node 버전 확인하기
node -v
# 시스템에 설치된 Watchman 버전 확인하기
watchman -v

Development & React Native Setting (1/3)부터 차례대로 진행하고 계시다면, 현재 설치 상황은 위와 같습니다.
Node의 경우 이미 nvm을 통해 설치했기 때문에, 버전을 확인할 수 있습니다.
Watchman은 추가로 설치가 필요합니다.

# Homebrew로 단일 Node 설치하기
brew install node
# Homebrew로 Watchman 설치하기
brew install watchman

위 코드는 각각 Node와 Watchman을 Homebrew를 통해 설치하는 코드입니다.

❗️ Node의 버전은 최소 14 이상이 되어야 합니다.
단일 Node 설치가 아닌 nvm을 이용한 Node의 설치를 희망한다면, Development & React Native Setting (1/3)를 참고하면 됩니다.

2. Java Development Kit 설치

아래 코드는 Zulu OpenJDK 11 버전을 설치하는 코드입니다.

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

❗️ 이미 시스템에 JDK가 설치되어 있다면, JDK 11 버전을 추천합니다. 더 높은 JDK 버전을 사용하면 문제가 발생할 수 있습니다.

3. Android Studio 설정

3.1. Install Setup

체크박스를 ✅ 하고 Mac with Apple chip을 눌러 설치 프로그램을 다운로드 합니다.
이어서 아래 첨부한 사진을 참고하여 차례대로 설치를 진행합니다.

불필요하게 최신 버전의 모든 것이 설치되는 것을 방지하고자,
Custom 타입을 선택하여 설치 진행하였습니다.
Standard 타입을 선택하여 설치 진행해도 큰 문제는 없을 것입니다.

3.2. SDK Manager (SDK Platforms & SDK Tools)

SDK Manager의 추가 설정이 필요합니다.
프로젝트의 android/build.gradle 파일을 확인해보면, compile하고 있는 SDK 버전이 31 인 것을 확인할 수 있습니다.
SDK Plaforms은 Android 12.0 (S)를, SDK Tools은 31.0.0을 설치합니다.

SDK Plaforms 설정 화면에서 우측 하단의 Show Package Details를 ✅ 하여 필요한 소스를 함께 설치합니다.

Android SDK Platform 31 (Required)
Sources for Android 31 (Required)
Google APIs ARM 64 v8a System Image (Required)
Google Play ARM 64 v8a System Image (Optional)
- Virtual Device Manager 설치할 때 Play Store를 포함한 기기 설치 시 필요한 옵션입니다.

여기서 잠깐 !!!

Apple Silicon chip이 아닌 Intel chip이라면?

이 글은 Apple Silicon chip 사용자 기준으로 작성되어 있습니다. 그리하여 Google APIs ARM 64 v8a System Image를 설치할 것을 요구합니다.

Intel chip 사용자라면, Intel x86_64 Atom System Image 또는 Google APIs Intel x86_64 Atom System Image을 설치하면 됩니다.

SDK Tools 설정 화면에서 우측 하단의 Show Package Details를 ✅ 하여 필요한 버전을 설치합니다.

31.0.0 (Required)

3.3. Virtual Device Manager

실제 기기를 사용하지 않고 예뮬레이터를 통해서 개발하기 위해서는 가상 기기 설정이 필요합니다. 아래 첨부한 사진을 참고하여 차례대로 설치를 진행합니다.

원하는 기기를 선택합니다.
기기 마다 Play Store 지원 여부가 노출 됩니다. 해당 기능을 지원하는 기기를 설치하고자 할 경우, SDK Platforms 설정에서 Google Play ARM 64 v8a System Image 추가 설치가 필요합니다.

Android 12.0 (S) 버전에 맞춰 기기를 생성합니다.

3.4. Android Home PATH 설정

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

Android Home 환경설정을 진행합니다.
위에 첨부한 코드를 .zshrc 파일에 삽입 후, 저장합니다.

echo $ANDROID_HOME
echo $PATH

위 명령어를 입력하여 환경설정이 정상적으로 완료되었는지 확인합니다.
echo $ANDROID_HOME를 입력해서 나온 주소와 Android Studio의 Appearance & Behavior > System Settings > Android SDK의 Android SDK Location이 일치하는지 확인합니다.

4. 프로젝트 빌드 준비

안드로이드 스튜디오에서 해당 프로젝트의 android 폴더를 열어 줍니다.
android 폴더가 열림과 동시에 프로젝트의 Gradle Files 싱크를 맞추는 작업이 시작됩니다.
자동적으로 싱크 맞추는 작업이 진행되지 않는다면, 첨부한 사진의 우측 상단에 강조한 아이콘을 클릭합니다.

싱크를 맞추는 작업을 마쳤다면, 프로젝트 빌드에 앞서서 준비한 예뮬레이터를 먼저 시작합니다.

5. 프로젝트 빌드

프로젝트 빌드에 앞서 선행되어야 할 것이 2가지 있습니다.

프로젝트를 처음 clone 받은 후, yarn install을 진행하여 패키지 설치를 진행합니다.
프로젝트의 root 폴더 내에 .env 파일을 생성하여 필요한 내용을 채워 넣습니다.

# metro 서버 시작 명령입니다.
yarn start
# 프로젝트의 개발용 안드로이드 빌드 명령입니다.
yarn android:dev

6. 빌드 에러 핸들링

5. 프로젝트 빌드 단계까지 진행했을 때, 위와 같은 에러를 맞이 할 수 있습니다.
해당 프로젝트는 CMake의 설치를 필요로 합니다.
Error 내용으로 미루어 보았을 때, CMake 3.18.1를 요구하고 있습니다.
SDK Manager > SDK Tools 에서 CMake를 설치하고 빌드를 재시도 하면 에러 없이 빌드가 가능합니다.

❗️ 추가로 SDK Manager 설치 단계에서 CMake를 미리 설치해서 빌드할 경우, 예상치 못한 에러가 발생하는 것을 확인하였습니다. CMake를 미리 설치하지 않은채 프로젝트 빌드 진행을 추천합니다. 혹 CMake를 설치 후에도 동일한 에러가 발생한다면, 설치한 CMake를 삭제 후 재설치 하면 에러 해결에 도움이 됩니다.