#17 AJAX로 삭제하기1(AJAX 설명 및 준비)

- ajax 코드를 작성할 views/list.ejs 파일의 디자인을 수정해보자 by Bootstrap

(views/list.ejs, 삭제 버튼 추가)

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

---

● DELETE 요청 만들기

- ajax를 사용해 삭제 버튼을 누르면 DELETE 요청을 하도록 코드를 짜보자
cf) 요청에는 4개의 종류가 있다.  →  GET, POST, PUT, DELETE
- <form> 태그를 이용하면 좋지만 HTML <form>의 method 속성에서 PUT, DELETE는 지정할 수 없다.

- 일반적인 HTML <form>에서는 GET, POST 요청만 날릴 수 있다.

- 아래와 같은 방식이 안 된다는 얘기이다.

<form method="DELETE">
  <button>버튼</button>
</form>

- 따라서 삭제 요청을 할 때 쓸 수 있는 방법은 3가지가 있다.

1. method-override 라이브러리 사용
2. AJAX로 DELETE 요청을 보낸다.
3. 그냥 <form> 태그에서 POST 요청을 날려서 DELETE 작업을 수행한다.

- 3번 방법이 가장 편하지만 이번 글에서는 2번 방법을 사용할 것이다.(POST로 삭제 요청을 해도 문제는 없다는 의미)
- RESTful API를 만들기 위해서는 1번 or 2번 방법을 사용해야한다.

---

● AJAX?

- frontEnd에서 JavaScript를 이용해 서버에 여러가지 요청을 할 수 있는 문법
- 새로고침 없이 서버에 요청을 할 수 있는 것이 큰 장점
- 따라서 ajax 관련 글의 목표는 삭제 버튼을 누르는 순간 새로고침 없이 글을 삭제하는 기능을 만드는 것이다.

---

- 그러면 AJAX를 쓰기 위해 jQuery를 설치해보자

- JavaScript 만으로도 AJAX가 가능하지만 강의에서는 jQuery를 사용했다.(개인적으로 이 점은 마음에 들지 않았다.) 
- jQuery를 이용하기 위해서는 직접 설치 혹은 CDN을 사용하면 되는데 Bootstrap이 정상적으로 설치가 되었다면 이미 jQuery CDN도 가지고 있는 것이다.
- list.ejs에 아래와 같은 코드가 내용이 있는지 보자

(views/list.ejs)
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

있다.

- 위의 코드가 jQuery를 CDN 방식으로 설치하는 부분이다.
cf) CDN 방식 : 다른 사이트에서 호스팅해주는 jQuery 파일을 나의 HTML에도 적용하는 방식
- 하지만 위의 jQuery Slim 버전으로는 AJAX 요청이 불가능하므로 아래와 같이 수정해보자

- 강의에서는 위의 부분을 수정하라는데 나는 그냥 아래의 사이트 들어가서 CDN을 가져왔다.

https://releases.jquery.com/

jQuery CDN

<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>

- 이렇게 수정해야 AJAX 기능이 들어있는 jQuery 라이브러리를 설치할 수 있다.
- 이제 해당 코드 부분 하단에 아래와 같은 식으로 코드를 구성할 것이다.
- 주의 : jQuery CDN 부분의 하단에 <script> 태그를 열어서 코드를 작성해야한다.

<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
<script>
  서버에 AJAX DELETE 요청 날리기
</script>

---

● AJAX 기본 문법

- 오랜만에 복습할 겸 정리해 봤다.

(list.ejs 하단)
<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
<script>
  $.ajax({
    method : 'POST',
    url : '/add',
    data : '게임만들기'
  })
</script>

- /add 경로로 POST 요청을 할때 요청과 함께 '게임만들기' 라는 데이터를 보내주라는 의미이다.
- 그러면 서버는 해당 요청을 받아 처리해준다.
- 참고로 위의 코드를 별도의 이벤트 등록 없이 <script> 태그 안에 그대로 넣으면 list.ejs 페이지가 load 될 때마다 실행된다.
- 게시글을 삭제하는 ajax 코드도 작성해보자

(list.ejs 하단)
<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
<script>
  $.ajax({
    method : 'DELETE',
    url : '/delete',
    data : '1번게시물'
  }).done(function(결과) {
    // AJAX 성공시 실행할 코드
  }).fail(function(에러) {
    // AJAX 실패시 실행할 코드
  });
</script>

- /delete 경로로 DELETE 요청을 할 때 요청과 함께 '1번게시물' 이라는 데이터를 보내는 코드이다.
- .done(), .fail() 과 같은 function 들을 붙여 ajax 요청 후 실행될 내용도 작성할 수 있다.
- 앞단에서 위와 같이 ajax 요청을 보내면 서버(server.js)에서는 아래와 같이 코드를 작성해야 DELETE API가 만들어진다.

(server.js)
app.delete('/delete', function(req, res){
  // DB에서 글 삭제하는 코드
  res.send('삭제완료');
});

- 사용자가 /delete 경로로 DELETE 요청을 하면 callback function을 수행하도록 하는 코드이다.

 

cf) method-override 라이브러리에 대한 글

https://resilient-923.tistory.com/246

[Node.js]RestAPI에서 PUT,DELETE,method-override 사용하기

https://velog.io/@jinno/method-override%EB%A5%BC-%ED%86%B5%ED%95%9C-PUT-%EC%9A%94%EC%B2%AD

method-override를 통한 PUT 요청