가끔 보자, 하늘.

json, 별도 포멧의 파일에 데이터를 입력하고 사용하려면 데이터 가공 및 배포에 대한 허들이 발생합니다. 

트래픽이 많이 발생하지 않는다면 spreadsheet에서 데이터를 일괄 관리하고, 필요한 곳에서 spreadsheet 접속하여 갱신된 최신 데이터를 가져와 사용한다면 데이터 가공/배포에 대한 비용을 극적으로 줄일 수 있습니다. 

모듈은 google-spreadsheet를 사용하여 Google Spread Sheet API를 사용하며, document는 theoephraim.github.io/node-google-spreadsheet/#/ 를 참고하시면 됩니다.

API 사용을 위해서는 console.developers.google.com/에서 API 사용 허가를 설정해야 합니다. 

sheet 사용을 위한 프로젝트를 새로 만들어 보겠습니다. 

상단 프로젝트를 선택하고 "새 프로젝트"를 생성합니다. 

 프로젝트를 생성했다면 좌측 메뉴에서 라이브러리를 선택합니다. 

API 라이브러리 검색 란에 'sheet'를 입력한 후 "Google Sheets API" 를 선택, 그리고 "사용"버튼을 눌러주시기 바랍니다. 

이제 문서 사용을 위한 "사용자 인증 정보"를 세팅해야 합니다. 화면 좌측에서 "사용자 인증 정보"를 클릭한 후 "사용자 인증 정보 만들기"를 선택합니다.

'sheet-user'라는 이름을 입력 한 후 "완료" 버튼을 선택하여 계정 생성을 마무리 합니다.

다음으로 인증에 사용할 키를 생성하겠습니다.

서비스 계정 정보 중 우측의 작업 버튼을 누르면 "키 만들기" 메뉴가 있습니다. 이 메뉴를 선택하면 키 유형을 선택하는 다이얼로그가 뜹니다. 

JSON 을 선택 후 "만들기" 버튼을 누르면 키가 생성됩니다. 생성된 json 파일은 코드에서 인증을 위해 사용하게 됩니다.

이제 접근하고자 하는 spreadsheet 문서로 가서 "공유"버튼을 눌러 생성된 계정 ( 이 예제에서는 sheet-user@... 로 생성했던 계정을 말합니다.) 사용자 그룹에 편집자로 추가합니다. 읽기만 할 경우 뷰어로 추가하셔도 무방합니다.

계정을 추가한 후 문서ID를 복사해 둬야 합니다. 해당 문서가 열린 화면의 주소창에 아래 이미지 중 파락색으로 칠해진 부분이 해당 문서의 ID입니다. 이 값만 별로도 복사해 두시기 바랍니다. 

모든 준비가 마무리 되었습니다. 이제 코드로 해당 문서를 접근해 보겠습니다.

const {GoogleSpreadsheet} = require("google-spreadsheet");
const gs_creds = require("./eco-test-d2asdf22849b5bb4.json"); // 키 생성 후 다운된 json파일을 지정합니다.
const doc = new GoogleSpreadsheet("문서ID를 입력하세요.");

async function authGoogleSheet(){
	try{
		await doc.useServiceAccountAuth(gs_creds);
		await doc.loadInfo()
	}catch(err){
		console.log( "AUTH ERROR ", err)
	}
}
authGoogleSheet(); // 처음 시작할 때 문서 접속에 대한 인증을 처리하고 해당 문서를 로드합니다.

.
.
.

async function readFirstSheetRow(){ 
	var sheet = doc.sheetsByIndex[0]; // 첫번째 시티를 가져옵니다.
    var rows = await sheet.getRows({offset:3, limit:100}); // 세 번째 row 부터 100개 row를 가져옵니다.
    rows.forEach((ele)=>{
    	console.log( ele._rawData[0] , ele._rawData[1] ) // 읽어온 rows 중 현재row에서 첫 번째 컬럼과 두 번째 컬럼을 출력합니다.
    });
}
readFirstSheetRow();

위 코드를 실행해 보시면 해당 문서의 첫번째 sheet의 세번째 row 부터 100개를 읽어와 각 row의 첫 번째, 두 번째 컬럼의 정보를 화면에 출력합니다. 

