[Node.js / MongoDB] AJAX 로 삭제요청하기

💡 실습 포인트!

💜 브라우저

---

💜 MongoDB

 

• AJAX 로 삭제 요청을 했을 때, 성공하면 DB 에서 데이터가 삭제될 뿐만 아니라 화면상에서도 보이지 않게 처리했다.

 

---

💜 들어가기 전에

• 요청에는 GET, POST, PUT, DELETE 이렇게 4가지가 있다.
• 하지만 HTML 폼에서는 일반적으로 PUT, DELETE 요청은 불가하므로 다른 방법을 사용해야 한다.
  1. method-override 라이브러리를 사용한다.
  2. AJAX 로 DELETE 요청을 한다.
  3. POST 요청으로 DELETE 작업을 수행한다.
     (가장 편한 방법이지만 REST 한 API 를 만들기 위해 지양한다.)

---

💜 AJAX 개념 및 사용

• AJAX 란 프론트엔드에서 JavaScript 를 이용해 서버에 다양한 요청을 할 수 있는 문법같은 것으로 새로고침을 하지 않고도 서버에 요청이 가능하다는 장점이 있다.
• JavaScript 만으로도 AJAX 가 가능하지만 코드가 길어지므로 jQuery 를 설치를 권장한다.

---

🤍 HTML

<ul class="list-group">
    <% for(let i = 0; i < posts.length; i++){ %>
        <li class="list-group-item mb-2" style="border-top-width: 1px">
          <p class="mb-2">할일 : <%= posts[i].할일 %></p>
          <p class="mb-2">마감일 : <%= posts[i].마감일 %></p>
          <button class="btn btn-danger delete" data-id="<%= posts[i]._id %>">삭제</button>
        </li>
    <% } %>
</ul>

• 우선 리스트페이지에 삭제 버튼을 하나 추가해준다.
• 나중에 이 버튼을 클릭했을 때 삭제 버튼이 들어있는 데이터 하나를 리스트페이지와 DB 에서 삭제해야 한다.
• 따라서 button 태그에 data-id 라는 속성을 추가하여 현재의 게시물이 어떤 _id 에 해당하는지 구별할 수 있도록 해주었다.
• 그리고 _id 값은 DB 에 저장된 데이터를 가져오는 것이므로 EJS 문법을 사용했다.

---

🤍 HTML 파일 내 JavaScript

    // jQuery CDN 에서 복사해온 코드
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    
    // DELETE 요청
    <script>
	  // class 가 delete 인 버튼을 클릭하면
      $('.delete').click(function(e){

        let postNum = e.target.dataset.id;
        let clicked = $(this);
        
		// DELETE 요청을 한다.
        $.ajax({
          method : 'DELETE',
          url : '/delete',
          data : {_id : postNum}
        }).done(function(result){
          // AJAX 성공할 경우 실행할 코드
          console.log('성공했습니다.');
          clicked.parent('li').fadeOut();
        }).fail(function(err){
          // AJAX 실패할 경우 실행할 코드
          console.log('실패했습니다.');
        })

      })

    </script>

• DELETE 요청은 삭제 버튼을 클릭했을 때에만 발생해야 하고, 코드가 길어짐을 방지하기 위해  jQuery 문법을 이용해서 위와 같이 작성했다.
• data 부분에는 삭제하려는 게시물이 어떤 게시물인지 정보가 필요하다. DB 에 저장된 게시물 데이터에서는 _id 가 유일한 값이므로 이 값을 data 로 넘겨주면 된다.
• 게시물의 _id 는 HTML 상의 data-id 에서 받아올 수 있는데, .dataset.id 를 통해 정보를 받아오면 된다.
• 그래서 클릭한 요소를 e.target 으로 받아서 e.target.dataset.id 라고 코드를 작성하면 그 코드가 클릭한 게시물의 id 가 되는 것이다.
  (참고로 나는 이 부분을 postNum 이라고 변수에 담아주었다.)
• .done() 함수 내에 별다른 코드를 작성하지 않으면, 삭제 버튼을 눌렀을 때 AJAX 요청이 성공했음에도 브라우저상 화면의 변화가 없고 DB 데이터만 삭제된다. (AJAX 가 새로고침 없이 요청을 처리한다는 특성이 있으므로!)
• 따라서, 사용자는 새로고침을 하지 않고서는 삭제가 제대로 되었는지 확인할 수가 없는데 이를 시각적으로 보여주기 위해 AJAX 가 성공할 경우 fadeOut() 을 사용하여 안 보이게끔 처리해주었다.
  • $(this) 는 현재 클릭이벤트가 동작하는 요소를 의미하며 $(e.target) 으로도 대체 가능하다.
  • $() 로 감싸는 이유는 jQuery 문법을 사용하기 위한 것이며 JavaScript 문법으로 사용할 거라면 굳이 이렇게 작성할 필요가 없다.
  • $(this) 를 좀 더 명확하게 의미를 보여주기 위해 clicked 라는 변수에 담았다.
  • button 태그가 담겨있는 li 태그 전체를 없애야 하므로 clicked.parent('li').fadeOut(); 이라 코드를 작성했다.

---

🤍 JavaScript

// * delete
// 누군가가 삭제 버튼을 클릭하여 /delete 로 DELETE 요청을 하면
app.delete('/delete', function(req, res){
    // DB 에서 게시글 삭제하기
    req.body._id = parseInt(req.body._id);
    db.collection('post').deleteOne(req.body, function(err, result){
        console.log('게시물 삭제 완료');
        res.status(200).send({message : '성공했습니다.'});
    })
})

• AJAX 요청 시에 data 에 담긴 정보는 req.body 에 담겨서 전달된다.
• deleteOne() 함수는 삭제하려는 데이터와 콜백함수를 파라미터로 가진다.
• 따라서, db.collection('post').deleteOne(req.body, function( ){ }) 과 같이 작성하게 되면 db.collection 의 post 에 있는 데이터 중 req.body 에 해당하는 데이터를 삭제해달라는 의미가 된다.
• 여기서 포인트는, req.body 에 담겨온 정보는 데이터 타입이 문자로 바뀌는 경우가 발생하기 때문에 필요하다면 숫자로 변환하는 과정이 필요하다.
  그래서 req.body._id = parseInt(req.body._id) 라는 코드를 통해 숫자로 변환해주었다.