[Front end] Cloud Firebase 샘플

 

Cloud Firebase를 사용하여 실시간 화면 공유를 할 수 있다. PC 또는 태블릿에서 데이터를 입력하면 미치  공유가 되는 것처럼 가능하다. 예를 들어 은행업무를 보면 계좌 개설이나 대출을 받을 때 동의서를 태블릿으로 서명 동의를 받는 것을 예를 들 수 있다.

아래 예시는 키 몸무게를 입력받아 Cloud Firebase 데이터를 적재하고 실시간으로 다시 화면에 표출하는 예시이다.

 

CloudFirebase.js

import React, { useEffect } from 'react';
import firebase from 'firebase';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'AIzaSyCpJV8njsbs9h-zDagtNDuqA94MjqczMkE',
  authDomain: 'fir-sample-543f5.firebaseapp.com',
  projectId: 'fir-sample-543f5',
  storageBucket: 'fir-sample-543f5.appspot.com',
  messagingSenderId: '60143898654',
  appId: '1:60143898654:web:ccfbb46d9e1f100a899e0f',
  measurementId: 'G-8ZSEP4FEPV',
};
firebase.initializeApp(firebaseConfig); // firebase 초기화

const CloudFirebase = () => {
  const firestore = firebase.firestore(); // store 사용
  const docRef = firestore.doc('users/userId/sync/body'); // doc directory

  useEffect(() => {
    docRef.onSnapshot((doc) => {
      if (doc && doc.exists) {
        const data = doc.data();
        console.log(data);
        document.querySelector('#bodyInfo').innerText = `${data.heigth} / ${data.weight}`;
      }
    });
  });

  const onButtonClickCloudFirebase = () => {
    const heigth = document.querySelector('#heigth').value;
    const weight = document.querySelector('#weight').value;

    docRef
      .set({
        heigth,
        weight,
      })
      .then(() => {})
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <>
      <input id="heigth" />
      <input id="weight" />
      <h1 id="bodyInfo"> </h1>
      <button type="button" onClick={onButtonClickCloudFirebase}>
        {' '}
        firebase{' '}
      </button>
    </>
  );
};

export default CloudFirebase;