더 많은 API는 이 문서를 참고하시기 바랍니다.

도움이 되셨길 바라며 이상 마치겠습니다.

이번 글에서는 간단한 UI를 적용해 보겠습니다.

React native 설치 및 프로젝트 세팅 방법은 앱 개발 - 01 을 참고하시기 바랍니다.

앱 개발 - 01 에서 생성한 firstApp 생성된 프로젝트가 있다고 가정한 상태로 설명하겠습니다. 프로젝트가 생성되지 않았다면 앱 개발 - 01를 참고해서 우선 프로젝트를 생성하고 다시 이 글로 돌아와 주세요.

이 글에서는 UI를 다룰 때 필요한 주요 기능을 예제를 통해 정리해 보겠습니다. 순서는 아래와 같습니다. 

• React Native Elements 로 UI 구현
• Layout 설정
• React Native Navigation 사용하기
• Popup 구현

React Native Elements 로 UI 구현

UI 객체 구현은 React Native Elements (이하 RNE) 을 사용했으며, 설정 절차와 사용 방법만 간단히 언급하겠습니다.

생성한 프로젝트의 root에서 RNE를 아래와 같이 설치해 주세요.

# react native elements를 설치합니다.
npm i react-native-elements --save

# vector icons을 설치합니다.
npm i --save react-native-vector-icons

# 사용하는 react native version은 0.61.5 버전이라 link 과정은 생략합니다.

처음으로 버튼을 화면에 하나 그려보겠습니다. 

App.js 파일을 열어 아래와 같이 고쳐보세요.

import React from 'react';

import {
  SafeAreaView,
} from 'react-native';

import { Button } from 'react-native-elements';

const App: () => React$Node = () => {
  return (
      <SafeAreaView>
         <Button title="Hello World!!" />
      </SafeAreaView>
  );
};

export default App;

SafeAreaView 키워드는 어떤 디바이스에서든 기본 화면 안쪽에 출력할 수 있는 영역을 의미합니다. 그 외 여러 키워드들이 앞으로 쓰여질텐데 이 글에서는 Interface를 사용하는데 필요한 부분만 설명을 하도록 하겠습니다. 그 외 키워드들은 공식 문서를 참고하시기 바랍니다.

실행하면 아래와 같은 결과를 볼 수 있습니다.

공식 문서 중 Customization 부분은 꼭 확인해 보시고 다음으로 넘어가세요.

Layout 설정

다음에는 화면을 1:1:2로 삼 분할 하고 중앙 레이어에 버튼을 넣어보겠습니다. 

일단 테스트 코드를 먼저 복사해서 테스트 해보시기 바랍니다. 

import React from 'react';
import {
  SafeAreaView,
  View,
  Text
} from 'react-native';

import { Button } from 'react-native-elements';

const App: () => React$Node = () => {
  return (
      <SafeAreaView style={{marginTop : 50, flex: 1}}> // (1)
        <View style={{flex: 1, backgroundColor:'#EE2C38'}}>  // (2-1)
        </View>

        <View style={{flex: 1, backgroundColor:'#FAA030'}}>  // (2-2)
          <Button raised title="Hello World!!" /> 
        </View>

        <View style={{flex: 2, backgroundColor:'#32B76C'}} /> // (2-3)
      </SafeAreaView>
  );
};

export default App;

flex는 아이템을 어떻게 화면을 채울지를 결정하는 키워드입니다. 값은 화면의 비율을 설정합니다. 2-1/2/3을 보면, 같은 depth에 세 개의 flex가 있고 각각이 1, 1, 2 라고 설정되어 있다면 해당 영역을 1:1:2의 화면 비율로 나누겠다는 설정입니다.

레이아웃에 대한 보다 상세 내용은 이 링크 를 참고하세요.

화면 레이아웃을 잡아 봤으니 이제 페이징 처리를 해보겠습니다. 

React Native Navigation 사용하기

모바일은 보통 단일 화면으로 구성되기 때문에, React Native 에서는 화면 전환을 위해 React Native Navigation이라는 모듈을 주로 사용합니다. 

