파이어 베이스 삭제 기능 구현

전반적인 TO DO LIST의 기능에서 추가 하는기능까지 밖에 구현이 안된 상황에서

TO DO LIST는 삭제 기능이 있어야 했습니다.

 

firebase의 database를 기반으로 추가 및 조회 기능을 구현한 상황이여서 다른 데이터 베이스 말고 firebase로 삭제 기능을 만들어 보자하여 구현하게 되었습니다.

 

처음 시도는 삭제하는것이 추가하는것과 비슷하다고 생각을 하였습니다.

기록하기 버튼을 누르면서 내용이 데이터베이스에 저장되는 것이니

반대로 삭제하기 버튼을 누르면 데이터베이스에서 삭제하도록 하는 것을 생각했습니다.

그렇게 일단 삭제버튼부터 구현하였습니다.

            let temp_html = `
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="${goalId}">
                <label class="form-check-label" for="${goalId}">
                    ${goal}
                </label>
                <button class="deletebtn" style="background-color: #ffffff00; border: none;">
                    <img src="./deletebtn.png" alt="삭제버튼" width="20px" height="20px">
                </button>
            </div>`;
            $('#goalsContainer').append(temp_html)

 

일단 각각의 div. 즉, 각각의 할일 목록에는 삭제를 할수 있는 버튼이 있어야 하므로 button태그에 img를 넣어서 삭제 버튼을 보이게 하였습니다.

 

delete하는 방법은

파이어 스토어에 설명되있어서 참고를 했습니다.

그 외 다른 방법이 궁금하신 분들은 아래 링크 들어가시면 될것 같습니다.

firestore사용 : https://firebase.google.com/docs/firestore?hl=ko

 

해당 버튼의 id를 가져와 작동을 하도록 코드를 짜서 실행해봤는데 아무런 반응이 없었습니다.

        $("#deletebtn").click(async function () {
            let goal = $('${goalId}').val();
            console.log(goal);
            
            await deleteDoc(doc(db, "goals", "goal"));
            alert('삭제 완료!');
            window.location.reload();
        })

이유

• HTML에서는 동일한 ID를 사용할수 없는데 버튼은 각 form-check클래스마다 버튼이 생겨서 중복이 된 것입니다.

• 동적으로 생성된 삭제 버튼의 클릭 이벤트를 처리하기 위해 on() 메서드를 사용해야 했습니다.

• goalId의 값을 받아올수 없어 콘솔창에 undifind가 떳습니다.

•database에 들어갈 값이 없으니 db에 들어가서도 삭제할 것이 없으니 alert인 삭제완료!도 작동을 하지 않았던 것입니다.

 

해결

 

• 버튼 클릭시 자바스크립트 작동하기

  - 삭제 버튼은 id가 goalsContainer인 div안에 있고 그 안에 있는 deletebtn을 클릭했을 때 작동하도록 해야합니다.

  - 또한 파이어 스토어는 비동기 성이 존재하므로 async function 즉, 비동기 함수를 써야합니다.

$('#goalsContainer').on('click', '.deletebtn', async function () {

});

 

• 해당하는 버튼의 삭제하고자 하는 고유 id찾기

  - id를 데이터 베이스에서 foreach로 받아오기 때문에 ${goald}를 써서 코드량을 줄였습니다.

  - 하지만 html에서는 id값으로 들어가 있기 때문에 찾아서 가져와야 합니다.

  - 내가 누른 버튼이 무엇인지 알아야 합니다.

    // 해당하는 버튼의 id찾기

    // this는 내가 버튼을 누른 그 순간의 deletebtn.
    // closet()메서드는 가장 가까이에 있는 부모인 클래스 form-chech를 찾아갑니다 (div).
    // 찾은 formcheck에서 find()메서드로 ladel을 찾고 
    // 그 안에 있는 for의 속성(attr)을 가져오면 데이터베이스 문서(goals)의 이름을 가져 올수 있습니다.  
    let formCheck = $(this).closest('.form-check');
    let goalId = formCheck.find('label').attr('for');
    console.log( goalId);

콘솔창에 id값 받아오는것 확인 할수 있습니다.

여기서 id값이 아닌데 계속 id값이라 함은 label의 for와 input의 id가 같은 변수로 받아 와서 연결 되어있기 때문에 저는 label의 for속성을 가져 왔습니다.

 

• 정보가 들어가고 나오는것 확인하기

  - alert를 삭제하기 다음에 위치하도록 하여 삭제가 되었는지 확인을 합니다.

            // 파이어 스토어에서 import한  doc, deleteDoc 를 사용하여
            // doc에 데이터베이스 정보, 문서 공간, 문서 이름을 보내서 deleteDoc를 사용하여 삭제하고 
            // 윈도우를 reload하여 삭제한 내용을 안보이게 하였습니다.
            await deleteDoc(doc(db, "goals", goalId));
            alert('삭제 완료!');
            window.location.reload();

 

이렇게 삭제하기를 완료 하였습니다.

이와 같은 방법을 응용하여 수정하기도 만들어 봐도 좋을것 같습니다. 

 

완성 코드

import { doc, deleteDoc } from "ㅁㅁㅁㅁㅁㅁㅁ";
       
       $('#goalsContainer').on('click', '.deletebtn', async function () {
            let formCheck = $(this).closest('.form-check');
            let goalId = formCheck.find('label').attr('for');

            alert('삭제 완료!');

            await deleteDoc(doc(db, "goals", goalId));

            window.location.reload();
        });