react native firebase firestore messaging 노트

요즘 React Native로 이타인클럽 앱을 만들고 있습니다. 다수의 앱 유저에게 메시지를 보내는 것을 구현하고 있습니다.

쉽게 구현하는 방법이 구글의 Firebase를 이용하는 방법이 있습니다. 그런데 이게 React Native를 공식적으로 지원하지 않다보니 혼란이 있었습니다.

오늘은 중단 결과를 정리하는 차원에서 올립니다.

React Native용 Firebase 모듈

Web에서 firebase를 사용하기 위해서는 아래와 같이 'firebase'를 설치하면 됩니다.

$ yarn add firebase

하지만, firebase 공식 홈페이지에서 react native를 사용한다면, 아래와 같은 모듈을 추천합니다.
Firebase 공식문서: https://firebase.google.com/docs/firestore/library-integrations
참고: https://medium.com/react-native-training/firebase-sdk-with-firestore-for-react-native-apps-in-2018-aa89a67d6934

$ yarn add react-native-firebase
$ react-native link react-native-firebase

react-native-firebase 공식 설명 문서: https://rnfirebase.io/docs/v5.x.x/getting-started

여기서 혼란이 시작되었습니다. 제가 듣는 강좌에서는 'firebase'를 이용하는 방법있고, 중간중간 'react-native-firebase'의 내용들을 적용하고 있었습니다. 두 개가 섞여서 사용된거죠.

그래서, 공식문서에서 추천하듯이 'react-native-firebase'로 통일하여 구현하도록 합니다.

중요한 차이점은, react-native-firebase를 사용한다면 Android 기준으로 각 요소 사용에 대해서 android studio에 모듈을 추가해야 합니다. 크게 아래 2가지 내용을 변경해야 합니다.

app/build.gradle

dependencies {
    implementation project(':react-native-firebase')
    (생략)
    implementation 'com.google.firebase:firebase-core:16.0.7'
    implementation "com.google.android.gms:play-services-base:16.0.1"
    implementation "com.google.firebase:firebase-messaging:18.0.0"
    implementation "com.google.firebase:firebase-auth:17.0.0"
    implementation "com.google.firebase:firebase-firestore:19.0.0"
    implementation "com.google.firebase:firebase-functions:17.0.0"

MainApplication.java

import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
import io.invertase.firebase.auth.RNFirebaseAuthPackage;
import io.invertase.firebase.firestore.RNFirebaseFirestorePackage;
import io.invertase.firebase.functions.RNFirebaseFunctionsPackage;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RNFirebasePackage(),
        new RNFirebaseMessagingPackage(),
        new RNFirebaseAuthPackage(),
        new RNFirebaseFirestorePackage(),
        new RNFirebaseFunctionsPackage()
      );
    }
 (생략)

그리고, firebase 사용시에 필요했던 아래와 같은 initializeApp은 필요가 없게 됩니다.

class App extends Component {
  async componentWillMount() {
    /*
    const firebaseConfig = {
      apiKey: 'AIzaSyBmBbsfs4_AGBi6BITtytxytHXs8esnDNA',
      authDomain: 'etainclub-73bd5.firebaseapp.com',
      databaseURL: 'https://etainclub-73bd5.firebaseio.com',
      projectId: 'etainclub-73bd5',
      storageBucket: 'etainclub-73bd5.appspot.com',
      messagingSenderId: '396912964585',
      appId: '1:396912964585:web:9edea6b7c7a20bcd'
    };

    await firebase.initializeApp(firebaseConfig);
    */    
  }

firebase가 필요한 곳에서 아래와 같이 모듈을 import 합니다.

// import firebase from 'firebase';
import firebase from 'react-native-firebase';

Firestore VS Database

firebase에 접속해보면 DB관련해서 Database만 보입니다. 어떤 코드들은 firebase.database()... 이런식으로 db관련 구현을 한 것이 보이고, 어떤 것은 firebase.firestore().... 처럼 firestore를 사용한 것이 보입니다.

위 그림을 보면 Database 항목에 Realtime Database와 Cloud Firestore가 보입니다.

Cloud Firestore: next generation of realtime database ...

그렇습니다. Firestore가 새로 선보이는 db 솔루션입니다. Firebase가 버전업하면 새로운 기능들이 추가되면서 더욱 혼란스러웠네요.

여기서도 새로운 기능인 Firestore를 사용하도록 합니다.

앱 사용자 Push 토큰

앱 사용자에게 push 메시지를 보내려면 사용자의 기기의 push token을 알아야 합니다. 이 부분이 좀 고생한 부분인데, 사용자가 앱에 처음 등록하면 사용자 기기의 push token을 읽어서 firebase의 Firestore에 저장하도록 합니다.

import firebase from 'react-native-firebase';
(생략)
  return (dispatch) => {
      (생략)
      firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(user => {
        // request permission from the user
        firebase.messaging().requestPermission();
        // get the device's push token
        firebase.messaging().getToken()
          .then(token => {
            console.log('pushToken: ', token);
            // store token in the user's document
            firebase.firestore().collection('users').doc(user.uid)
              .set({ pushToken: token, numHelps: 0, numAsks: 0, region: 'suwon' });
        });
  (생략)
}

위 코드를 구현하기 위해 많이 고생했습니다.
firebase의 auth()를 이용해서 사용자가 신규 가입하면, push token과 함께 몇 가지 정보를 Firestore에 저장합니다. 이 때, users라는 collection을 만들고, user.uid 밑에 유저별로 정보들을 저장합니다.

사용자 가입 후 Firebase의 콘솔로 이동하여 Database 섹션을 가보면 이렇게 아름답게 user 정보가 추가되어 있는 것을 발견할 수 있습니다. 콘솔에서 users를 미리 만들지 않아도 코드에서 값을 쓰면 자동으로 colleciton과 doc이 만들어집니다.

아름다운 일요일 오후입니다!

---

참고로, 이번 포스팅은 완전한 구현 방법이 나타나 있지 않습니다.

오늘의 실습: 헷갈리는 것이 있다면 하나에 집중하도록 합니다.

참고: https://invertase.io/blog/getting-started-with-cloud-firestore-on-react-native