우선 필요한 모듈을 설치합니다. 

npm install @react-navigation/native @react-navigation/stack

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

# ios일 경우 cocoapods로 필요한 라이브러리를 설치해야 합니다.
cd ios
pods install
cd ..

추가 모듈을 설치할 때 에뮬레이터는 끄고 설치 후 재실해 하시기 바랍니다. 

App.js에 아래 코드를 복사한 후 재실행 해보시기 바랍니다. 

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {
  SafeAreaView,
  View,
  Text
} from 'react-native';
import { Button } from 'react-native-elements';

const Stack = createStackNavigator();

const App: () => React$Node = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Second" component={SecondScreen} options={{title: 'SecondPage'}}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

function HomeScreen({navigation}) {
  return (
    <Button
      title="Go to Second Page"
      onPress={() => navigation.navigate('Second', {name: 'Parameter_1'})}
    />
  );
}

function SecondScreen({navigation}, param) {
  return (
    <SafeAreaView style={{marginTop:50, flex:1}}>
      <View style={{flex:2}} />
      <View style={{flex:2}} />
      <View style={{flex:1, justifyContent:'flex-end'}}>
        <Button title="Back"  onPress={() => navigation.goBack()} />
      </View>
    </SafeAreaView>
  );
}

우선 App 코드를 NavigationContainer로 전체를 감쌉니다. 그리고 Stack.Navigator 안에 사용할 스크린 화면 내용을 정의 합니다. 

Stack.Screen의 속성 중 name은 코드에서 지정자처럼 사용할 이름이며, component는 해당 화면에 대한 모듈명을, option의 title에는 각 페이지의 타이틀 명으로 사용됩니다. option에 대한 상세 정보는 이 링크를 참고하세요.

마지막 두 개의 함수는 세부 화면을 정의한 코드입니다. 

Popup 구현

이 예제에서는 이전에 다루지 않은 몇 가지 중요 개념이 나오기 때문에 우선 샘플 코드(원본 링크)로 테스트를 해 보시고 아래 설명을 읽어보시기 바랍니다.

import React, { Component } from 'react';
import {
  Modal,
  View,
  Text,
  TouchableHighlight,
  StyleSheet
} from 'react-native';
import { Button } from 'react-native-elements';

testModalVisible = false;

const App: () => React$Node = () => {
  return (
    <ModalExample />
  )
}
export default App;

class ModalExample extends Component {
  state = {
    modalVisible: false
  }
  toggleModal(visible) {
      this.setState({ modalVisible: visible });
  }
  render() {
    return (
       <View style = {styles.container}>
          <Modal animationType = {"slide"} transparent = {false}
             visible = {this.state.modalVisible}
             onRequestClose = {() => { console.log("Modal has been closed.") } }>
             
             <View style = {styles.modal}>
                <Text style = {styles.text}>Modal is open!</Text>
                
                <TouchableHighlight onPress = {() => {
                   this.toggleModal(!this.state.modalVisible)}}>
                   
                   <Text style = {styles.text}>Close Modal</Text>
                </TouchableHighlight>
             </View>
          </Modal>
          
          <TouchableHighlight onPress = {() => {this.toggleModal(true)}}>
             <Text style = {styles.text}>Open Modal</Text>
          </TouchableHighlight>
       </View>
    )
  }
}

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
      backgroundColor: '#ede3f2',
      padding: 100
   },
   modal: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: '#f7021a',
      padding: 100
   },
   text: {
      color: '#3f2949',
      marginTop: 10
   }
})

React 공식 페이지에는 "A JavaScript library for building user interfaces"라는 문구가 있습니다. 그리고 중앙에 "Component-Based"라는 문구가 떡 하니...!

위 예제의 정확한 이해를 위해 Component와 state 그리고 props에 대한 정확한 이해가 필요한데, 예제 중심의 이 글에서 이들을 설명하기는 너무 길어지기 때문에 제가 찾았던 글들 중 가장 잘 설명이 되어 있다고 생각하는 링크들를 아래에 기록했으니 여러분도 꼭 읽어보시기 바랍니다. 

