20240413 firebase 설치 및 react 웹 구현

https://velog.io/@e_juhee/Firebase-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-DB-%EB%8B%A4%EB%A3%A8%EA%B8%B

[Firebase] 프론트엔드에서 DB 다루기

DB를 다운 받기 전에 먼저 firebase 에 가입 - 보통 구글 아이디가 있으면 쉬움

firebase에 가입하면 #API 코드 - 회원가입과 동시에 보여줌 (바로 복사해서 붙여넣어야 함)

 

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "dfsfsdfsdfsfdfsfsdfsdfsf",
  authDomain: "sfsdfdfsfsdfsdfsfsdf",
  projectId: "sfsdfsddfsfsdfsdfsffsdf",
  storageBucket: "sdfsdfsfsdfsdfsfdfsdfs",
  messagingSenderId: "534564566356456655466",
  appId: "1:521970812699:web:sdfsdfdfsfsdfsdfsfsdfsdfse",
  measurementId: "dsfsdfsfsdfsdfsfdfsdfsf"
};

// Initialize Firebase
export const firebaseApp = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebaseApp);

dfsdfsdfsf 부분에 자신의 API 및 아이디가 나옴 - 이 부분이 중요

 

 

 

firebase homepage / Firebase.jsx 생성

#Firebase.jsx 에 붙여넣기 (이하)

import React from "react";
import {
  collection,
  addDoc,
  getDocs,
  getFirestore
} from "firebase/firestore/lite";

import { firebaseApp } from "../commons/libraries/firebase.ts";

export default function FirebasePage() {
  // create
  const onClickSubmit = () => {
    const board = collection(getFirestore(firebaseApp), "board");
    void addDoc(board, {
      writer: "철수",
      title: "안녕하세요",
      contents: "반갑습니다",
    });
  };
  const onClickFetch = async () => {
    // fetch
    const board = collection(getFirestore(firebaseApp), "board");
    const result = await getDocs(board);
    const datas = result.docs.map((el) => el.data());
    console.log(datas);
  };
  return (
    <>
      <button onClick={onClickSubmit}>등록하기</button>
      <button onClick={onClickFetch}>조회하기</button>
    </>
  );
}

위의 코드 붙여넣기한 모습

 

 

# firestore (firebase noSQL) 붙여넣기 (이하)

import { Outlet } from 'react-router-dom';
import HeaderAside from "./components/HeaderAside";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import Firebase from './pages/Firebase';

const queryClient = new QueryClient()

function App() {
  // console.log(process.env.REACT_APP_YOUTUBE_API_KEY);
  return (
    <>
      <HeaderAside />
      <Firebase />
      {/* <QueryClientProvider client={queryClient}>
        <Outlet />
      </QueryClientProvider> */}
    </>
  );
}

export default App;

페이지 구현한 것 / 등록하기, 조회하기 -  Firebase.jsx 통해 구현된 것