파이어베이스 데이터 넣기

파이어베이스 세팅코드

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


// Firebase 구성 정보 설정
const firebaseConfig = {
        본인 설정 내용 채우기 
};


// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Firebase 구성 정보 설정은 파이어베이스 에서 만든 데이스 페이지에서

왼쪽상단 메뉴버튼 > 프로젝트 개요톱니바퀴 > 프로젝트설정 >

SDK 설정 및 구성

에서 구성 클릭 > 보드 복사해서 붙혀넣기

 

 

데이터 저장하기

$("#id").click(async function () {
    let doc = {};//<저장할 데이터
    await addDoc(collection(db, "콜렉션이름"), doc);//<db의 컬렉션명 입력
    alert('저장완료'); //알럿알림
    window.location.reload(); //윈도우 새로고침
})

 

 

 

데이터 불러오기

      //데이터 불러오기
      let docs = await getDocs(collection(db, "albums"));
      docs.forEach((doc) => {
        let row = doc.data();
        console.log(row);//가져온데이터 콘솔창에 표시
        /**  이곳에 메이크카드를 넣으세요   */
      });