• React의 Component에 대한 이해를 돕는 글
• Component의 setState에 대한 깊은 이해를 돕는 글

절대 설명하기 귀찮아서 그런건 아니...

지금까지 React-Native 에 필요한 UI 중요 요소 네 가지를 예제로 알아보았습니다. 

다음은 유용한 UI 객체들을 살펴보겠습니다.

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 :XCode , Android Studio 들은 네이티브 앱 빌드를 위해 필요한 SDK입니다.

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

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

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

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

(* 이 글은 NodeJS 10.15.1 을 기준으로 작성되었습니다. )

한국은 GMT +9 를 기준으로 시간을 사용하며, 데이터를 다룰때도 일반적으로는 GMT +9 기준을 사용합니다. 단일 솔루션만 다룰 때는 거의 신경쓰지 않겠지만, 이기종 혹은 여러 솔루션을 한번에 컨트롤 할 때는 상당히 거슬리는 문제가 됩니다. 특히 월드 와이드 서비스를 하고 있다면요. 대부분의 DB에서 UTC 기준으로 값을 저장하기 때문에 큰 문제는 없지만, 간혹 일부 npm에서 datetime 자료형을 다룰 때 미묘한 차이가 있습니다.

node-mysql(구분을 위해 임시로 node-를 붙였습니다)의 경우, 저장된 datetime 값을 그대로 가져오기 때문에 전혀 문제가 없는데 반해, node-mssql은 useUTC옵션을 제대로 설정하지 않으면 잘못된 날짜 정보를 가져오게 되어 문제가 발생합니다. 

예를 들면 아래와 같습니다. 
(아래 테스트는 DB : MSSQL/2008R2, MySQL/MariaDB10.4, npm package version : node-mssql/4.2.0, node-mysql/2.16.0 하에서 진행되었습니다.)

MSSQL과 MySQL의 어떤 테이블의 datetime 컬럼에 "2019-01-01 00:00:00" 라는 값을 넣어보겠습니다. 이 값은 UTC 기준으로 값이 저장됩니다. string 형태로 출력해보면 "Mon, 31 Dec 2018 15:00:00 GMT", 실제 저장된 값은 "15462684000000"입니다.

이 값을 MSSQL의 management studio, MySQL는 prompt 혹은 HeidiSQL 모두에서 현지 시간으로 보입니다. 즉 "2019-01-01 00:00:00"으로 보이게 됩니다.

이제 node-mssql/node-mysql로 값을 읽어보면 아래와 같은 결과가 나옵니다.

2019-01-01 09:00:00  (MSSQL NPM으로 읽어온 경우) 
2019-01-01 00:00:00  (MySQL NPM으로 읽어온 경우) 

node-mssql으로 얻은 결과값이 이상한 것을 보실 수 있습니다. node-mssql에는 useUTC 옵션이 있습니다. default 갑이 true로 되어 있어, DB의 datetime이 어디를 기준으로 되어 있던 무조건 UTC 기준값으로 인지합니다. 그래서 최종 출력시에는 Asia/Seoul 의 시간대인 +9시간이 되어 출력된 것이죠. 

connection에 사용되는 config값에 useUTC 옵션값을 추가하고 값을 false로 설정하면 현지 시간값으로 읽어옵니다. 사용에 주의 하세요. 

이상입니다. 좋은 하루 되세요. :)

JavaScript의 Date 객체는 아래의 특징을 가지고 있습니다. 다른 언어에서도 크게 다르지 않습니다.

