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/)
# 버전확인
# 버전확인 불가시 설치진행
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
3> NodeJS 설치 : javascript 런타임 라이브러리 (https://nodejs.org/)
# 버전확인
# 버전확인 불가시 HomeBrew를 이용한 설치 (사이트에서 다운받아설치도 가능)
4> Watchman 설치 : 소스 변경시 자동 빌드환경 (https://facebook.github.io/watchman/)
# 버전확인
# 버전확인 불가시 HomeBrew를 이용한 설치
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/)
# 버전확인
# 버전확인 불가시 설치
sudo gem install cocoapods
7> 안드로이드 앱개발을 위한 설치
7-1> JDK 설치
# 버전확인
# 버전확인 불가시 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> 앱모듈설치
8-3> 앱실행
cd mobile
# IOS 실행
npm run ios
# ANDROID 실행
npm run android