Firebase

Firebase란?

BaaS(Backend as a Service)로 데이터 관리, 분산처리 등등 서버가 하는 일을 제공해주는 서버리스 서비스다. 서버가 없는 게 아니라 누군가 구축해둔 서버에서 필요한만큼만 빌려서 쓰는 개념이다. BaaS를 사용하면 백엔드 작업을 직접 할 필요가 없기 때문에 편리하다. 강의에서 사용하는 버킷리스트의 리덕스를 Firebase에 저장하면 새로고침 해도 데이터가 사라지지 않는다.

Firebase 환경 설정

1. 메인에서 프로젝트 만들기 버튼 클릭
2. 프로젝트 이름을 정하고 약관 동의하기
3. 프로젝트 애널리틱스 설정

FireStore

FireStore란?

Firebase에서 제공하는 서비스 중 하나. NoSQL 클라우드 데이터베이스를 제공하기 때문에 데이터를 자유자재로 추가하고 삭제하고 가져다 쓸 수 있다.

FireStore의 구조

• Collection: 도큐멘트(딕셔너리{...} 데이터)의 집합
• Document: JSON 형식으로 데이터를 저장

FireStore 설정

1. 생성된 프로젝트 클릭
2. Cloud Forestore 추가
3. 데이터베이스 만들기 클릭
4. 보안규칙 테스트 모드로 설정 - 프로덕션 모드는 localhost에서 firestore로 데이터 요청이 불가능하다.
5. Cloud Firestore 위치 설정 - 아무 위치로 지정해도 상관 없지만 한 번 설정하면 수정이 불가능

Firestore에 데이터 추가

1. 콘솔-내 프로젝트-firestore 선택-대시보드 진입
2. 컬렉션 시작
3. 컬렉션 생성
4. 문서ID와 리덕스 데이터에 있는 딕셔너리 형식대로 필드 값 추가

리액트에 Firebase 연동하기

패키지 설치

yarn add firebase

웹 앱 등록

1. 프로젝트 개요-앱에 Firebase를 추가하여 시작하기-웹 클릭
2. 앱 등록
3. Firebase SDK 복사

config 가져오기

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

// 개인정보 영역
const firebaseConfig = {
  apiKey: "AIzaSyANb2OQLBDEZabIFoPvW1X2CY4GpL3iFys",
  authDomain: "cinephile-cbf40.firebaseapp.com",
  projectId: "cinephile-cbf40",
  storageBucket: "cinephile-cbf40.appspot.com",
  messagingSenderId: "708535078266",
  appId: "1:708535078266:web:95c49c187d703a09071ac3",
  measurementId: "G-ZBHFEE6RH7"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

src/firebase.js 생성 후 SDK 붙여넣기

앱에서 Firebase에 액세스

1. firebase 메인-문서로 이동-웹 시작하기-웹에 사용 가능한 Firebase 서비스-웹용 Cloud Firesotre 클릭
2. 개발 환경 설정 - 설치한 firebase와 같은 버전을 firebase.js로 import

    import { initializeApp } from "firebase/app";
    import { getFirestore } from "firebase/firestore";

3. Cloud Firestore 초기화 - firebase.js에 import { getFirestore } from "firebase/firestore"와 const db = getFirestore(); 가져오기
4. 위에서 가져온 db는 app.js에서 사용하기 위해 export

    export const db = getFirestore();

5. 필요 없는 코드 삭제

    import { initializeApp } from "firebase/app";
    import { getFirestore } from "firebase/firestore";
    .
    .
    initializeApp(firebaseConfig);
    // firebase를 호출하는 순간에 firebase를 사용할 수 있도록 변수를 없애고 기초 설정 처리
    
    export const db = getFirestore();

App.js에서 사용하기

1. firebase.js에서 보낸 firestore DB 가져오기 import {db} from "./firebase";
2. useEffect로 데이터 불러오기

    const bucket = firestore.collection("filmfestival");
    React.useEffect(() => {
        console.log(db);
      }, []);