가끔 보자, 하늘.

https://yuddomack.tistory.com/entry/1React-Native-%EC%84%A4%EC%B9%98%EC%99%80-%EC%8B%A4%ED%96%89hello-world?category=754156 (이하 링크 문서) - 이 링크에 너무 잘 정리되어 있어 따라하면서 배우는 중입니다. (글쓴이님. 감사합니다. :)

https://wix.github.io/react-native-navigation/#/docs/Installing (이하 공식 문서)

chapter 6에서는 react native navigation을 다루는데, 최신 버전에서 변경된 내용들이 있어 별도로 정리를 해둡니다.

react-native-navigation을 설치하고 나면 low severity vulnerabilities에 대한 경고를 출력하고 npm audit fix(npm v6)를 실행하라는 안내가 나올 수 있습니다.

이를 실행하면 react-native-navigation을 사용하기 위해 필요한 몇몇 module의 버전을 조정하는 작업이 진행됩니다.

Android/iOS 세팅은 공식문서의 내용 중 수동 링크를 기준으로 정리하며 부족한 샘플 코드를 추가하였습니다. 왜 수동 링크 작업을 해야 하는지는 링크 문서에 잘 나와 있으니 참고하시기 바랍니다.

[RNN iOS 세팅]

우선 링크 문서 6장 의 내용을 참고하여 xcode에 react native navigation을 추가합니다. 공식문서보다 이 링크가 좀 더 명확히 정리되어 있습니다.

AppDelegate.m을 수정할 때 아래와 같은 에러가 발생할 수 있습니다.

 React/RCTBundleURLProvider.h file not found

 Use of undeclared identifier 'rootView'

이와 관련된 해결책은 공식 문서에 있으며, XCode에서 프로젝트를 선택 후, 메뉴 Product >> Scheme 에서 react native navigation을 선택하면 사라집니다.

링크 문서에서는 공식 문서와는 달리 RCCManager.h를 사용하도록 코드가 되어 있는데, 이전 버전의 내용이니, 아래 내용을 참고하시면 됩니다.

** 중간에 여러 코드 및 세팅을 테스트를 위해 수정하면서 Systrace.setEnable  관련된 에러가 ios 에뮬레이터에서 발생. 검색해보니 방법없으니 다시 설치하라는 내용만 있어 프로젝트 삭제 후 다시 설치. -0-a

관련 코드들은 공식 문서의 내용으로 적용하면 됩니다. 

(( AppDelegate.m ))

XCode를 위한 세팅은 이것으로 끝입니다.

[RNN Android 세팅]

** 간간히 이런 작업들을 할 때 느끼는 거지만 아래 링크 문서의 샘플 코드에서 rootProject.projectDir 처럼, 저런 정의된 값을 어디서 찾아야 하는지 난감할 때가 많다. 기존에 android studio를 많이 다뤄 보신 분들은 쉽게 알 수도 있을 듯 한데, 처음 볼 때는 뜬금없어서.. 특히 javascript 프로젝트 할 때는 predefined keyword가 아닌 것들이 (intelligence를 지원하지 않는 ide에서) class의 public 맴버처럼 접근하는걸 볼 때마다 이게 어디에 정의되어 있는지, 올바르게 사용된건지 확인하기가 만만치 않은 듯 합니다. 자꾸 하다보니 그러려니 하긴 하지만...

아래 네 개의 gradle 파일을 수정할 때는 공식 문서를 참고하고, 자신의 android studio 버전에 따라 문서의 내용과 다를 수 있으니, 그에 맞추어 수정해야 합니다.

(( android/settings.gradle ))

(( android/gradle/wrapper/gradle-wrapper.properties ))

(( android/build.gradle ))

(( android/app/build.gradle ))

아래 두 코드를 공식 문서를 참고하여 수정 합니다.

(( MainActivity.java ))

(( MainApplication.java ))

