[쿠킹레시피] 파이어 베이스 연결하기 (홈 화면 DB연결)

현재 상태에서 배포를 하더라도 

 

서버를 실행중이지 않을 경우에는 올려둔 레시피가 확인이 불가능하다.(백엔드가 없음)

 

그래서 구글에서 제공하는 클라우드 서비스 데이터 베이스를 사용해서 배포할것

 

https://console.firebase.google.com/

로그인 - Google 계정

 

회원가입이 필요하다. 

 

 

 

 

 

 

 

 

 

애널리틱스 가져오지 않기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Firestore은 기존에 사용하던 db(mySql, oracle)와는

 (관계형 데이터베이스)

다르게 비관계형 데이터베이스이다. 

 

문서 형식의 데이터베이스로 되어있다. 

 

 

문서 ID는 유니크해야함 -> 자동으로 만듬

 

 

 

 

 

나머지 DB들도 db.json으로 추가한다.

 

 

입력한  DB를 프로젝트에 연결한다.

 

 

 

 

 

 

라이브러리 설치하는데 이번 앤에서는 firebase8.5버전을 사용할거기 때문에 

8.5버전 설치한다. 

 

 

 

내 프로젝트 개요에서 SDK 설정 및 구성에서 API키를 확인한다. 

npm 키 그대로 복사해서 config.js에 넣는다.

 

 

 

 

 

이제 Home.jsx에서 파이어베이스 데이터 가져온다.

 

 

 

 

Home.jsx에서

기존에 제이슨 서버로 가져온 usestate는 주석처리하고 

 

파이어 베이스를 사용하기위해서 

코드를 작성한다. 

 

import { useEffect, useState } from "react";
import { RecipeList } from "../../components/RecipeList";
import { firedb } from "../../firebase/config";

import "./Home.css";

export default function Home() {
  // const { data, isPending, error } = useFetch("http://localhost:3030/recipes"); //제이슨 서버 주소

  //파이어베이스
  const [data, setData] = useState(null); //데이터
  const [isPending, setIsPending] = useState(false); //로딩상태
  const [error, setError] = useState(""); //에러메세지

  useEffect(() => {
    //파이어 스토어에서 데이터 가져오기
    setIsPending(true); //데이터 가져오기 작업시작(로딩중)
    firedb
      .collection("recipes") //컬렉션에서
      .get() //가져온다.
      .then((snapshot) => {
        //가져온 데이터를 snapshot이라한다.
        if (snapshot.empty) {
          //데이터가 없을 때
          setError("레시피가 없습니다."); //에러에 레시피 없음을 출력
          setIsPending(false); //가져오기 종료
        } else {
          // 데이터가 있을 경우
          let results = []; //빈 배열 생성
          snapshot.docs.forEach((doc) => {
            //반복문으로 결과를 배열에 넣는다.
            results.push({ id: doc.id, ...doc.data() });
          });
          setData(results);
          setIsPending(false); // 작업 종료
        }
      })
      .catch((err) => {
        setError(err.message);
        setIsPending(false);
      });
  }, []);

  return (
    <div className="home">
      {error && <p className="error">{error}</p>}
      {isPending && <p className="loading">로딩중</p>}
      {data && <RecipeList recipes={data} />}
    </div>
  );
}

 

 

 

홈 화면 출력 확인한다.