오늘은 Firebase에 저장한 데이터를 버튼을 이용하여 수정하고 삭제하는 코드에 대한 고민을 했다.
그 와중 문제를 해결한 몇 가지 방법을 소개하고자 한다.
import를 잊지 않는다
가장 중요한 사항이다.
이게 빠진 채로 꽤 많은 시도를 했다.
코드를 테세우스의 배로 만들기 전에 알아챈 것이 천만다행이다.
//삭제
import { doc, deleteDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
//수정
import { updateDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";나는 페이지가 낫 놓고 기역 자도 모르는 줄 알았다.
그러나 import를 하지 않는다면 낫도 놓지 않았으면서 생사람을 잡는 셈이다.
Tip : console.log를 적극 활용하여 오류의 사유를 확인하는 습관을 들이자.
class와 id를 착각하지 않는다
1. 명령어를 착각하지 않는다
가령, 이런 코드가 있다고 하자.
$('#ourcards').on('click', '.editbtn', async function () {
let card = $(this).closest('.card.border-light.mb-3');
let contentdox = card.attr('id');
console.log(contentdox);
let newContent = prompt("수정할 한마디를 입력해주세요.")
if (newContent == '') {
alert('내용이 비어 있어 수정할 수 없습니다!')
}
else {
await updateDoc(doc(db, "comments", contentdox), { content: newContent });
window.location.reload();
}
});코드가 작동하지 않는다.
첫 줄에 alert를 넣어 봐도 아무 일도 생기지 않는다.
도대체 무슨 오류기에 클릭도 인식할 수 없는지 마음을 졸였다.
그런데, 지금 이 버튼이 찾고 있는 'ourcards'는
<div class="ourcards">
였던 것이다.
#은 id요, .은 class로다.
이런 어이 없는 사태가 두 번은 발생하지 않기를 바란다.
2. id는 나눠 쓰지 않는다
삭제 버튼을 만들고 싶었을 때의 일이다.
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 id=delbtn class="btn btn-outline-danger" data-goal-id="${goalId}">X</button>
</div>`;
$('#goalsContainer').append(temp_html)
});
나는, 이 버튼의 class가 상당히 길기 때문에 id를 사용해 더 간결하게 이 버튼을 칭하고 싶었다.
그러나 이 버튼은 하나가 아니다. 데이터가 입력되면 버튼은 여러 개가 된다.
그리고 닮았을지언정 이들이 하나의 id를 공유할 수는 없다.
복잡하더라도 class를 사용해야 한다.
회고
오늘은 그래도 실제로 작동하는 요소들을 만들 수 있어 좋았다.
인간은 적응의 동물이라 했던가, 어제보다 오늘의 컨디션이 괜찮다.
이 기세로 끝까지 달려 보자.