그 다음으로 React Navtive 의 버전을 타겟팅하는 설정이 android/app/build.gradle에 추가해야 합니다. 별도 항목으로 제외된 것을 보면 중요한 항목인 듯 하네요. package.json 파일을 확인하니 제가 사용하는 버전은 0.58.6인 상태입니다.

저는 missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5"로 설정을 추가 했습니다. 

공식 문서의 내용 1~8가지 따라하면서 주의할 점은 app/build.gradle의 dependencies를 추가할 때 특정 버전 대신 "${rootProject.ext.supportLibVersion}"을 설정하세요. 버전이 맞지 않아 빌드 실패 하는 경우가 종종 있었습니다. 

(https://github.com/wix/react-native-navigation/issues/3419 를 참고하세요.)

자주 사용하는 기능들 모아서 정리한 코드입니다. 

필요하신 분들은 가져다 그대로 사용하시면 됩니다. 

Date.prototype.mmddyyyy = function() {

      return (this.getMonth() + 1) +

      "/" +  this.padZero(this.getDate()) +

      "/" +  this.padZero(this.getFullYear());

};

Date.prototype.yyyymmdd = function() {

      return this.getFullYear()  +

      "/" +  this.padZero((this.getMonth() + 1)) +

      "/" +  this.padZero(this.getDate());

};

Date.prototype.mmddyyyytime = function(){

      return (this.getMonth() + 1) +

      "/" +  this.padZero(this.getDate()) +

      "/" +  this.padZero(this.getFullYear()) +

      " " + this.padZero(this.getHours()) + 

      ":" + this.padZero(this.getMinutes()) + 

      ":" + this.padZero(this.getSeconds());

};

Date.prototype.yyyymmddfordb = function() {

   var yyyy = this.getFullYear();

   var mm = this.getMonth() < 9 ? "0" + (this.getMonth() + 1) : (this.getMonth() + 1); // getMonth() is zero-based

   var dd  = this.getDate() < 10 ? "0" + this.getDate() : this.getDate();

   return "".concat(yyyy).concat("-").concat(mm).concat("-").concat(dd);

};

Date.prototype.yyyymmddtime = function(){

      return this.getFullYear()  +

      "/" +  this.padZero((this.getMonth() + 1)) +

      "/" +  this.padZero(this.getDate())+

      " " + this.padZero(this.getHours()) + 

      ":" + this.padZero(this.getMinutes()) + 

      ":" + this.padZero(this.getSeconds());

};

Date.prototype.yyyymmddstarttime = function(){

      return this.getFullYear()  +

      "/" +  this.padZero((this.getMonth() + 1)) +

      "/" +  this.padZero(this.getDate())+

      " " + "00:00:00";

};

Date.prototype.yyyymmddendtime = function(){

      return this.getFullYear()  +

      "/" +  this.padZero((this.getMonth() + 1)) +

      "/" +  this.padZero(this.getDate())+

      " " + "23:59:59";

};

Date.prototype.padZero =function (n) {

      n = n + '';

      return n.length >= 2 ? n : new Array(2 - n.length + 1).join('0') + n;

}

var util_date = {

      getToday_yyyymmdd: function(){

      var today = new Date();

      return today.yyyymmdd();

      },

      get_yyyymmdd:function(_date){

            if( _date == "" || _date == null || _date == undefined ){

                  return null;

            }else{

                  var date = new Date(_date);

                  return date.yyyymmdd();

            }

      },

      getToday_yyyymmddtime:function(_date){

            if( _date == "" || _date == null || _date == undefined ){

                  return null;

            }else{

                  var date = new Date(_date);

                  return date.yyyymmddtime();

            }

      },

      get_yyyymmddtime:function(_date){

            if( _date == "" || _date == null || _date == undefined ){

                  return null;

            }else{

                  var date = new Date(_date);

                  return date.yyyymmddtime();

            }

      },

      getThisMonday: function(_date){

            var d = new Date(_date);

            var day = d.getDay(),

            diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday

            return new Date(d.setDate(diff));

      },

      getLastMonday: function(_date){

            var d = this.getThisMonday(_date);

            return this.getNextDay(d,-7);

      },

      getNextMonday: function(_date){

            var d = this.getThisMonday(_date);

            return this.getNextDay(d,7);

      },

      getNextDay: function(_date, _count){

            var d = new Date(_date);

            d.setDate(d.getDate() + _count);

            return new Date(d);

      },

      getMonday:function(d, weeksago) {

            var day = d.getDay(),

            diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday

            var monday = new Date(d.setDate(diff));

            monday.setDate( monday.getDate()- 7*weeksago);

            return monday;

      },

      getFirstday: function(d){

            var t = new Date(d);

            return new Date(t.getFullYear(), t.getMonth(), 1);

      },

      getFirstdayOfLastMonth: function(d){

            var t = this.getLastdayOfLastMonth(d,0);

            return new Date(t.getFullYear(), t.getMonth(), 1);

      },

      getLastdayOfLastMonth: function(d, monthsago){

            var t = new Date(d);

            t.setMonth( t.getMonth()-monthsago);

            t = new Date(t.getFullYear(), t.getMonth(), 0);

            return t;

      },

      getLastdayOfThisMonth:function(d){

            var t = new Date(d);

            return new Date(t.getFullYear(), t.getMonth() + 1, 0);

      },

      getFirstdayOfNextMonth: function(d){

            var t = this.getLastdayOfThisMonth(d);

            return this.getNextDay(t, 1);

      },

      getDiffDays: function(f , s){

            var date1 = new Date(f);

            var date2 = new Date(s);

            var timediff = Math.abs( date1.getTime() - date2.getTime() );

            return Math.ceil( timediff/(1000*3600*24));

      },

      bThisMonth: function ( d ){

            var today = new Date();

            var date1 = new Date(d);

            if(today.getFullYear() == date1.getFullYear() && today.getMonth() == date1.getMonth())

                  return true;

            return false;

      },

      bToday: function ( d ){

            var today = new Date();

            var date1 = new Date(d);

            if(today.getFullYear() == date1.getFullYear() && today.getMonth() == date1.getMonth() && today.getDay() == date1.getDay())

                  return true;

            return false;

      },

      bThesedays: function(d){

            var today = new Date();

            var date1 = new Date(d);

            var diff = this.getDiffDays( today, date1);

            if(diff < 5)

                  return true;

            return false;

      }

};

module.exports = util_date;

[about setting command line tools ]

react-native run-ios 로 실행을 시도했을 때 command line tools 없다는 에러가 발생하는데, 

xcode-select --install로 설치를 해도 반응이 없다. 

단순히 설치만 해서는 안되고 xcode preferences에 설정을 해야 한다. 

XCode > Preferences > Locations 화면에서 Command Line Tools 이 비어 있다면 이를 설정하면 된다.

--------------------------------------------------------------------------------------------------------

when it occurs an error there is no command line tools you run "react-native run-ios" command

in my case, it doesn't work even I installed the tool like this "xcode-select --install"

the reason is ... you have to set an information in XCode > Preferences > Locations.

[8081 port problem]

sudo lsof -i :8081 로 해당 프로세스 찾아서 kill.

--------------------------------------------------------------------------------------------------------

Find a process using the port 8081 like this " sudo lsof -i : 8081" and kill it.

[Build failed]

Entry, ":CFBundleIdentifier", Does Not Exist

signing 관련 이슈. 생성한 프로젝트의 xcodeproj 로 xcode 실행 후 General > Signing 설정. 이후 빌드하면 관련 에러없이 애뮬레이터로 실행됨.--------------------------------------------------------------------------------------------------------

The reason is about signing. You have to set a signing information in XCode project > General/Signing on XCode project that you made.

[error : npm update check failed]

sudo chown -R $USER:$(id -gn $USER) /Users/YOUR_USERNAME_HERE/.config

redis config 파일에서 암호를 지정할 수 있는데... 

requirepass 원하는암호

이렇게 설정할 수 있다. 

nodejs 에서 암호 설정 안하고 접근하면 아래와 같은 에러가 발생한다. 

ReplyError: Ready check failed: NOAUTH Authentication required.

    at parseError (/home/ec2-user/mwsdss/node_modules/redis-parser/lib/parser.js:193:12)

    at parseType (/home/ec2-user/mwsdss/node_modules/redis-parser/lib/parser.js:303:14)

const redisCli = redis.createClient(6379,'127.0.0.1');

redisCli.auth('원하는암호');

구글의 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 사용하기 - 마무리 하며...

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

(windows 환경)

nodejs에서 80포트 열어 쓰던 어플이 있는데, 어느날 갑자기

error: listen EACCES 0:0:0:0:80 에러를 뱉으면서 안된다. --a

netstat -ano 하면 ip,port 그리고 해당 포트를 사용하는 PID를 볼 수 있다. 

찾아보니 4 ... System이 쓰고 있다고. -- ㅁ.... 모지..

이래저래 찾아보니.. 최근에 로컬에 mssql을 설치했는데.. 

SQL Server Reporting Services가 내부적으로 80포트를 쓰고 있었네 --;

서비스 중지 시키니 잘 돌아감. 

휴 ~ 

방법을 몰라서 인터넷을 찾아보니 사람마다 다 방법이 다르다. --;;

var old = new Date ( 특정일 );

var now = new Date();

var gap = new Date( 0,0,0,0,0, now- old);

이렇게 처리한 분도 있던데.. 내가 원하는 값은 아니었고.. 

시간, 분, 초, ms 차이를 알고 싶었기에.. 이거저거 뒤져보다.. 

getTime 인터페이스가 있어 사용해보니.. OK!!

var old = new Date ( 특정일  or 시간);

var now = new Date();

var gap = now.getTime() - old.getTime();

var sec_gap = gap / 1000;

var min_gap = gap / 1000 /60;

(링크) 포멜로 아키텍처 개요

잘 정리되어 있어서 링크만 업데이트 합니다. 

곧 프레임워크의 흐름(링크)을 정리해서 업데이트 하겠습니다. 

^^

클라이언트는 브라우저, 서버는 nodejs로 가정.

업데이트 진행 과정을 확인할 수 있도록 만들었다.

브라우저에서는 아래와 같은 코드로 작업을 하면 된다. 스트림으로 보낼 파일을 지정하고, 해당 서버로 소켓 연결해서 보낸다. 'data' 메세지를 통해 현재 업데이트된 사이즈를 확인할 수 있다.

var fn =$("input[type=file]")[0].files[0]; // input 폼을 이용해서 지정된 파일 확인

var AllSize = fn.size; // 진행 사항을 체크하기 위한 파일 전체 사이즈

var UploadedSize = 0; // 현재 업로드된 용량

var socket = io.connect('localhost:8765');

var stream = ss.createStream();

ss(socket).emit('upload', stream, {path: tarpath, name: fn.name, size: fn.size});

var blobstream = ss.createBlobReadStream(fn);

blobstream.on('data',function(chunk){

UploadedSize += chunk.length;

      console.log(' updated >> ' + UploadedSize + '/' + AllSize );

});

blobstream.pipe( stream );

서버에서는 upload 메세지로 전송되는 데이타를 받아 지정된 파일로 저장한다.

(*path.basename 는 지정된 경로명을 제외하고 파일명만 추려낸다.)

var io = require('socket.io').listen(8765);

var ss = require('socket.io-stream');

var path = require('path');

io.sockets.on('connection', function(socket){

ss(socket).on('upload', function(stream,data){

var fn = path.basename(data.name);

stream.pipe(fs.createWriteStream(fn));

});

});

필요해서 만들어 봄. -0-