[13주차] firebase 데이터 가져오기 (next.js)

 

 

firebase.ts

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// 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
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);

 

 

ui 그려줄 페이지

import { db } from "@/common/firebase_hm";
import { collection, getDocs } from "firebase/firestore";
import React, { useEffect } from "react";

const Header = () => {
  useEffect(() => {
    const fetch = async () => {
      try {
        const sampleCollection = collection(db, "findpicLists");
        const Snapshot = await getDocs(sampleCollection);
        return Snapshot.docs;
      } catch (error) {
        console.log("error", error);
      }
    };
    fetch().then((res) =>
      console.log(
        "res",
        res?.map((list) => list.data())
      )
    );
  }, []);
  return <div>Header</div>;
};

export default Header;