Firebase CRUD 구현 1

DELETE 구현

1. Firebase 연결

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
import { getFirestore, collection, addDoc, getDocs, doc, updateDoc, deleteDoc } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
	apiKey: "your apikey",
    authDomain: "your authDomain",
    projectId: "your projectId",
    storageBucket: "your storageBucket",
    messagingSenderId: "your messagingSenderId",
    appId: "your appId",
    measurementId: "your measurementId"
};

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

 

파이어 베이스의 연결 과정에서 deleteDoc을 추가로 Import하여서 deleteDoc함수를 사용할 수 있도록 하였다.

 

2. 파일 삭제

// 데이터 삭제
$(".deletebtn").click(async function () {
	const docId = $(this).data("docid");
    console.log(docId);
    await deleteDoc(doc(db, "introduceTeamMembers", docId));
    console.log("삭제 완료");
    window.location.reload();
});

 

파일을 삭제 할 때  id값을 확인하여 해당하는 것만 삭제하도록 만들었다.

//삭제할 카드에 해당하는 버튼
  <button id="btn" data-docid="${doc.id}" type="button" class="btn btn-outline-danger deletebtn">삭제</button>