Firebase-store 시작하기

nabisorry·2020년 1월 30일

1. 목표

기업협업 프로젝트를 진행하기 앞서 기업에서 사용하고 있는 firebase 를 이해하려한다.
firebase 를 통해 전화번호를 통한 간단한 Mebership 기능을 Toy Project 로 구현 하려 한다.

2. Firebase란?

구글에서 제공해주는 플랫폼 서비스로 간단한 조작으로 인증인가, 데이터베이스,스토리지 등등 여러 기능을 사용 할수 있는 서비스의 이름이다. 당연 서버나 도메인을 구입할 필요없이 구글서버를 사용하면 된다.
거기다 나 같은 초짜 개발자도 이해하기 쉬운 친절하게 정리 되어 있는 document 까지 간단하게 사용 해봤지만 굉장히 많은걸 할수 있으며 장점이 많은 서비스라 느꼈다.

3. Firebase store 사용하기

앞선 소개에서 firebase 는 다양한 서비스를 제공해준다. 그중에서 나는 전화번호를 입력받아 저장하기 위해서 firebase 에서 제공해주는 database 기능을 사용하기로 했다.

3.1 store vs database

firebase 에서 제공하는 database 는 두가지 이다.

Cloud Firestore는 모바일 앱 개발을 위한 Firebase의 최신 데이터베이스로, 실시간 데이터베이스의 성공을 바탕으로 더욱 직관적인 새로운 데이터 모델을 선보입니다. 또한 실시간 데이터베이스보다 풍부하고 빠른 쿼리와 원활한 확장성을 제공합니다.

실시간 데이터베이스는 Firebase의 기존 데이터베이스로, 여러 클라이언트에서 실시간으로 상태를 동기화해야 하는 모바일 앱에 적합한 효율적이고 지연 시간이 짧은 솔루션입니다.

공식문서
store 가 실시간 데이터베이스 에 비해 확장된 모델이며 협업 기업에서도 store 를 사용하기 때문에 별 고민 없이 Cloud Firestore 선택했다.

3.2 데이터베이스 구조 짜기

Store 는 Collection(폴더) -> Document(파일) -> field(data) 순으로 데이터베이스가 짜여진다.
field 값으로 Collection 가질수 있다.
Users 라는 Collection 생성한다.
Document는 전화번호로 생성한다.
Field 값은 cons_amount 라는 키로 number 값을 가진다.
Field 에서 다시 cons 라는 Collection 가지며 무작위 난수로 생성된 document 에 create_date , is_expired , is_used라는 Field 값을 가진다.

3.3 React 와 Firebase 연동

CRA 로 React 프로젝트를 만들어 주었다.
Firebase 를 npm으로 설치 해준다

$ npm install --save firebase

Firebase 초기화해준다.
프로젝트 메인에서 앱추가 -> 플랫폼 웹 선택 -> 이름입력
다음 화면에서 나오는 firebaseConfig 복사

App.js 에서 아래 코드 추가

import React from 'react';
import firebase from 'firebase';
import 'firebase/firestore';

const firebaseConfig = {
 //위에서 복사한 개인의 Config
};

firebase.initializeApp(firebaseConfig) //firebase 초기화

const db = firebase.firestore(); //store 사용

3.4 간단한 인풋창 만들기

전화번호를 입력하는 인풋창과 조회 버튼을 만들어 주자.

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

const firebaseConfig = {
   //위에서 복사한 개인의 Config
};

firebase.initializeApp(firebaseConfig); //firebase 초기화

const db = firebase.firestore(); //store 사용

function App() {
  const [number, setNumber] = useState(0);
  const handleClick = () => {};
  const handleChange = e => {
    setNumber(e.target.value);
  };
  return (
    <>
      <input value={number} onChange={handleChange}></input>
      <button onClick={handleClick}>입력</button>
    </>
  );
}

3.5 유저 조회하기

전화번호를 조회하여 db에 없으면 환영 문구를 존재하면 현재 cons_amount 를 보여준다.

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

const firebaseConfig = {
  //위에서 복사한 개인의 Config
};

firebase.initializeApp(firebaseConfig); //firebase 초기화

const db = firebase.firestore(); //store 사용

function App() {
  const [number, setNumber] = useState(0);
  const handleClick = () => {
    db.collection('users') //조회할 collection 넣어준다.
      .doc(number) // 조회할 document 를 넣어준다.
      .get()
      .then(doc => {
      //db에 해당 number 가 없을 경우
        if (!doc.data()) {
          alert(`${number}님 환영합니다.`);
      // 존재할경우 
        } else {
          alert(`현재 con 갯수 : ${doc.data().cons_amount}`);
        }
      });
  };
  const handleChange = e => {
    setNumber(e.target.value);
  };
  return (
    <>
      <input value={number} onChange={handleChange}></input>
      <button onClick={handleClick}>입력</button>
    </>
  );
}

export default App;

get 메서드를 통해서 조회를 할수 있다.
doc 에는 여러 값이 담겨 있고 그중 field값은 doc.data() 로 접근 할수 있다.

3.6 데이터 추가하기

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

const firebaseConfig = {
  //위에서 복사한 개인의 Config
};

firebase.initializeApp(firebaseConfig); //firebase 초기화

const db = firebase.firestore(); //store 사용

function App() {
  const [number, setNumber] = useState(0);
  const handleClick = () => {
    db.collection('users')
      .doc(number)
      .get()
      .then(doc => {
        if (!doc.data()) {
          db.collection('users')
            .doc(phoneNumber)
            .set({
              cons_amount: 1,
              coupons_amount: 0
            });
          db.collection(`/users/${phoneNumber}/cons`).add({
            create_date: new Date(),
            is_used: false,
            is_expired: false
          });
          alert(`${phoneNumber}님 환영합니다.`);
        } else { //등록된 유저일 경우
          db.doc(`/users/${phoneNumber}`)
            .get()
            .then(doc => {
              const currentConsAmount = doc.data().cons_amount;

              db.doc(`/users/${phoneNumber}`).update({
                cons_amount: currentConsAmount + 1
              });
            });
          alert(`현재 con 갯수 : ${doc.data().cons_amount}`);
        }
  };
  const handleChange = e => {
    setNumber(e.target.value);
  };
  return (
    <>
      <input value={number} onChange={handleChange}></input>
      <button onClick={handleClick}>입력</button>
    </>
  );
}

export default App;