[React-Native] React-Native 입문기 - iOS, Android 설치 및 실행

안녕하세요~~!!

 

예전부터 이슈였지만, 최근에야 제가 좀 보게 된 React-Native에 대해서 천천히 포스팅 해보려고 합니다.

 

설치와 실행기, 기본적인 부분을 공부하면서 포스팅 하려고 합니다!!

 

기회가 된다면, 프로젝트를 구상해서 공유하고 싶고, 같이 협업 해 보고도 싶네요 :)

 

무튼!! React-Native 도전!!

 

모든 소스는 Github페이지에 있습니다 <--링크

---

 

1. React-native 설치하기, 사용하기

 

https://facebook.github.io/react-native/docs/getting-started

React Native · A framework for building native apps using React

여기를 참조하여 설정을 시작 해 보도록 하겠습니다.

 

 

저의 개발 OS는 MAC이고, iOS와 Android 둘 다 설치를 위해 하나씩 보도록 하겠습니다.

 

1.1 Apple iOS

Node, Watchman, React Native 명령 행 인터페이스, Xcode가 필요합니다.

 

우선 Homebrew를 사용해서 Node, Watchman, Jdk를 설치 하도록 하겠습니다.

 

아래의 명령어를 터미널에서 실행 해 주세요.

brew install yarn
brew install node
brew install watchman
brew tab AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

 

설치가 완료되었다면, react-native-cli 를 설치 해 주도록 하겠습니다.

 

npm install -g react-native-cli

 

위의 설치과정이 끝났다면, Xcode가 있는지 확인해 주면 됩니다. 

 

iOS개발환경은 끝났습니다!!

 

1.2 Android 안드로이드

1.1 Apple iOS 설치를 완료했다면, 따로 설치 할 항목은 안드로이드 스튜디오밖에 없습니다!

 

https://developer.android.com/studio/install?hl=ko

Android 스튜디오 설치  |  Android Developers

위의 링크에서 안드로이드 스튜디오를 다운받아주세요.

 

그리고, SDK 관리자로 들어가서 아래의 항목들을 설치 해 주세요

 

• Android 9(Pie)
• Android SDK Platform 28
• Intel x86 Atom_64 System Image
• Google API Intel x86 Atom_64 System Image

위의 항목들은,  우측 하단의 "Show Package Details"를 누르면 선택하여 설치 할 수 있습니다.

 

 

설치를 기다리는 동안 아래의 화면처럼 나오게 됩니다.

 

 

마지막으로, .bash_profile 에서 Android_home환경변수를 설정 해 주어야 합니다. 

 

bash_profile 파일을 vim 으로 켜서 수정 해 주고, 적용 시켜주도록 하겠습니다.

vim ~/.bash_profile

vim으로 열린 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로 적용시켜 주도록 하겠습니다.

source ~/.bash_profile

 

 

2. 실행하기

설치를 했으니, react-native를 실행 시켜 보도록 하겠습니다!

2.1. Apple iOS

제가 원하는 위치에서 AwesomeProject라는 프로젝트를 생성 해 보도록 하겠습니다.

react-native init WoolbroProject

그럼 설치가 주욱~~ 되다가 마지막에 성공하면 아래와같이 명령어를 알려주게 됩니다.

 

iOS를 실행 해 보도록 하겠습니다.

react-native run-ios --simulator "iPhone 8"

현재 설정은 iPhone X로 되어있는데, 최근 업데이트로 인해 시뮬레이터에는 iPhoneX가 존재하지 않습니다.

 

따라서 --simulator 옵션으로 iPhone8에서 구동되도록 설정 했습니다.

 

모든 명령문이 완료가 실행 완료가 되었다면 아래와 같이  시뮬레이터가 나옵니다.

 

위의 화면은 App.js 파일입니다. 추후에 수정을 통해 화면을 바꾸어 줄 수 있습니다.

 

 

2.2 Android 

안드로이드는 iOS와 마찬가지로 react-native 명령어를사용해서 실행 할 수 있습니다.

 

실행하기에 앞서, 안드로이드는 시뮬레이터를 자동으로 시작 해 주지 않기 때문에, 시뮬레이터를 수동으로 실행을 기켜 준 후에 명령어를 입력해서 확인 해 주도록 하겠습니다.

 

시뮬레이터를 미리 실행하는 방법은

 

안드로이드 스튜디오 우측 하단에 Configure -> AVD Manager -> 원하는 시뮬레이터 실행 을 해 주면 됩니다!

react-native run-android

시뮬레이터가 실행 된 후, 위와같이 터미널에 작성을 해 주면 아래와같이 시뮬레이터에 react가 뜨게 됩니다.

 

 

 

지금까지 iOS와 Android를 react-native로 첫 시작 화면을 출력 해보았습니다!!