4주차 - Firebase, FireStore

Firebase란?

 

웹의 동작방식

: 웹은 요청과 응답으로 굴러갑니다.

클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답

서버가 하는 일

: 서버가 하는 일은 엄청 많아요.

우리가 알고 있는 것처럼 데이터도 관리하고, 분산처리도 하고, 웹 어플리케이션도 돌려야 하고...

서버가 할 일이 많다는 건, 서버가 하는 일을 우리가 전부 관리해줘야한다는 이야기이기도 해요.

 

서버리스란?

: 서버리스는 서버가 없다가 아니라, 서버를 신경 쓸 필요없다 입니다.

이미 누군가가 구축해둔 서버의 일부분을 빌려서 쓸 수 있어요.

우리가 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 소리죠!

우린 그냥, 우리한테 필요한 서버를 필요한만큼만 빌려 쓰면 되니까요.

 

BaaS는 뭘 빌려 오는 건가요?

: BaaS는 Backend as a Service의 약자입니다.

→ 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려 오는 거예요.

우리가 쓸 파이어베이스를 예로 들면, 데이터 베이스, 소셜 서비스 연동(일종의 소셜 로그인), 파일시스템 등을 API 형태로 제공해줍니다!

 

Firebase란?

: Hosting(서버 없이 웹 서비스를 배포 할 수 있도록 도와주는 서비스)

- firestore는 클라우드 데이터를 제공 해주는 서비스입니다.

- 데이터가 추가되고, 삭제하고 가져다 쓸 수 있습니다.

- 리액트와는 firebase라는 패키지를 통해 편리하게 연결할 수 있어요!

- 주의! 우리는 spark(무료) 요금제를 쓸 겁니다.

---

Firebase 설정

---

FireStore 설정하기

 

FireStore란?

: Firebase에 포함되어 있는 서비스 중 하나로 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스입니다!

 

구조

1) Collection : 문서(Document)의 집합

2) Document : JSON 형식으로 데이터를 저장 할 수 있음

 

FireStore 설정하기

1) 생성된 프로젝트 클릭

2) Cloud FireStore 추가

3) 데이터베이스 만들기 클릭

4) 보안규칙 설정

5) Cloud FireStore 위치 설정

 

대시보드에서 FireStore 데이터 넣기

1) 콘솔에서 내 프로젝트 → firestore 선택하여 대시보드로 진입

2) 대시보드에서 컬렉션 시작 버튼 클릭

3) 컬렉션을 만든다

4) 문서 ID를 지정하고 필드 값을 넣는다

---

리액트에 Firebase 연동하기

 

파이어베이스 패키지 설치하기

yarn add firebase

 

config 가져오기

1) src 폴더 하위에 firebase.js 파일을 만든다.

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

const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
};

// firebaseConfig 정보로 firebase 시작
initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const db = getFirestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { db };

2) firebase 대시보드에서 웹 버튼을 누른다.

3) App.js에서 firebase.js에서 내보낸 firestore DB 가져오기

import {db} from "./firebase";

 

4) useEffect에서 데이터 불러와 보기

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

---

FireStore 데이터 가지고 놀기

 

app.js에서 firestore 데이터 가지고 놀기

 

1) 데이터 전체 읽어오기

: collection()으로 찾은 다음, getDocs()로 콜렉션 내의 데이터를 가져옵니다.

그리고 forEach문을 사용해서 내용을 확인 할 수 있습니다. (사실은 배열이 아니기 때문이죠!!)

import { db } from "./firebase";
import { collection, getDoc, getDocs } from "firebase/firestore";
...
React.useEffect(async() => {
    const query = await getDocs(collection(db, 'bucket'));
		console.log(query);
    query.forEach((doc) => {
      console.log(doc.id, doc.data());
    });
  }, []);

 

2) 데이터 추가하기

: collection을 찾고 -> addDoc();

import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'bucket'), {
     completed: false,
     text: "new"
   })

 

3) 데이터 수정하기

: collection을 찾고 -> document id로 updateDoc()

import { db } from "./firebase";
import { collection, doc, updateDoc } from "firebase/firestore";
...
React.useEffect(async() => {
    const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
    await updateDoc(docRef, {
      completed: true,
    });

  }, []);

 

4) 데이터 삭제하기

: collection을 찾고 -> document id로 deleteDoc()

import { db } from "./firebase";
import { collection, doc, deleteDoc } from "firebase/firestore";
...
React.useEffect(async() => {
    const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
    await deleteDoc(docRef);

  }, []);

 

콜렉션 이름을 바꾸면 어떻게 될까?

1) 콜렉션 이름을 바꿔서 추가하면 어떻게 될까??

// bucket에서 buckets로 이름 바꾸기! 그리고 대시보드를 확인해보세요!
import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'buckets'), {
     completed: false,
     text: "new"
   })

 

-> 새로운 collection이 생깁니다!