다시 시작하는 리액트 - 리액트 실무 기초 4 - 2

 

4-2. Firebase

 

- 웹의 동작 방식은? :

 

웹은 요청과 응답으로 굴러감.

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

 

 

- 서버가 하는 일 :

서버가 하는 일은 엄청 많음.

데이터 관리, 분산처리, 웹 어플리케이션 돌리기 등...

 

 

- 서버리스란 무엇인가? :

서버리스는 서버가 없다는 것이 아니라, 서버를 신경쓸 필요가 없다는 것을 의미.

그냥 우리에게 필요한 서버를 필요한 만큼만 빌려쓰면 됨.

 

이미 누군가가 구축해둔 서버의 일부분을 빌려서 사용할 수 있음.

=> 우리가 직접 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 얘기.

 

 

- BaaS는 무엇을 빌려오는 것인가? :

BaaS는 Backend as a Service의 약자.

=> 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것.

 

파이어베이스를 예로 들자면,

데이터 베이스, 소셜 서비스 연동(일종의 소셜 로그인), 파일 시스템 등을 API 형태로 제공해줌.

 

 

- 그렇다면 파이어베이스는 무엇인가? :

 

1. 파이어베이스 사이트 : https://firebase.google.com/?hl=ko 

 

2. 제품 탭으로 가보면 파이어베이스가 굉장히 많은 기능을 제공한다는 것을 알 수 있음.

머신러닝, 인증, 호스팅 등...

 

 

우리는 여기서 Firestore를 사용할 거임.

=> 클라우드 데이터베이스를 제공하는 서비스.

데이터가 추가되고, 삭제되고를 자유롭게 할 수 있음.

 

리액트와는 firebase라는 패키지를 통하여 편리하게 연결할 수 있음.

무료인 spark 요금제를 사용하면 됨.

 

Hosting도 한 번 사용해볼 거임.

=> 서버 없이 웹 서비스를 배포할 수 있도록 도와주는 서비스.

 

 

- Firebase 환경  설정하기

 

1. 사이트에서 프로젝트 만들기 버튼 클릭

 

 

 

2. 프로젝트 이름을 정하고 약관에 동의해줌.

 

 

 

3. 프로젝트 에널리틱스 설정을 해줌.

 

 

이렇게 하면 sparta-bucketlist라는 새로운 프로젝트가 생성됨.

 

 

- Firestore 설정하기

 

1. Firestore란? :

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

 

- 구조 :  1. Collection : 문서(document)의 집합

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

 

 

2. Firestore 설정하기

 

1) 생성된 프로젝트 클릭.

 

2) Cloud Firestore 추가.

 

 

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

 

 

4) 보안규칙 설정

test 모드로 해야 localhost에서 데이터 요청이 가능함.

 

 

5) Cloud Firestore 위치 설정

 

 

 

3. 대시보드에서 파이어스토어 데이터 넣기

 

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

 

 

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

 

 

3) 컬렉션 만들기

 

컬렉션 ID는 bucket으로 지정해줌.

 

 

4) 문서 ID를 지정하고 필드 값 넣기.

 

문서 ID는 bucket_item으로 지정해주고

필드 값으로는 text와 completed를 넣어줌.

text의 type은 string, completed의 type은 boolean. completed의 initialState는 false.

 

 

 

- 리액트에 Firebase 연동하기

 

1. 파이어베이스 패키지 설치.

 

버킷리스트 프로젝트의 터미널에 파이어베이스 패키지 설치.

 

yarn add firebase

 

2. config 가져오기

 

1) src 폴더 하위에 firebase.js 파일 만들어주기.

 

 

2) firebase 대시보드에서 웹버튼을 눌러주기.

 

 

3) 앱 이름을 적고 앱 등록을 눌러주기.

 

Firebase 호스팅 설정은 체크하지 않음.

 

 

4) firebaseConfig 내용만 firebse.js에 붙여넣어주기.

 

이 부분이 어렵다면 Firebase 문서 살펴보기.

Firebase 문서에 있는 기초 카테고리로 들어가 Firebase 추가 - 웹 부분을 살펴보면 됨.

 

 

여기 Firebase 추가하는 방법이 나옴.

 

우리는 현재 앱 등록을 마친 후 SDK 설치를 끝낸 상태임.

이제 우리는 Firebase 초기화를 해줘야 함.

 

- 앱에서 Firebase를 초기화하고 Firebase 앱 객체를 만듦.

 

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = { 
  //...
};

const app = initializeApp(firebaseConfig);

 

firebaseConfig 내부에는 할당받은 고유의 값을 넣어주면 됨.

기억이 잘 나지 않는다면 프로젝트 개요 - 프로젝트 설정에서 확인할 수 있음.

 

 

결론, 제품의 SDK에 나와 있는 내용과 동일하므로 그냥 복사해서 붙여넣기 하면 됨.

 

 

이제, 우리가 원하는 Firebase 서비스(Cloud Firestore, 인증, 실시간 데이터베이스, 원격 구성 등)를

개별 하위 패키지 내에서 가져올 수 있음.

 

우리가 사용하려는 서비스는 Firebase firestore 서비스임.

Firebase firestore 서비스를 어떻게 사용할 수 있는지 조금 더 자세하게 살펴보기 위해서 링크를 타고 이동해보겠음.

 

- Firestore : https://firebase.google.com/docs/firestore/quickstart?hl=ko&authuser=0 

 

 

현재 파이어베이스 가장 최신 버전은 9버전.

고로 9버전에 맞는 Firestore 서비스 추가 방법을 살펴보겠음.

 

firebase.js에 getFirestore를 import해주면 됨.

