기본 콘텐츠로 건너뛰기

firebase 일기(+expo)

firebase instance를 만들자.
https://console.firebase.google.com/project/<YOURAPP>-90431/overview 로 들어가보면
Welcome to Firebase! Get started here. 라고 반긴다.
필요한 설정을 복사하자. Add Firebase to your web app 를 눌러
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "ㅌㅌㅌㅌㅌㅌㅌㅌ",
    authDomain: "ㅅㅅㅅㅅ-90431.firebaseapp.com",
    databaseURL: "https://ㅅㅅㅅㅅ-90431.firebaseio.com",
    projectId: "ㅅㅅㅅㅅ-90431",
    storageBucket: "ㅅㅅㅅㅅ-90431.appspot.com",
    messagingSenderId: "11111111111"
  };
  firebase.initializeApp(config);
</script>
이 부분 중 config만 복사.
Authentication > sign-in method 에 몇개 연결하고 Template을 한번 슥 본다.
음 다국어 처리가 되있군. 굿.
Database, Storage, Hosting, Functions 죄다 켜고.

Grow 에 Remote Config라는게 있어서 Software Version 같은 걸 한번 넣어봤다. 프로그래마틱하게도 설정 가능한 거 같다. 잘 모르겠다.
https://firebase.google.com/docs/remote-config/?authuser=0 일단 킵

https://github.com/jsappme/react-native-firebase-starter
설정 볼만하다. code-push도 있고 무제한 push notification 서비스인 https://onesignal.com 도 눈에 띤다. 근데 firebase notification 도 무료에 무제한 아닌가?
Analytics, App Indexing, Authentication, Dynamic Links, Invites, Notifications, Crash Reporting & Remote Config 모두 무제한 무료 맞네.

react-native(+expo)용 드라이버로는 고심끝에 그냥 npm install firebase --save 로 결정. 다른 것들은 문제가 있거나 deprecated 되거나 뭐 그렇네. 순정으로 가자.

web에서 간단하게 연습.
테스트 할 데이터는 이와 같다.
firebase.database()
  .ref('rooms/muka/messages')
  .on 'value', (o) ->
    # [{"text":"블라블라"},{"text":"요로호초"}]
    console.log JSON.stringify(o.val())
# added 될 때 마다
firebase.database()
  .ref('rooms/muka/messages')
  .on 'child_added', (o) ->
    # key:0. val();"text":"블라블라"
    # key:1. val();"text":"블라블라"
    console.log JSON.stringify( Object.assign key: o.key, o.val() )
.on에서 콜백으로 event를 처리하는데 value랑 child_added의 작동이 좀 다르다.
value는 전체 콜렉션을 한번에 가져오는 반면(근데 value라고 해도 react-native에선 그렇게 배열로 작동 안한다.
child_added는 Meteo의 observe처럼 건별로 발생한다.

다음은 notification 차례

Firebase console 에서 grow > Notification 가서 iOS든 Android든 하나 추가.
GoogleService-Info.plist 를 쓸일이 있을지 모르겠는데 일단 받아는 두었다.

https://docs.expo.io/versions/latest/guides/push-notifications.html#content
Spoiler alert: it’s almost too easy. 쉬움 주의란닼ㅋㅋㅋ
일단 push 이니만큼 실기기를 준비하고 먼저 안드로이드 기준으로 테스트.

1. 사용자 기기를 백엔드에 등록.

expo를 navigation 포함 버전으로 생성했을 때 api/registerForPushNotificationsAsync.js 가 있는데
const PUSH_ENDPOINT = 'https://exponent-push-server.herokuapp.com/tokens';
이 부분을 수정해준다.
즉, functions 를 만들어야할 곳은 여기.
functions를 만들고 보자 firebase cli가 있으니 firebase init 해본다.

firebase database:get '/rooms/muka/messages' 오옹 이런걸로도 JSON 뽑아올 수 있네

보통은 인증서도 등록하고 할게 많은데 expo란 앱이 이미 등록이 되있을 것이니 절차가 간소해지긴 하겠다.

해야할 것은 일단 저 PUSH_ENDPOINT를 https://github.com/exponent/exponent-server-sdk-node 설치로 확인해보고 잘 되면 functions로 옮겨봐야하겠다.

https://github.com/expo/exponent-server-sdk-node/blob/master/src/ExpoClient.js
요약하면 아래의 요청을 POST로 보내면 된다는 소리다.
https://exp.host/--/api/v2/push/send
accept: application/json
accept-encoding: gzip, deflate
content-type: application/json
curl -H "Content-Type: application/json" -X POST https://exp.host/--/api/v2/push/send -d '{
  "to": "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
  "title":"hello",
  "body": "world"
}'
백엔드 서버는 바로 위의 curl의 역할을 수행하면 되고.
기기의 푸쉬토큰을 잘 기억하고 있으면 그만이다.
registerForPushNotificationsAsync.js 를 보면 이렇다. token 이외엔 보내주는게 없는데 일단 이대로라면 누가 누구인지 알 수 없으므로 전체 푸쉬를 하는 걸 구현한다고 생각하고 해보자.
  // POST the token to our backend so we can use it to send pushes from there
  return fetch(PUSH_ENDPOINT, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      token: {
        value: token,
      },
      /* 여기에 사용자 정보가 더 필요하다. */
    }),
  });
