React Native는(이하 RN) React를 이용해 Android와 iOS 네이티브 앱을 개발할 수 있는 Framework이며 2020년 2월 현재 0.61 버전입니다. 버전이 1이 안되는데도 불구하고 많은 개발사들이 사용하는걸 보면 Facebook에서 지속적으로 발전시키고 있다는 의미일 겁니다. 

 

이 글은 아래와 같은 내용을 담고 있습니다. 

 

  • 필요한 개발 툴들 
  • React Native CLI 로 프로젝트 생성하기
  • 앱 실행 해보기

필요한 개발 툴들 

본격적으로 알아보기 전에 먼저 설치해야 할 개발툴들이 있습니다. 이를 알아보고 진행해 보겠습니다.

 

Node.js : React는 Javascript Runtime인 Node.js를 사용합니다. 

 

npm : Node.js의 패키지를 관리하는 툴입니다.

 

React Native CLI : React native 앱을 빌드하고 실행하는데 필요한 툴입니다.

 

Watchman : MacOS에서 어떤 파일의 변화를 감지하는데 사용하기 위해 Facebook에서 개발한 툴입니다.

 

Native SDKs :XCodeAndroid Studio 들은 네이티브 앱 빌드를 위해 필요한 SDK입니다.

 

CocoaPods : Swift  Objective-C 코코아 프로젝트의 종속성 관리자입니다. RN으로 프로젝트를 initialize할 때 CocoaPods가 설치되어 있으면 Android와 iOS빌드에 필요한 종속된 라이브러리들을 초기화해 주며, 추후에도 필요한 라이브러리들을 관리할 때 지속적으로 사용됩니다. 

 

(* react-native init project_name으로 실행하면 위와 같은 iOS, Android 빌드에 대한 설정 후 실행 방법을 안내해 줍니다.)

 

React Native CLI 로 프로젝트 생성하기

React Native 프로젝트를 세팅하고 관리하는데 사용합니다. 터미널을 열어 아래 명령을 실행하여 설치할 수 있습니다. 

npm install -g react-native-cli

이후 설치가 잘 되었는지 아래와 같이 테스트 해보세요.

react-native --version

##output
react-native-cli: 2.0.1

 

이제 샘플 프로젝트를 생성해 보겠습니다. 

react-native init firstApp

 

생성된 프로젝트 주요 파일들 중 알고 가야할 내용을 살펴보겠습니다.

 

index.js : 기기 혹은 시뮬레이터에서 첫 번째로 호출하는 entry point이며, App.js를 호출하게 됩니다.

 

app.json : index.js에서 호출되며 앱의 이름을 정의하는데 사용합니다. 

 

App.js : 모바일 디바이스 화면에 출력되는 첫 번째 파일입니다. 

 

android/ : 안드로이드 앱을 위한 코드와 관련 파일들이 포함되어 있습니다. 

 

ios/ : ios 앱을 위한 코드와 관련 파일들이 포함되어 있습니다. 

 

 

앱 실행 해보기

Mac에서 iOS이라면 간단히 빌드/실행 할 수 있습니다.

react-native run-ios

# 이와 같이 시뮬레이션 할 디바이스를 선택해서 실행 가능하다.
react-native run-ios --simulator="iPad Pro"

# 아래 명령으로 테스트 가능한 디바이스 정보를 확인할 수 있다.
xcrun simctl list devices

Android 를 위한 빌드/실행을 위해 Android Studio 가 설치되어 있어야 합니다. 안드로이드 에뮬레이터 실행을 위해서는 $ANDROID_HOME 이라는 path가 설정되어 있는지 확인합니다. 

echo $ANDROID_HOME

# 만약 등록되어 있지 않다면 자신의 계정 홈 디렉토리로 가서 
cd $HOME

# ANDROID_HOME과 추가 path를 등록합니다. 
vi .bash_prifile

# 아래 내용을 복사하여 추가하세요.
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

# 저장 후 콘솔에서 $ANDROID_HOME가 정상적으로 출력되는지 확인 하시면 됩니다.

위 내용이 확인되었다면 이제 android 애뮬레이터를 실행할 수 있습니다.