또한, Cloud Firestore 초기화 및 서비스에 대한 참조를 가져오기 위하여 변수 db에 getFirestore(app) 담아주기.

이렇게 해주면 전역으로 firestore를 가져다 쓸 수 있음.

 

 

Analytics는 이번에 사용하지 않을 것이므로 관련 코드들을 삭제해주면 되고,

변수 db, 즉 Firestore는 외부에서 가져다 사용해야 하므로 앞에 export를 적어줌.

 

 

App.js에서 db를 찍어보면 내용이 들어오는 것을 확인할 수 있음.

 

 

 

- Firestore 데이터 가지고 놀기

 

내가 저번에 정리해둔 firebase 내용이 있으므로 이걸 참고해도 좋을 거 같음. => https://dnjfht.tistory.com/60

firestore 코드를 작성하면서 참고한 사이트는 위의 firestore 링크를 조금 아래로 내려서 데이터 읽기 부분을 살펴보면 됨.

 

1. 데이터 전체 읽어오기

collection()으로 찾은 다음, getDocs()로 콜렉션 내의 데이터를 가져옵니다!
그리고 forEach문으로 내용을 확인할 수 있어요! (사실 배열이 아니거든요!)

 

 

이 코드를 가져다 사용하면 되는데,

우리는 첫 랜더링이 일어날 때만 데이터를 읽어올 것이므로 useEffect hook에 이 코드를 담아줌.

첫 렌더링에만 코드가 실행되도록 할 것이므로 dependency Array([])를 비워주면 됨.

 

그리고 collection의 이름을 "users"에서 "bucket"으로 변경.

내가 처음에 collection 설정을 해줄 때 그렇게 지정을 해뒀기 때문.

 

 

아, 그런데 이것 역시 외부 공간에서 데이터를 받아와서 사용하는 것이므로 비동기를 사용해야 함.(async - await)

 

 

완성된 코드는 이러함.

 

 

콘솔에서 확인해보면 이렇게 찍히는 것을 확인할 수 있음.

우리는 초반에 document의 id를 bucket_item으로 지정해줬으므로, 저렇게 불려옴.

 

 

2. 데이터 추가하기

콜렉션을 찾고 → addDoc()
대시보드에서 잘 추가되었는 지 확인해봅시다!

 

 

이것도 데이터를 읽는 것과 마찬가지로 useEffect hook에 담아줄 거임.

app.js에 addDoc를 import 해준 후, 아래에 useEffect()를 하나 더 추가해줌.

 

React.useEffect(() => {
  async function fetchData() {
    const docRef = await addDoc(collection(db, "bucket"), {
      completed: false, text: "new",
    });
  }
  fetchData();

  return () => {};
}, []);

 

 

완성된 코드... 이렇게 코드를 작성해준 후에 내가 만들어둔 bucketList에서 글을 하나 작성해보면

이렇게 document가 추가되게 됨.

 

글을 작성할 때마다 document가 Firestore에 쌓이기 때문에

사이트에서 렌더링을 하게 되면 새롭게 추가된 데이터들이 들어오는 것도 확인할 수 있음.

 

 

 

3. 데이터 수정하기

콜렉션을 찾고 → 도큐먼트 id로 updateDoc()!

 

이제 데이터 수정(업데이트)를 해볼 거임.

데이터 업데이트 역시 데이터 추가 카테고리에 함께 담겨 있음.

여기서 우리가 할 것은 문서의 일부 필드를 업데이트하는 것이고, updateDoc를 사용하면 됨.

 

 

이것도 마찬가지로 useEffect hook에 담아줄 거임.

app.js에 doc, updateDoc를 import 해준 후, 아래에 useEffect()를 하나 더 추가해줌.

 

useEffect(() => {   
  async function fetchData() {     
    const updateRef = doc(db, "bucket", "bucket_item");     
    await updateDoc(updateRef, {       
      completed: true,     
    });   
  }   

  fetchData();   

  return () => {}; 
}, []);

 

여기서 "bucket_item"는 document ID들 중 하나임.

해당하는 document의 필드만 수정을 해주겠다는 의미.

 

 

이렇게 코드 작성을 완료하면 콘솔에 bucket_item이 completed : true로 바뀌어 있는 것을 확인할 수 있음.

 

 

 

4. 데이터 삭제하기

콜렉션을 찾고 → 도큐먼트 id로 deleteDoc()!

 

이제 우리가 해볼 것은 데이터 삭제임.

데이터 추가 아래에 있는 데이터 삭제 카테고리로 이동.

데이터 삭제는 문서 삭제와 필드 삭제, 두 가지로 분류되어 있고 여기서 우리가 해볼 것은 문서 삭제임.

 

문서 삭제는 deleteDoc를 이용하면 됨.

문서 삭제는 문서 수정(업데이트)과 상당히 비슷한 형식을 가지고 있음.

 

 

useEffect(() => {
    async function fetchData() {
      const deleteRef = doc(db, "bucket", "DQQV7wi0YDcoIyg5neDQ");
      await deleteDoc(deleteRef);
    }
    fetchData();

    return () => {};
  }, []);

 

이렇게 하면 doc ID DQQV7wi0YDcoIyg5neDQ는 Firestore에서 삭제됨.

 

 

이렇게 하면 Firestore를 이용한 삭제 기능까지 구현을 끝마침.

 

그런데 만약, collection의 이름을 바꿔 document를 추가하게 되면 어떻게 될까?

그래서 한 번 collection의 이름을 수정해서 추가를 해봤음.

 

 

이렇게 추가를 하게 되면 Firestore에 새로운 collection이 하나 추가되고 거기에 document가 추가되게 됨.