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

 

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

 

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

javascript로 aws cognito 연동 할 때, app 설정에서 "클라이언트 보안키 생성" 옵션을 해제해야 한다.


https://github.com/aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js


"When creating the App, the generate client secret box must be unchecked because the JavaScript SDK doesn't support apps that have a client secret."


클라이언트 보안 옵션은 기본으로 체크 되어 있어서 생각없이 넘어 갔는데, 켜져 있으면  "Unable to verify secret hash for client .." 라는 에러는 보게된다.

앱 클라이언트 첫 설정할 때 주의 필요!!!



구글의 App engine은 App Engine Hosting 과 Managed VMs Hosting 두 가지 중 한가지를 선택할 수 있습니다. 


이번에는 이 둘의 차이점과 앞으로 사용할 Managed VMs Hosting에 대해 상세히 정리해 보겠습니다. Managed VMs Hosting은 2015년 7월 현재 베타 서비스 중이며, 이곳에 기록되는 내용은 이후 계속 변화할 수 있음을 참고하세요. ..... 를 줄줄이 쓰려 했으나 사실 공식 페이지에 워낙 잘 나와있어서, 괜히 사족 안달고  간단히 정리합니다. 


둘은 차이점은 https://cloud.google.com/appengine/docs/managed-vms/ 의 중간 정도에 나와있는 표를 보시면 쉽게 이해하실 수 있습니다.


제가 생각하는 가장 큰 장점은 기존에 정해진 Java, Go, Python, PHP가 아닌 다른 언어로 제작된 어플리케이션을 올릴 수 있다는거죠. 끝!! 


이 아니고.. 기존에 쓰려던 글 중 둘의 차이를 설명한 내용만 아래 남겨두었습니다. 굳이 보실 필요는 없지만... 한번 간단히 읽어 보셔도 됩니다. ^^


=============================================================================


이전 세대에서는 게임 서비스를 위해 IDC와 회선을 임대하고 IBM과 같은 회사에서 서버 시스템을 구매하여 IDC에 설치해야 했으며, 규모가 클 경우 이를 관리하기 위한 인력을 IDC 센터 내에 직원을 두어야 했습니다. 유저가 급격히 증가할 경우를 대비해 시스템 공급업체와 협상하여 빠른 시간안에 시스템을 투입하기 위한 계약을 했어야 했죠. 해외에 서비스를 위해서는 더 복잡한 절차가 기다리고 있었습니다. 게다가 서비스를 위한 대부분의 기능을 직접 개발을 해야 했습니다. 보안 업데이트와 같은 중요한 OS 변경 때마다 개발자와 운영자들의 스트레스를 극도로 상승시키곤 했죠.


Google App Engine 은 Platform as a Service입니다. 

이제 우리는 서비스할 기능을 구현하고, Google의 인프라스트럭쳐에 올려 빌드하고 간단히 배포할 수 있습니다. Google Console을 이용해 원격으로 시스템의 상태를 실시간으로 확인할 수 있으며, 유저의 증감에 따라 GAE에 설정한 대로 어플리케이션을 실행하는 서버들이 자동으로 증가,감소가 진행됩니다. GAE의 메인터넌스는 이제 다운없이 진행이 됩니다.(이에 대해서는 이곳을 참고해 보세요. 아.. 나프다 애청하고 있습니다. 더 많은 개발자 분들이 들으시길 바랩니다. ^^)이전과는 비교할 수 없을 정도로 간편해 졌으며, 운영비용을 획기적으로 줄일 수 있게 되었습니다.


이를 통해 로컬의 작은 회사조차도 전세계에 자사의 서비스를 사용할 수 있게 되었습니다.


기존에 GAE를 활용하는 방법을 기술한 훌륭한 서적들과 아티클들이 많이 있지만 굳이 제 블로그에 다시 정리하는 이유는, 제 경험이 미천하여 기록하며 배우고자 함이며, 저와 같은 시도를 하시는 분들께 조금이나마 도움이 되었으면 하는 마음입니다.


서론이 길었네요. 이제 본론으로 들어가겠습니다.


