[Setting | macOS] React Native 개발환경 설정

macOS에서 하이브리드앱 개발을 위한 설정과정을 정리한다.

작성일 : 2021-07-23
OS : macOS Big Sur 버전 11.5
CPU : Intel

macOS의 Terminal을 실행시켜 다음과정을 수행한다.

1> Expo CLI VS React Native CLI

Expo CLI의 경우 네이티브 기능을 패키지로 묶어서 제공하기 때문에 편리하지만 용량을 많이 차지하게 되고 네이티브 관련 모듈추가시 불편함이있다.

→ Expo CLI의 경우 급하게 App을 개발하는 경우를 제외하고는 React Native CLI를 사용하여 개발하는 방법을 추천한다.

2> HomeBrew 설치 : 맥용 패키지 관리자 (https://brew.sh/)

# 버전확인

brew --version

# 버전확인 불가시 설치진행

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

3> NodeJS 설치 : javascript 런타임 라이브러리 (https://nodejs.org/)

# 버전확인

node --version

# 버전확인 불가시 HomeBrew를 이용한 설치 (사이트에서 다운받아설치도 가능)

brew install node

4> Watchman 설치 : 소스 변경시 자동 빌드환경 (https://facebook.github.io/watchman/)

# 버전확인

watchman --version

# 버전확인 불가시 HomeBrew를 이용한 설치

brew install watchman

5> React Native CLI 설치

# 버전확인

npx react-native --version

# 버전확인 불가시 npm을 이용한 설치

npm install -g react-native-cli

6> 아이폰 앱개발을 위한 설치

6-1> XCode 설치 : https://apps.apple.com/us/app/xcode/id497799835?mt=12

# 다운로드 및 설치

# Command Line Tools 설정확인

XCode 실행   >   Preferences...   >   Locations 에서 가장최신 Command Line Tools 선택

6-2> Cocoapods 설치 : 의존성 관리자 (https://cocoapods.org/)

# 버전확인

pod --version

# 버전확인 불가시 설치

sudo gem install cocoapods

7> 안드로이드 앱개발을 위한 설치

7-1> JDK 설치

# 버전확인

 java --version

# 버전확인 불가시 HomeBrew를 이용한 설치

brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk8
# 삭제시
brew remove --cask adoptope

7-2> Android Studio 설치 & 설정 :https://developer.android.com/studio

# 다운로드 및 설치

Install Type : Custom

Select Default JDK Locaton : /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

SDK Components Setup : Performance & Android Virtual Device 체크

# SDK 설정

설치완료후 실행화면에서 우측아래 configure > SDK Manager

설정화면에서 Android SDK Location (/Users/opendocs/Library/Android/sdk) 복사 -> 환경변수 설정시 필요

우측아래 Show Package Details 체크 후 아래 항목 추가로 선택 후 OK 하면 설치가 진행됨
---------------------------------------------------
Android SDK Platform 29
Intel x86 Atom System Image
Google APIs Intel x86 Atom System Image
Google APIs Intel x86 Atom_64 System Image
---------------------------------------------------

# AVD 설정

SDK 설정 완료 후 실행화면에서 우측아래 configure > AVD Manager

+ Create Virtual Device...

 Phone > Pixel 4 선택 & Next > API Level 29 Download 선택

Download 완료되면 선택 하고 Next > Finish

# 환경변수 추가

~/.bash_profile 또는 ~/.zshrc 에 아래내용 추가
---------------------------------------------------
export ANDROID_SDK_ROOT=/Users/opendocs/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/tools
export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
---------------------------------------------------

8> 애뮬레이터에서 샘플앱 실행

8-1> 앱초기화

# 최초 생성시
npx react-native init mobile
# 개발된 코드 clone
git clone https://gitlab.opendocs.co.kr/opendocs/mobile.git

8-2> 앱모듈설치

npm install

8-3> 앱실행

cd mobile
# IOS 실행
npm run ios
# ANDROID 실행
npm run android

Opendocs Blog

Enjoy Writing.

[Setting | macOS] React Native 개발환경 설정