개요
- Node.js Firebase 연동, 데이터 파싱 collection, getDocs
- Node.js Firebase 연동, 데이터 파싱(2) getDoc, doc, dayjs
- Node.js Firebase 연동, 데이터 추가 Timestamp, addDoc
- Node.js Firebase 연동, 데이터 수정 updateDoc
이전 글에서 javascript로 firebase에 데이터를 수정 하는 방법을 공부하였다.
이번 글에서는 firebase에 이미 존재하는 글의 문서를 삭제 해보자
deleteDoc을 통해 게시글을 삭제하는 기능을 구현할 수 있다.
하지만 데이터를 삭제하는 경우에는 매우 조심해야 하기 때문에 권한을 잘 설정하도록 하자
javascript 코드 작성
코드 article.js
import { db } from "..\app.js";
import {
doc, deleteDoc,
} from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";
async function deleteArticle(id) { // 문서 id를 매개변수로 받는다.
try {
await deleteDoc(doc(db, "articles", id)); // articles 컬렉션에서 id가 id인 문서를 삭제한다.
} catch (error) {
return error.code;
}
}
export { deleteArticle }; // 모듈화
HTML 코드 작성
delete를 할 경우에는 별도의 html이 필요하지 않기 때문에 글의 상세 내용에서 삭제가 진행되도록 구현하였다.
코드 detail.html
<html>
<body>
<h1>게시글 상세조회</h1>
<div>
<span>id: </span>
<span class="id-data"></span>
</div>
<div>
<span>title: </span>
<span class="title-data"></span>
</div>
<div>
<span>content: </span>
<span class="content-data"></span>
</div>
<div>
<span>createdAt: </span>
<span class="created-at-data"></span>
</div>
<div>
<span>updatedAt: </span>
<span class="updated-at-data"></span>
</div>
<a class="update-link" href="#">게시글 수정</a>
<button class="delete-btn">게시글 삭제</button>
<br />
<a href="./list.html">게시글 목록으로 돌아가기</a>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.11/dayjs.min.js"></script>
<script type="module">
import {getArticle, deleteArticle} from "./article.js";
const params = new URLSearchParams(location.search);
const id = params.get("id");
const result = await getArticle(id);
const parsedStep1CreatedAt = new Date(result.createdAt.seconds * 1000);
const parsedStep1UpdatedAt = new Date(result.updatedAt.seconds * 1000);
const parsedStep2CreatedAt = dayjs(parsedStep1CreatedAt).format(
"YYYY.MM.DD HH:mm:ss"
);
const parsedStep2UpdatedAt = dayjs(parsedStep1UpdatedAt).format(
"YYYY.MM.DD HH:mm:ss"
);
const id_data = document.querySelector('.id-data');
const title_data = document.querySelector('.title-data');
const content_data = document.querySelector('.content-data');
const created_at_data = document.querySelector('.created-at-data');
const updated_at_data = document.querySelector('.updated-at-data');
id_data.textContent = result.id;
title_data.textContent = result.title;
content_data.textContent = result.content;
created_at_data.textContent = parsedStep2CreatedAt;
updated_at_data.textContent = parsedStep2UpdatedAt;
// 이전의 내용은 파싱의 내용과 동일
// 게시글 삭제 버튼 클래스 참조
const delete_btn = document.querySelector('.delete-btn');
// 게시글 삭제 버튼에 이벤트 리스너 추가
delete_btn.addEventListener('click', async () => {
if (confirm("삭제 하시겠습니까?")) { // 예 버튼 클릭 시 true 반환
// id를 id로 갖는 문서를 삭제한다.
await deleteArticle(id);
alert("게시글 삭제 완료");
// 게시글 목록으로 이동한다.
window.location.href = "./list.html";
}
});
</script>
</body>
</html>
결과
게시글 삭제 버튼 클릭 시
게시글 삭제가 성공적으로 되었을 경우
firestore의 문서가 4개에서 3개로 줄었다.
728x90
'웹(WEB) > 자바스크립트(JS)' 카테고리의 다른 글
| Node.js Firebase 연동, 회원가입 구현하기 (0) | 2024.08.29 |
|---|---|
| Node.js Firebase 연동, 로그인 구현하기 (0) | 2024.08.29 |
| Node.js Firebase 연동, 데이터 수정 updateDoc (0) | 2024.08.28 |
| Node.js Firebase 연동, 데이터 추가 Timestamp, addDoc (0) | 2024.08.28 |
| Node.js Firebase 연동, 데이터 파싱(2) getDoc, doc, dayjs (0) | 2024.08.28 |