react-native run-android

 

이제 개발을 시작할 준비가 모두 마무리 되었습니다. 

 

다음에는 실제 앱 개발에 도움이 될 수 있는 모듈들을 하나씩 적용해 보겠습니다.

Assets/Plugins/Android에 있는 AndroidManifest.xml 파일을 열어 아래 붉은 라인을 추가한다.


<manifest

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    package="com.amazonaws.unity"

    android:installLocation="preferExternal"

    android:versionCode="1"

    android:versionName="1.0">



tools로 붙은 태그는 빌드 시 적용되지 않는다. 툴 내부용 혹은 preview에만 적용되는 태그들이다. 


왜 이 태그를 구글에서는 포함하지 않고 AndroidManifest.xml를 만드는지 모르겠지만 (범용으로 사용되는 내용은 아닌 듯...), 구글링 해보면 아래와 같은 문구를 찾을 수 있다. 


It defines the XML namespace of the document. You should put it, otherwise tags like <RelativeLayout> could be not recognied by the parser.


요약하자면 이 테그가 없으면, 툴에서 AndroidManifest.xml 파일을 머지 할 때 문제가 발생하는 듯 하다. 

자주 안쓰는거니 이번에 확실히 정리하자.


준비물은 아래와 같다. 


- 안드로이드 OS가 설치된 디바이스.

- 유니티 5.0 이상 (개인/기업 버전 둘 다 가능)

- AP (PC와 모바일 디바이스가 같은 AP를 사용해야 서로 접근이 가능하다.)

  : 집에서는 보통 같은 공유기를 사용하기 때문에 문제없을 듯.

  : 보통 사무실에서는 보안등의 문제로 PC는 유선, 모바일은 별도의 무선을 사용할 듯. 

   이럴 경우 보통 2만원정도의 싼 공유기를 사면 AP로 사용 가능. 공유기 설정을 통해 AP로 변경하고, 모바일 디바이스의 wifi를 설정된 AP에 연결한다. 그러면 자동으로 할당하는 IP를 통해 이를 진행할 수 있다. 최근에는 일반적으로 디바이스 보안 정책이 있으므로 문제가 발생하면 관리자와 확인이 필요할 수 있음.

- logcat filter : http://cafe.naver.com/logcatfilter (디바이스에서 발생하는 로그를 볼 수 있는 뷰어. 개발자님에게 무한 감사. 덕분에 시간 많이 아꼈어요.!!)

- Android SDK의 sdk\platform-tools\adb.exe


아래와 같은 순서로 진행하면 된다.


1. adb 설정

    adb tcpip 8989 (포트는 원하는 번호로 변경 가능)

    adb connect 192.168.100.8:8989 (위에 적은 포트를 뒤에 사용. 192.168.100.8은 여러분의 모바일 디바이스에 할당된 IP로 변경하면 됨.)

   이렇게 하면 연결되었다는 메세지를 볼 수 있는데, 문제가 발생할 경우

   adb kill-server, adb start-server  두 명령어를 통해 재가동을 해보고 다시 시도해 보면 됨.

   (안 될 경우 에러메세지를 보고 추가 조정을 하세요.)


2. logcat filter 설정.

   가동 후 상단 디바이스 탬의 192.168.100.8:8989를 선택.

   시작 버튼을 누른 후 text 필더에 자신이 보고 싶은 로그에 포함된 텍스트를 입력하면 됨. 가능하면 로그를 남길 때 종류별로 검색/구분을 위한 텍스트를 삽입해 두는게 좋다.


3. monodevelop 세팅

   run 메뉴 -> Attach to .. 선택 -> 192.168.100.8:8989 선택. 

   (* 어플을 가동하기 전에는 192.168.100.8:8989는 보이지 않는다. 가동과 함께 시작되는 부분에 대한 코드 검증은 쉽지 않을 듯. 로그를 통해 검토하는 것을 추천.)

   (* 코루틴은 시작과 끝에만 브레이크가 걸림. 정상적으로 볼 수 있는 방법을 아시는 분은 댓글 부탁드립니다)







+ Recent posts