앞의 포스팅에 이어서..
우선 버튼 하나에만 삭제 버튼을 만들어보고, 추후에 하나씩 추가해나가보자.
- 삭제 버튼을 만들어둔
list.ejs의 script태그에
<script>
document
.querySelectorAll(".delete")[0]
.addEventListener("click", function () {
fetch("/delete", {
method: "DELETE",
});
});
</script>ajax사용을 위해 fetch함수로 method를 DELETE로 넣어주고, 서버에서 어떤 document를 삭제해줄지 알아야하니 _id를 함께 넘겨주는 것이 좋을 듯 하여 fetch 함수 내부에 query string을 사용하여 docid라는 이름으로 전송할 데이터를 넘겨주었다.
fetch("/delete?docid=전송할데이터", {
method: "DELETE",
})그 전에!! 데이터를 전송하기 전, id를 알아오는 부분에 대해서...
스크립트 태그 안에서 ejs 문법을 사용하려면 문자 안에 담아줘야한다.
테스트를 위해
console.log('<%= 글목록[0]._id %>')콘솔로 출력해보았다.
id를 잘 가져온다. 그럼 이제 이걸 전송할 데이터 부분에 넣어주자.
query string을 통해서 잘 전달해줬으면 server.js파일에서 요청.query를 사용하면 똑같이 값을 잘 받아올 것이니 이것까지 잘 들어가는지 테스트
이까지 잘 받아와진다면 다음 2번으로 넘어가보자.
server.js파일로 가서 서버에서 요청받으면 document를 삭제하는 API 생성해주면 되는데,
mongoDB에서 하나의 document를 삭제하기 위해서는.deleteOne()을 사용하면 된다.
_id에 new ObjectId('id값') 형식으로 들어올 수 있도록 요청.query에서 docid만 받아오고, 이후에 처리가 잘 되었는지 알기 쉽도록 요청.send를 사용하긴 하였으나,
ajax로 요청 사용시에는.redirect혹은.render을 사용하여 새 페이지로 이동하는 방식을 사용하지 않는 것이 낫다.
ajax의 장점이 새로고침이 필요 없다는 것인데, 이렇게 되면 ajax를 사용하는 의미가 사라지기 때문...^^
하나씩 삭제할 수 있는 기능이 완성되었으면, 해당 js 코드에 반복문을 활용해주면 된다. 아래를 살펴보자.
- for 반복문을 ejs 파일의 script 태그에 사용해주어 글목록[i]를 넣어줬던 것처럼 사용해보자
<% for (let i = 0; i < 글목록.length; i++){ %>
<script>
document
.querySelectorAll(".delete")
["<%=i%>"].addEventListener("click", function () {
fetch("/delete?docid=" + "<%= 글목록[i]._id %>", {
method: "DELETE",
});
});
</script>
<% } %>script 내부에 for문을 작성하니 오류가 왕창 뜨길래..
방법을 바꿔 ejs문법을 사용하여 script를 감싸는 식으로 for문을 돌리고, i를 사용할 수 있도록 작성해주었다.
현재 게시글은
이렇게 있는데.. 테스트로 다섯번째글과 일곱번째글을 삭제해보자.
이제 잘 동작한다..^^
아래는 참고용으로 server.js에 있는 API
app.delete("/delete", async (요청, 응답) => {
// db에 있던 document 삭제하기
// console.log(요청.query);
let result = await db
.collection("post")
.deleteOne({ _id: new ObjectId(요청.query.docid) });
});query string + ajax의 활약??으로 해결하긴 했는데 하고나서 보니 더 간단하고 좋은 방법이 존재했다(ㅋㅋ)
아래는 html에 _id를 숨겨놨다 가져오는 방법이다.
앞전에도 이 방법을 사용한적이 있었으나...
반복문인 for문을 사용해서 꼭 해결해보고싶어 글이 길어졌다ㅜㅜ.. 아래는 완전 편리하게..
✨dataset 사용하여 데이터 전달
- 우선 쓰레기통 이모지를 넣어뒀던 span태그를 보자.
만약 이런 식으로data-age="20"을 넣어줬다면 age라는 이름으로 20이라는 값을 넣어둔 것.
그렇다면 해야할 일은 하나.. id라는 이름으로 해당 게시글의 id값을 넣어주면 된다!!
<span class="delete" data-id="<%= 글목록[i]._id %>">🗑️</span>이렇게 쉽게 가져올 수 있는 것을...
휴 이렇게 가져왔으면 아래 script로 내려가서
e.target으로 지금 클릭한 요소 안에있던data-id를 가져와달라고 하기 위해
e.target.dataset.id코드를 추가
그리고 마무리로 모든 delete에 기능을 추가해주기 위해 결국 for문으로 장식하고 말았다...
아래는 결과 코드
<script>
let deleteBtns = document.querySelectorAll(".delete").length;
for (let i = 0; i < deleteBtns; i++) {
document
.querySelectorAll(".delete")
[i].addEventListener("click", function (e) {
fetch("/delete?docid=" + e.target.dataset.id, {
method: "DELETE",
});
});
}
</script>