Express MongoDB 삭제 기능 구현

배찌 (배찌)·2023년 2월 21일
0

node.js

목록 보기
7/8

나를 가장 많이 힘들게 했던 기능이라고 한다면 삭제 버튼일것이다.
똑같이 따라 했는데도 제대로 안됬던 ... 3일 정도 삽질하고 나서야 구현이 가능했다.

삭제 요청을 받는것은 http Method를 사용하여 DELETE를 사용하면된다.
그리고 /list에 삭제 버튼을 추가하고, 삭제 클릭 모션에 대하여 데이터를 받고 그것에 맞는 object를 찾고 삭제하라는 명령을 하면된다
그러면 이런 내용이 되겟다.

/delete 경로로 들어온 삭제 요청에 대한 _id 데이터를 추출하고
db에서 _id를 찾아서 그에 맞는 object를 삭제해라

그렇게 되면 다음과 같은 내용이 나올것이다.

app.delete('/delete', function(req, res_{
	db.collection('post').deleteOne({ _id : req.body._id}, function(error, result){
    })
});

이렇게 될것이다. 하지만 이렇게 하면 분명 에러가 날것이다. 그 이유는 _id는 숫자이다.
하지만 req.body._id는 문자로 들어오기 때문에 _id를 매치업하지 못할것이다.

그렇기 때문에 숫자로 바꿔주는 parseInt를 사용하여 숫자로 바꿔주고 진행한다.

app.delete('/delete', function(req, res_{
	req.body._id = parseInt(req.body._id)
	db.collection('post').deleteOne({ _id : req.body._id}, function(error, result){
    })
});

이제 여기서 문제가 또다시 생긴다 그것은 html은 DELETE를 사용할수 없다는 것이다.
그래서 부트스트랩 CDN을 사용하면서 같이 다운되었던 jQuery를 사용하여 비동기식 XML인 $.ajax를 사용할것이다.

우선 사용하기 위해서는 부트스트랩 기본양식에서 jquery.slim.min.js를 slim을 지우고 사용해준다.
만약 했는데 ajax가 되지않는다면 jquery.mim.js 밑에서 ajax를 만들어서 해보자!

삭제 문법은 다음처럼 썻다

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
   $.ajax({
     method : 'DELETE',
     url : '/delete',
     data : { _id : id }
   });
</script>

이렇게 하면 html대신 ajax가 DELETE요청을 보내게 된다.
이제 버튼을 추가하고 누르면 _id도 추출되도록 html을 수정해보자

<ul class="list-group">
  <% for (var i = 0; i < posts.length; i++){ %>
      <li class="list-group-item">
       <h4> 할일 제목 : <%= posts[i].Title %> </h4>
       <p> 할일 마감날짜 : <%= posts[i].Date %> </p>
       <button class="delete" data-id="<%= posts[i]._id %>">삭제</button>
     </li>
   <% } %>
</ul>

이렇게되면 버튼을 누르면 _id가 추출된다.
그러면 이제 ajax 스크립트에서 class delete로 버튼을 누르면 동작하도록 코드를 짜보자
우선 한글로 써보면

delete 클래시 버튼을 누르면 /delete에 DELETE method를 보낸다.
그때 버튼에서 _id를 추출하여 그에 맞는 데이터 베이스에서 찾아서 삭제해라

우선 여기서 데이터 베이스에서 찾아서 없애는것은 API에서 설정을 완료했으니 나머지 값만 설정하자
그러면 다음과 같은 결과가 된다. 자세한 내용은 ajax 문법을 찾아보자

<script>
  $('.delete').click(function(e){
     $.ajax({
       method : 'DELETE',
       url : '/delete',
       data : { _id : e.target.dataset.id }
       }).done(function(result){
     })
  });
</script>

이렇게 해서 정상적으로 작동하면 된것이다.
아 물론 새로고침을 해야한다

이제 새로고침을 하지않고 그창에서 삭제되도록 해보자.
이미 ajax를 사용하고 있기때문에 여기서 해당 문서란이 없어지는 효과만 넣는다면 된다.
없어지는 효과는 jQuery에서 제공하여 fadeOut 한글자로 없어지는 효과를 할수있다. 그러면 다음과 같은 결과가 나온다.

<script>
  $('.delete').click(function(e){
     $.ajax({
       method : 'DELETE',
       url : '/delete',
       data : { _id : e.target.dataset.id }
       }).done(function(result){
       		$(this).parent('li').fadeOut();
     })
  });
</script>

여기서 parent를 li태그로 한이유는 for문이 li태그로 반복했기때문에 반복된 수 많은 li중에 하나를 삭제하라고 명령어를 입력하게 되는것이다.

profile
Never give up Impossible is nothing

1개의 댓글

comment-user-thumbnail
2023년 2월 21일

https://codingapple.com/ 에서 공부한 내용입니다. 여기서 더 공부해보세요

답글 달기