ReactNative CLI를 Mac (10.15.7)에 설치

자주 설정하는 것은 아니지만, 대여 단말이나 설치시를 위해 메모.
네이티브 코드를 작성할 수 있으므로 Expo가 아닌 ReactNative CLI를 설치합니다.
내용은 거의 공식 사이트 에서 인용

전제 조건

Mac 버전은 Catalina(10.15.7)

Mac 관리자 권한이 부여 된 계정으로 수행

HomeBrew가 설치되었습니다.

iOS, Android 공통점 설정

1.Node 설치

(node의 버전을 지정하고 싶은 경우는 nodebrew를 넣는다)

brew install node

2.Watchman 설치

brew install watchman

iOS 설정

1. Xcode 설치

XCode 설치하기
(Xcode의 버전에 지정이 있는 경우는 Apple Developer 로부터 xip 파일을 다운로드한다) ※필요 Developer 계정

2. 명령줄 도구 설치

Xcode를 열고 메뉴에서 Xcode-Preferences...-Locations를 선택하고 Command Line Tools가 Xcode 버전과 동일한 것을 설치합니다.

3. 시뮬레이터 설치

Xcode를 열고 메뉴에서 Xcode-Preferences...-Components를 선택하고 사용할 시뮬레이터를 설치합니다.

4. CocoaPods 설치

sudo gem install cocoapods

Android 설정

1. JDK 설치

RN의 공식 사이트에는 JDK8 이후라면 괜찮다고 기재되어 있지만, 14라고 Android 빌드시에 에러가 되는 것 같다. (공식 사이트의 설치 순서는 8로 되어 있다)

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

2. Android Studio 설치

Android Studio 다운로드 및 설치

설치 시 다음 확인란에서 다음을 선택합니다.

Android SDK

Android SDK Platform

Android Virtual Device

Performance (Intel ® HAXM) (Hyper-V 미사용의 경우)

3. Android SDK 설치

ReacrNative에서 네이티브 코드를 작성하려면 "Android 10 (Q)"이 필요합니다.
Andoroid Studio를 열고 메뉴에서 "Andoroid Studio"-"Preferences..."-"Appearance & Behavior"-"System Settings"-"Android SDK"를 선택합니다.
SDK Platforms 탭에서 Android 10 (Q)를 선택하고 右下のチェックボックス「Show Package Details」にチェック를 넣고 패키지 내용물을 표시합니다.

이하에 체크가 들어가 있는 것을 확인한다 (디폴트로 들어 있지 않은 것이 많기 때문에 주의)

Android SDK Platform 29

Intel x86 Atom_64 System Image

Google APIs Intel x86 Atom_64 System Image

Google Play Intel x86 Atom System Image (에뮬레이터에서 사용하는 것 같습니다)

'SDK Tools' 탭의 오른쪽 하단에 있는 체크박스 'Show Package Details'를 체크하여 패키지 내용물을 표시하고 「AndroidSDKBuild-Tools」内の「29.0.2」にチェック 가 들어 있는지 확인

4. 에뮬레이터 설치

Android Studio를 열고 'AVD Manager'에서 '+ Create Virtual Device...'버튼을 누르고 좋아하는 기기를 선택하고 'Next'를 누른 다음 'System Image'에서 Q(API Level 29)를 선택하다

5. 환경 변수 (ANDROID_HOME) 설정

~/.zshrc 에 다음을 기술한다

export ANDROID_HOME=$HOME/Library/Android/sdk
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

동작 확인

1. 명령으로 프로젝트 만들기

(TypeScript로 작성하는 경우 명령 뒤에 "--template react-native-template-typescript"옵션을 지정)

npx react-native init AwesomeProject

2. 프로젝트 폴더(AwesomeProject)에서 메트로 실행

cd AwesomeProject
npx react-native start

3. iOS 시작

메트로를 실행한 터미널과는 다른 터미널에서 프로젝트 폴더에서 다음을 수행합니다.

npx react-native run-ios

4. Android 시작

프로젝트 폴더 내에서 다음을 수행

npx react-native run-android

시뮬레이터 (에뮬레이터)로 앱을 실행할 수 있으면 설정 완료