이걸 받아들일 수 있는지 해보자.
위의 fetch 부분을 curl로 쓰면 아마도
curl -H "Content-Type: application/json" -X POST https://localhost:3000 '{
  "token": {
    value: "xxxxxxxxxxxxx"
  }
'
이정도만 받아들일 수 있으면 될 것이다.

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

열심히 쓴 글이 날아갔다;;; 

안되겠다. 요약하자.
firebase functions를 사용하려면 node v6.11.1을 사용하자.
node v6.11.1은 Object.entries가 없다. polyfill(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Polyfill) 을 이용하자.
appspot.com 에 올려서 외부 REST call을 쓰려고 했으나 실패. 무료에서 과금으로 전환.
orderBy를 썼다면 rules에 json파일을 추가해야함. orderBy를 쓰는 ref와 같은 depth로
        "messages": {
          ".indexOn": ["createdAt"]
        }
와 같이 .indexOn을 넣어줘야함
functions에서 추가 데이터를 감지할 땐 functions.database.ref("rooms/{roomId}/messages/{messageId}").onCreate(event=>...)를 사용하고 event.data.val()과 event.data.key로 변경분을 체크.
functions안에서 데이터베이스를 다룰 땐 admin.database()객체를 사용. 쿼리도 once를 사용하여 한번만 사용한다. on을 사용하면 핸들러를 달아서 계속 감시하는 것이므로 적절치 않음. (예: admin.database().ref("deviceToken").once('value').then(tokenInfo=>...) )

이 블로그의 인기 게시물

Mac 주의 - 약간 빡치는 git 대소문자 변환 파일명 변환(renaming)하는 법

Mac에서 종종 화나는 일 중 하나가 파일 시스템이 대소문자를 구분하지 않는 점이다.
가령, A.png를 a.png로 바꿔야할 경우 HFS 기준으론 전혀 바뀐 점이 없는 걸로 인식하는데 다소 화가난다.
하지만, 방법이 없는 것은 아닌데

A.png를 임의의 다른 파일로 바꾼다. (ex. A_.png)1에서 바꾼 상태에서 staging 한다. (git add A_.png)1의 파일을 다시 원래 바꾸려고 했던 파일로 바꾼다. (mv A_.png a.png)3을 다시 staging 한다. (git add a.png)commit 한다.https://stackoverflow.com/a/40307511/880991 에서 답변해준 Chris Barr 님에게 감사를.
* 추가

실제로 해보니 git mv --force A.png a.png 가 더 간단하다. 이는 바로 staging 영역에 add까지 해준다.

React-Native App 개발 시 Expo 선택 전에 고려해야할 것.

Expo는 지옥같은 React-Native 개발 환경 아래 섬광처럼 빛나는 훌륭한 도구지만 빛이 있으면 어둠이 있는 법.
https://docs.expo.io/versions/latest/introduction/why-not-expo.html 에선 이런 경우에 Expo를 사용을 고려하라고 전하고 있다.


독립형 앱에 이미지 같은 정적 자원(Assets)들을 함께 묶어 배포할 수 없다.background 혹은 장치가 잠자기 모드일때 코드 실행을 지원하지 않는다.일부 API를 미지원. Bluetooth, WebRTC 같은 건 아직.오버헤드가 꽤 크다. iOS 25MB, Android 20MBPush Notification의 경우 OneSignal 같은 외부서비스를 활용하려면 ExpoKit을 사용하거나 Expo가 아닌 React-Native를 사용해야한다.Staging/Production같은 다양한 디플로이 환경. 하지만 이 경우 https://github.com/oliverbenns/expo-deploy 같은 선택지도 있으니 참조할 것

즐거운 Online Prototyping Tool 들

jsbin, codepen, jsfiddle 이런 것들은 일단 생략. 너무 유명한 것들이라.

https://launchpad.graphql.com - node.js 기반 graphQL 연습장. 이것만으로도 충분히 훌륭한 백엔드
https://codesandbox.io/ npm 사용이 가능한 클라이언트 사이드 연습장. webpackbin이 너무 문제가 많아서 찾아본 것.

https://scrimba.com 이건 codesandbox+ asciinema(https://asciinema.org/) 같은 느낌인데 키 녹화와 음성 녹화 기능이 추가되었다. 다 좋은데 화살표 키로 빨리감기 뒤로감기 기능이 안되고 익스포트(youtube등)으로 지원이 없는게 아쉽다.

이 둘이 만나면? https://codesandbox.io/s/jvlrl98xw3?from-embed
뭐야 이거 무서워 하지마 ㄷㄷ;  graphql+react-native-web(부왘ㅋㅋ)

https://repl.it/languages 전통을 자랑하는 REPL 도구. 지원 언어 종류가 -_-;;;;;

https://tio.run/# repl.it? 장난함? 얘는 지원 언어가 무려 386종류. J랑 아희도 있다.

https://play.golang.org/ 즐거운 go playground. 소스 포멧팅 넘 좋아.

http://decaffeinate-project.org/repl/ 최고의 coffeescript REPL. 원래 용도는 coffee를 ecma6코드로 바꾸는 것이지만...

https://scaphold.io
https://www.graph.cool/ graphql backend service. scaphold.io는 설치도 필요없는 클라우드. graphcool은 호스팅+클라우드 다있음. 둘 다 막상막하. 푸쉬서버도 되고 뭐 미친득.

https://glitch.com/ gomix에서 결국 glitch로 안착.  node.js

https://www.shadertoy.com 잘하고 싶다! 쉐이다! 오디오도 된다!

http:/…