파이어베이스, 자바스크립트 삭제기능 (feat. 문서 고유 id 값 가져오기)

파이어 베이스에 저장한 데이터를 삭제하려면 어떻게 해야할까?

내가 원했던 기능은

현재 보고있는 게시글을 삭제버튼을 누르면 👉 해당 데이터가 삭제 된 후  👉 list 페이지로 넘어가는 거였다.

 

 

 

1.

가져온 데이터를 반복문을 통해 하나하나 가져와서, 원하는 값을 가져온다.

 

//데이터 가져오기
let docs = await getDocs(collection(db, "board"));
let query = window.location.search.substr(11);

//가져온 데이터 반복문으로 하나하나 빼보기
docs.forEach((eachDoc) => {
  let id = eachDoc.id
  let which;
  let num = row["num"];
  if (num === query) {
    which = id;
  }
})

이 때에, 변수 id 에는, 각 데이터 문서에 적힌 임의의 id값을 가져와서 넣어준 것이고,

which는 선언만 해 두었다. (삭제 버튼 누르면 일어날 일들을 아래에 따로 적어주었기 때문이다.)

 

 

 

2.

if문을 통해서,  which 변수에 값을 넣어 주었는데,

조건은 이렇다. 

임의로 만들었던 식별값 num

그리고 주소값에 슬쩍 끼워넣은 num 값을 가져온 query 

 

결국,

모든 데이터들의 식별값 num과,

지금 보고있는 게시물 페이지 주소값에 숨긴 num이 같은지 비교하는 거다. 

 

이 두개의 값이 같은지 비교 후, 같다면 which 변수에 id 값을 넣어주었다. 

 

 

 

3.

데이터 삭제하기 버튼 누르면~~

  //데이터 삭제
  $("#delete").click(async function (e) {
    e.preventDefault();
    if(id === which){
      if (confirm("정말 삭제 하시겠습니까?")) {
        await deleteDoc(doc(db, 'board', which)) ;
        window.location.href = './board_list.html';
      } else {
        return false;
      }
    }
    //삭제 예시
    // const desertRef = doc(db, [컬렉션명], [도큐멘트명]);
    // await deleteDoc(desertRef);

board 라는 컬렉션에 있던 데이터 중, id 값이 which 인 애를 지우고,

window.location.href 를 통해 페이지를 list 페이지로 넘어간다.

 

 

 

4.

여기서 혹시 모를 실수 방지를 위해서, confirm을 넣은 조건식을 걸어두었다. 

confirm은 예 , 아니오 가 적혀있는  alert 같은 창인데,

이때 값이  true 이면, if문에 적혀있던 것들이 실행된다.