React Native ] macOS에서 안드로이드(android) 개발 환경 구축하기

이전 포스트에서 macOS에서 React Native iOS 환경을 구축해보았다. 

lucidmaj7.tistory.com/252

iOS React Native 환경 구축하기

 

이번 포스트에서는 macOS에서 React Native 안드로이드 개발환경을 구축하는 법을 알아보려한다.

React Native 안드로이드 개발환경 구축 방법은 React Native 홈페이지에 자세히 나와있다.

reactnative.dev/docs/environment-setup

React Native · A framework for building native apps using React

macOS에서 React Native 안드로이드 개발환경을 구축하려면 Node, Watchman, React Native CLI, JDK, Android Studio가 필요하다.

 

1. node, watchman 설치

homebrew명령어를 통해 node와 watchman을 설치한다. node의 경우 nodeJS홈페이지에서 별도로 최신버전을 설치 할 수 있다. NodeJS홈페이지에서 LTS버전 최신버전을 다운받아 설치한다. React Native홈페이지에서는 10이상의 nodeJS버전을 권장하고 있다.

https://nodejs.org/en/

다음 brew명령어를 통해 다음과 같이 watchman을 설치한다.

brew install watchman

 

2. JDK8 설치

기본적으로 macOS에는 JDK가 설치 되어 있지 않다. brew를 통해 openJDK8 을 설치한다.

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

 

3. Android Studio 설치

Android Studio 홈페이지(https://developer.android.com/studio)에서 macOS용 Android Studio를 다운로드 받아 설치한다.

https://developer.android.com/studio

DMG파일을 받아 열어보면 다음과 같은 창이 뜨는데 그냥 Applications에 드래그엔 드롭 하면 설치가 끝난다.

 

 

4. Android Studio Setup Wizard

Android Stduio를 처음 실행하게 되면 설정을 import하라 하는데 없으므로 Do not import settings를 선택하고 OK를 눌러준다.

다음 화면은 Android Studio Setup Wizard화면이다.

Next - Next를 따라 누르다보면 Verify Settings화면이 나오고 Finish를 눌러 마무리 한다.

SDK 등을 다운받아 설치가 진행된다. 

 

5. Android SDK설치

설치가 완료되면 위와 같은 화면이 나온다. 

React Native로 안드로이드 앱을 빌드하려면 Android 10과 Android SDK Platform 29가 필요하므로 별도로 설치를 해줘야 한다. 우측 하단에 Configure에서 SDK Manager를 선택해준다.

다음 설정 창의 SDK Platforms 에서 Android 10.0을 체크, SDK Tools텝에서 하단에 Show Pakage Details를 체크하고 29.0.2를 선택후  OK 를 눌러 진행한다.

 

 

6. ANDROID_HOME 환경변수 설정 

React Native Tool은 ANDROID_HOME환경 변수를 사용하므로 .bash_profile에 환경변수를 다음과 같이 추가해준다.

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

환경 변수 설정 후 터미널을 다시 열거나 다음 명령어로 바로 적용해준다.

source ~/.bash_profile

7. 예제 프로젝트 생성 & 실행

환경설정이 끝났다면 예제프로젝트를 실행해 보자. 적절한 위치에 다음 명령어를 통해 React Native 프로젝트를 생성한다.

npx react-native init AwesomeProject

프로젝트가 생성되면 AwesomeProject라는 폴더가 생성된다.  프로젝트 루트 폴더에서 npx react-native run-android 를 실행하면 에뮬레이터가 실행되면서 앱이 실행되는 것을 볼 수 있다.

cd AwesomeProject
npx react-native run-android

 

안드로이드 개발환경은 ios개발환경에 비해 익숙하지 않고 여러가지 설정할 것이 많아 좀 복잡한 면이 있다.