[Node.js] 글 삭제 기능 만들기

삭제버튼을 누르면 해당 포스트가 삭제되도록 만들어 보자.

 

<ul class="list-group">
      <% for(let i=0;i<posts.length;i++){ %>
        <li class="list-group-item">
          <!-- <p>글번호 : <%= posts[i]._id %> </p> 이렇게해도됨 -->
          <h4>제목: <%= posts[i].title%>
          </h4>
          <p>마감일 : <%=posts[i].date %>
          </p>
          <button class="btn btn-danger delete" data-id="<%=posts[i]._id %>">삭제</button>
        </li>
        <%} %>
    </ul>

우선 list.ejs 파일을 보자.

button태그를 이용해서 삭제버튼을 만들어주었고,

현재 글의 id값을 저장하기 위해서 버튼태그 안에 data-id를 적어주었다.

(이렇게 안하고 그냥 <p>태그에 글번호를 적어줘도 되기는 하지만 이 방법이 더 편하고 깔끔할 것 같다.)

 

 $('.delete').click(function (e) {
      var 글번호 = e.target.dataset.id;
      var 현재요소 = $(this);
      $.ajax({
        method: 'DELETE',
        url: '/delete',
        data: { _id: 글번호 }
      }).done(function(결과) {
        //ajax요청성공시 실행할 코드
        현재요소.parent('li').fadeOut();
        console.log('성공했어여');
      }).fail(function(xhr,textStatus,errorThrown){
        //요청 실패시 실행할 코드
        console.log(xhr,textStatus,errorThrown)
        
      })
    })

그리고, 삭제버튼 클릭시의 이벤트리스너를 만들어주었다.

삭제버튼이 눌리면 ajax로 DELETE요청을 날릴 것이다.

(참고: jQuery로 AJAX를 작성하는 경우에 jQuery를 설치해야하는데, jQuery slim버전은 ajax를 사용할 수 없다)

 

이벤트리스너 안에있는 ajax 부분을 보자.

var 글번호 = e.target.dataset.id
$.ajax({
	method: 'DELETE',
    url: '/delete',
    data: '{_id: 글번호}'
    })

아까 삭제버튼 태그에 숨겨두었던 data-id값을 사용하기 위해

'글번호'라는 변수에 e.target.dataset.id값을 넣었다.

 

$.ajax안에는 method, url, data를 적어주는데

/delete경로로 DELETE요청을 하는데, 요청과 함께 {_id: 글번호} 값을 보낸다는 뜻이다.

 

이렇게 ajax요청을 하고, 서버에서는 . . .

(서버코드)

app.delete('/delete',function(요청,응답){
    console.log(요청.body);
    요청.body._id=parseInt(요청.body._id); //문자형태로 넘어온 id값을 다시 int형으로 변환
    db.collection('post').deleteOne(요청.body,function(에러,결과){
        console.log('삭제완료');
        응답.status(200).send({message: '성공했습니다'}); 
    })
})

서버에서는 /delete경로로 온 delete요청을 처리해주는 코드를 작성해주면 된다.

아까 list.ejs파일에서 ajax로 DELETE요청과 함께, 삭제할 글의 id값을 보냈으니

서버에서는 id값을 가지고 DB에서 해당 글의 데이터를 삭제해주면 된다.

 

DB에서 해당 글을 삭제하기 위해서 db.collection('콜렉션명').deleteOne({삭제할요소},function(에러,결과){}) 형태의 코드를 작성했다.

(그런데 ajax로 온 데이터 id값이, 여기서는 문자의 형태로 변환되었기 때문에

parseInt메소드를 이용하여 다시 int형으로 바꿔주었다.)

 

삭제가 완료되었다면,

app.delete의 응답으로

응답.status(200)을 보내주는데, 코드200은 정상적으로 보냈다는 뜻이다.

 

이렇게 응답을 보내주면. . . 다시 list.ejs로 돌아가서

(list.ejs)

$('.delete').click(function (e) {
      var 글번호 = e.target.dataset.id;
      var 현재요소 = $(this);
      $.ajax({
        method: 'DELETE',
        url: '/delete',
        data: { _id: 글번호 }
      }).done(function(결과) {
        //ajax요청성공시 실행할 코드
        현재요소.parent('li').fadeOut();
        console.log('성공했어여');
      }).fail(function(xhr,textStatus,errorThrown){
        //요청 실패시 실행할 코드
        console.log(xhr,textStatus,errorThrown)
        
      })
    })

서버가 성공했다는 응답코드를 받으면,

ajax({...}).done(function(){})이 실행된다.

여기서는 done(function(){ 현재요소.parent('li').fadeOut();}을 하고있는데,

ajax요청시 페이지가 새로고침되지 않기때문에 글이 삭제된것을 반영하기위해, 삭제버튼을 누른 요소를 fadeOut으로 안 보이게 설정한 것이다.

 

그리고 서버가 실패했다는 응답코드를 보내면(예를들어 코드가 400일 때)

.fail()부분이 실행된다.

.fail(function(a,errorCode,errorMessage){})형태인데, console.log로 찍어보면 에러코드와 에러메세지가 나온다.