(* 아래 단락의 참고/이미지출처 사이트: https://cloud.google.com/appengine/docs/managed-vms/)


GAE는 2015년 7월 현재, 두 가지 호스팅 옵션을 제공합니다. 하나는 기존의 App Engine Hosting 이며, 2014년경부터 지원하기 시작하여 아직 베타 서비스 중인, Managed VMs Hosting 입니다. 


이 둘의 차이를 아래의 이미지에서 간단히 이해할 수 있습니다.



위 참고 사이트의 중간쯤을 보시면 아래의 표를 보실 수 있는데, 위 그림과 같이 보시면 startup time이 왜 이렇게 차이가 나는지 알 수 있습니다.


Instance startup time을 언급한 이유는 App Engine sandbox와 비교해 이 요소 이외에 단점이 거의 없기 때문입니다.


.

.

.




연재 순서


 1. Node.js로 App Engine 사용하기 - 들어가며... 

 2. Node.js로 App Engine 사용하기 - App Engine Hosting과 Managed VMs Hosting

 3. Node.js로 App Engine 사용하기 - Hello World with Node.js

 4. Node.js로 App Engine 사용하기 - 데이터 다루기

 5. Node.js로 App Engine 사용하기 - 인증

 6. Node.js로 App Engine 사용하기 - 로깅

 7. Node.js로 App Engine 사용하기 - Cloud Pub/Sub 서비스 시용하기

 8. Node.js로 App Engine 사용하기 - Cloud 설정하기

 9. Node.js로 App Engine 사용하기 - 게임 릴리즈 절차 정리

10. Node.js로 App Engine 사용하기 - 마무리 하며...


그럼 다음 글에서 뵙겠습니다. 



현재 구글 앱 엔진은 java, python, go,php 네 가지 언어를 사용한 어플리케이션을 지원합니다.


위 언어 이외의 언어들(nodejs, perl, runy 등등)은 앱 엔진의 runtime 옵션에 custom 이 추가되면서 사용이 가능해졌습니다. (app.yaml의 옵션에서 설정이 가능합니다.)


현재 베타로 운영되고 있으며, 서버는 베타 기간 동안은 오직 북미에서만 운영된다고 합니다. 


가격에 대해서는 사용한 만큼 측정한다고 되어 있는데, 얼마나 써야 유료가 되는지, 유료로 전환할 경우 대략적인 비용이 얼만지는 바로 다음 글에서 측정해 보겠습니다.


이를 위해 Docker를 같이 다룰텐데, Docker에 대해서는 상세히 언급하지는 않을 예정입니다. 


Node.js와 Docker에 대해서는 이미 알고 계시다고 가정하고 진행하겠습니다. Docker는 깊이 있게 다루지 않으니 모르셔도 일단 진행하시면서 익히셔도 되니 참고하세요.


=============================================================================


시작하기 전에 아래 내용에 대한 준비가 필요합니다. 


- gmail 생성

- https://cloud.google.com/appengine/ 에서 무료평가판 신청

- google app engine sdk를 설치. 이는 로컬에서 구글앱엔진의 가상환경을 구축합니다.

- nodejs 설치


=============================================================================


https://cloud.google.com/nodejs/getting-started

https://github.com/GoogleCloudPlatform/nodejs-getting-started


위 두 사이트를 지속적으로 참고하세요. 앞으로 길지 않은 글을 작성하는 동안 위 샘플 프로젝트와 공식 사이트를 많이 참고할 예정입니다.


제 블로그의 글들은 대부분 사전에 알고 있는 지식을 쓰는 경우보다는 스터디나 실제 업무를 진행하면서 부딪히거나 힘들었던 내용들을 실시간으로 올리면서 작성됩니다. 그래서 잘못된 내용이 올라가기도 하고, 글이 완료된 후 퇴고 혹은 내용을 수정하는 경우가 종종 있습니다. 참고해 주세요. ^^;


이 글의 연재 목표는 아래와 같습니다. 


Google App Engine을 활용하여 게임 서버를 구축하는 것이며, 이를 위해 아래 내용들을 직접 제작/설정해 볼 예정입니다. 

- 유저의 게임 진행 데이터 저장 , 리더보드 제공

- 게임 이벤트 로깅

- 클라우드 플렛폼 활용법 

샘플 게임 클라이언트는 html5 Canvas를 사용할 예정이며, 클라이언트에서 사용될 코드들은 javascript로 제작할 예정입니다.


앞으로 연재되는 내용의 순서는 아래와 같습니다. 진행하면서 상황에 따라 변경될 수 있으니 양해 바랍니다. 주 내용은 이곳을 참고하여 따라갈 예정이며, 기존 내용에 제가 테스트를 진행하면서 발생하는 추가 내용들을 기록할 예정입니다. 


연재 순서


 1. Node.js로 App Engine 사용하기 - 들어가며... 

 2. Node.js로 App Engine 사용하기 - App Engine Hosting과 Managed VMs Hosting

 3. Node.js로 App Engine 사용하기 - Hello World with Node.js

 4. Node.js로 App Engine 사용하기 - 데이터 다루기

 5. Node.js로 App Engine 사용하기 - 인증

 6. Node.js로 App Engine 사용하기 - 로깅

 7. Node.js로 App Engine 사용하기 - Cloud Pub/Sub 서비스 시용하기

 8. Node.js로 App Engine 사용하기 - Cloud 설정하기

 9. Node.js로 App Engine 사용하기 - 게임 릴리즈 절차 정리

10. Node.js로 App Engine 사용하기 - 마무리 하며...


그럼 다음 글에서 뵙겠습니다. 



+ Recent posts