- Date 객체는 UTC, 1970년 1월 1일 0시를 기준으로 하며, 밀리세컨트로 시간값을 기록합니다. 
- 만약 입력된 값이 유효하지 않다면 NaN값이 반환됩니다.
- 월은 0부터 시작하며 11이 12월이 됩니다.
- 요일은 0부터 시작하며 0이 일요일, 6일 토요일이 됩니다. 
* 크로스 브라우징 문제가 일부 있습니다. 작성 전 이에 대한 문제를 검토해 보시기 바랍니다. (https://www.google.com/search?q=js+date+cross+browser+format) 보다 상세한 내용은 이 곳(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date)을 참고하세요.

아래 예제에서는 JavaScript Date 객체 사용법을 알아보겠습니다.

var date1 = new Date('2019-01-01T00:00:00.000Z'); 
var date2 = new Date('2019-01-01T00:00:00'); 

console.log( "RAW DATE = ",date1, " / ", date2);  
// 결과 (1) : RAW DATE = 2019-01-01T00:00:00.000Z / 2018-12-31T15:00:00.000Z 
console.log( "toString = ",date1.toString(), " / ", date2.toString());  
// 결과 (2) : toString = Tue Jan 01 2019 09:00:00 GMT+0900 (GMT+09:00) / Tue Jan 01 2019 00:00:00 GMT+0900 (GMT+09:00)  

date1에는 UTC(협정 세계시, Coordinated Universal Time)로, date2에는 현지 시간을 입력했습니다. Date는 입력된 값을 분석하여 UTC로 값을 보관합니다. 

이를 그대로 출력하면 "결과 (1)"과 같이 UTC 기준으로 출력되는 것을 확인할 수 있습니다. Seoul은 시간은 UTC 기준 +9 시간이므로 UTC로 표현하게 되면 9시간 전의 시간으로 표기됩니다. 두 값을 특정한 조건이나 Date의 함수를 사용하지 않고 출력하면 UTC 기본값으로 출력됩니다. 그래서 date1은 입력값과 동일하게, date2는 9시간 전으로 출력되는 것을 확인할 수 있습니다.  

이제 문자열로 시간을 표현하기 위해서 toString 함수를 사용하니 "결과 (2)"과 같이 date1, date2 모두 현지 시간으로 출력되는 것을 확인할 수 있습니다. date1는 UTC+9에 맞춰 입력된 시간에 +9시간이 되어 출력되고, date2는 현지 시간으로 입력한 값이 그대로 보이는 것을 확인할 수 있습니다. 

그럼 시간 데이타에서 getHours()로 시간을 알아보면 어떻게 나오게 될까요?

var date1 = new Date('2019-01-01T00:00:00.000Z'); 
var date2 = new Date('2019-01-01T00:00:00'); 

console.log( "hours = ",date1.getHours() ," / ", date2.getHours() ); 
// 결과 (3) : hours = 9 / 0 
console.log( "hours = ",date1.getUTCHours() ," / ", date2.getUTCHours() ); 
// 결과 (4) : hours = 0 / 15 

getHours 함수는 현지 시간값을 기준으로 값을 반환하며, UTC 시간값을 기준으로 값을 반환받길 원한다면 getUTCHours 함수를 사용할 수 있습니다. setHours와 setUTCHours도 마찬가지입니다.

var date1 = new Date('2019-01-01T00:00:00.000Z'); 
var date2 = new Date('2019-01-01T00:00:00'); 

date1.setHours(9); 
date2.setHours(9); 

console.log( "DATE1 = ",date1 ," / DATE2 = ", date2 ); 
// 결과 (4) : DATE1 =  2019-01-01T00:00:00.000Z  / DATE2 =  2019-01-01T00:00:00.000Z 

setHours 함수는 첫 인자를 UTC가 아닌, 현지 시간의 시간값으로 인지합니다. 그러므로 당연히 내부에서도 시간값을 설정할 때 UTC가 아닌 현재 시간을 기준으로 주어진 시간값을 설정하게 됩니다. 

date1의 경우 현지 시간은 2019-01-01 09:00:00 이었으며, setHours에서 9시로 지정되었기 때문에 수정된 것은 없습니다. 그래서 출력하면 UTC 기준으로 2019-01-01T00:00:00.000Z 입니다.

date2의 경우 현지 시간은 2019-01-01 00:00:00 이었으며, setHours에서 9시로 지정되어 2019-01-01 09:00:00로 수정되었습니다. 그래서 출력하면 UTC 기준으로 2019-01-01T00:00:00.000Z 입니다. (결과 (1)에서는 2018-12-31T15:00:00.000Z 이었습니다.)

지금까지 JavaScript에서 Date 객체에 대해서 간단히 알아보았습니다. 

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

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