[Firebase] Auth, Store 사용하기

Firebase 설치

yarn add firebase

 

React 앱에서 Firebase 초기화

import firebase from 'firebase/app'

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENTER_ID,
  appId: process.env.REACT_APP_ID,
};

firebase.initializeApp(firebaseConfig);

 

React 앱에서 Firebase 사용

import 'firebase/auth';
import 'firebase/firestore';

const auth = firebase.auth();
const db = firebase.firestore();

 

Firebase Authentication 서비스 불러오기

https://github.com/yejify/blog-app/commit/bb63846842749213f13947f5a3e91f200c73562c#diff-93bea5a2ea77e92272e6170cff41ec882f6728a749b67a992757ef27e5842be1R1

[feat] 회원가입 기능구현 · yejify/blog-app@bb63846

 

onAuthStateChanged 메서드

Firebase Authentication 서비스에서 제공하는 메서드로 인증 상태가 변경될 때마다 호출되는 리스너 설정할 수 있다.(로그인, 로그아웃) 

사용자 객체를 인자로 받는 콜백 함수를 등록해서 로그인 상태일 때는 사용자의 정보를, 아니라면 null을 리턴하게 한다.

https://github.com/yejify/blog-app/commit/354fed557f453931ee075499a341bcb0fb08e50c

[feat] login 기능구현 · yejify/blog-app@354fed5

 

store에서 문서 가져오기

import { doc, getDoc } from "firebase/firestore";

const docRef = doc(db, "cities", "SF");
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
} else {
  // docSnap.data() will be undefined in this case
  console.log("No such document!");
}

https://firebase.google.com/docs/firestore/query-data/get-data?hl=ko

Cloud Firestore로 데이터 가져오기  |  Firebase

 

문서 업데이트 하기

import { doc, updateDoc } from "firebase/firestore";

const washingtonRef = doc(db, "cities", "DC");

// Set the "capital" field of the city 'DC'
await updateDoc(washingtonRef, {
  capital: true
});

https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ko

Cloud Firestore에 데이터 추가  |  Firebase

 

문서 삭제하기

import { doc, deleteDoc } from "firebase/firestore";

await deleteDoc(doc(db, "cities", "DC"));

https://firebase.google.com/docs/firestore/manage-data/delete-data?hl=ko

Cloud Firestore에서 데이터 삭제  |  Firebase

 

쿼리 추가하기

// Create a reference to the cities collection
import { collection, query, where } from "firebase/firestore";
const citiesRef = collection(db, "cities");

// Create a query against the collection.
const q = query(citiesRef, where("state", "==", "CA"));

 

쿼리를 설정하면 색인을 수동으로 추가해주어야 함

https://firebase.google.com/docs/firestore/query-data/queries?hl=ko

Cloud Firestore에서 단순 쿼리 및 복합 쿼리 실행  |  Firebase