[Node.js/mongoDB] 10. 삭제기능 만들기

지렁·2023년 10월 31일

Node.js/mongoDB

글 삭제 기능도 만들어보기

글마다 있는 삭제버튼을 누르면, DB에 있는 document 삭제하면 되는데 유저가 직접 DB를 조작하면 위험하니까 중간에 서버를 거쳐야 한다

글마다 삭제버튼 누르면

서버로 이 글 삭제해달라고 요청을 날리고

서버는 확인 후 DB에 있는 document 삭제

🖤 1. 글마다 삭제버튼 누르면 동작하도록 하기

일단 삭제버튼 만들기 !

삭제버튼은 a 태그로 경로설정하는 방법이 아닌, span 태그로 만든 후 AJAX 요청을 날려보는 방법으로 만들었다

ajax로 만들면 form 전송 시 새로고침이 되지 않는다

◾ list.ejs html 추가

<div class="white-bg">
  <% for (let i = 0; i < 글목록.length; i++){ %>
    <div class="list-box">
      <h4>
        <a href="/detail/<%= 글목록[i]._id %>">
          <%= 글목록[i].title %>
        </a>
        <a href="/edit/<%= 글목록[i]._id %>">✏️</a>
        <span class="delete">🗑️</span>
      </h4>
      <p>글내용임</p>
    </div>
  <% } %>
</div>

◾ script 코드 작성

이제 delete 클래스를 선택하여 클릭 이벤트리스너를 통해 코드를 실행한다
우선 첫번째 글을 삭제하기 위해 0으로 인덱싱을 한다

<script>
  document.querySelectorAll('.delete')[0].addEventListener('click', function(){
    //get 요청
  })
</script>

클릭 시 GET 요청을 위한 fetch를 사용한다

fetch('/URL~~', {
  method : 'POST',
  headers : { 'Content-Type' : 'application/json' },
  body : JSON.stringify({a : 1})
})

POST요청하고싶으면 뒤에다가 중괄호 열고 설정들을 집어넣을 수 있는데

method 에는 원하는 method 넣으면 되고

headers 는 부가정보 기입란인데 저렇게 작성해야 array, object 데이터를 서버로 잘 전송할 수 있다

body 안에는 서버로 전송할 array, object 데이터를 집어넣으면 된다.
근데 array, object 를 그냥 넣으면 깨지기 때문에 JSON.stringify() 를 써서 문자형태로 (JSON형태로) 바꿔서 전송해야 잘 간다

🖤 2. 서버에 요청

그러면 입력해야하는 url은 뭘까?

fetch('/delete', {
  method : 'DELETE',
})

이벤트리스너 안에 이런 코드를 써서 DELETE 요청을 할 수 있다
하지만 이렇게만 하면 서버는 어떤 document를 삭제해야할지 모른다
➡ 그래서 삭제를 원하는 document의 id도 보내야한다

📢 querystring 사용하여 서버에 요청

document.querySelectorAll('.delete')[0].addEventListener('click', function(){
  fetch('/delete?docid=' + '<%= 글목록[0]._id %>', {
    method : 'DELETE',
  })
})

🖤 3. 요청이 들어오면 서버는 삭제

삭제 요청이 들어오면 서버는 확인 후 삭제하면 된다

◾ server.js

app.delete('/delete', async (req, res) => {
  let result = await db.collection('post').deleteOne( { _id : new ObjectId(req.query.docid) } )
  res.send('삭제완료')
})

Ajax로 요청하는 경우 서버는 다른 페이지로 새로고침이 되는 redirect, render을 사용하면 안된다

현재 0번째 버튼만 구현해놓았다

다른 버튼들도 구현해보자 !
어떻게 해당 id값을 가져올 수 있을까?

➡ dataset

📢 dataset

html에 정보를 숨겨서 저장할 수 있는 방법이다
html 요소를 클릭하거나 하는 경우 숨겨놨던 데이터를 쉽게 가져올 수 있는 방법이다

e.target.dataset.데이터이름 으로 숨겨놨던 데이터를 가져올 수 있다

◾ list.ejs

<span class="delete" data-id="<%= lists[i]._id %>">🗑️</span>
<script>
        for(let i=0; i<'<%= lists.length %>'; i++){
          document.querySelectorAll('.delete')[i].addEventListener('click',function(e){
            
            fetch('/delete?docid='+e.target.dataset.id, {
              method: 'DELETE',
            })
         .then((r)=>{r.text() })
         // 서버가 보낸 데이터 data
         .then((data)=>{
          //삭제 시 새로고침해야 post가 사라진다, 그래서 숨겨버리기
          e.target.parentElement.parentElement.style.display='none'
           })
          })
     

        }
        </script>
</body>