[Node.js] 글 삭제

• 👩‍💻 글 삭제 로직

1. 클라이언트가 서버로 특정 글 삭제 요청을 보낸다.
2. 서버는 확인 후에 DB에 있는 document를 삭제한다.

• 브라우저 주소창으로 a, form 태그 통해 서버로 get, post 요청을 할 수 있다.
• 단점이 새로고침이 된다는 점이 있다.
• 새로고침 없이도 서버에 요청을 하고 싶을 때는 ajax라는 것을 사용한다.

📌 1. 휴지통 아이콘 추가

//list.ejs
 <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>

📌 2. script 추가

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

📌 3. fetch()

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

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

• body 안에는 서버로 전송할 array, object 데이터를 집어넣으면 된다.

• 근데 array, object 를 그냥 넣으면 깨지기 때문에 JSON.stringify() 를 써서 문자형태로 (JSON형태로) 바꿔서 전송해야 잘 간다.

• method: 요청의 유형을 지정 (GET, POST, PUT, DELETE 등)

• headers:
  Content-Type: 요청 본문의 데이터 형식을 지정한다.
  예를 들어, JSON 데이터를 전송할 때는 application/json을 사용한다.
  Authorization: 인증 토큰을 포함하여 서버에 인증을 제공한다.

• body: POST, PUT 등의 메서드로 데이터를 전송할 때 요청 본문에 포함되는 데이터를 지정한다. 일반적으로 문자열 형식으로 데이터를 전송한다. 주로 JSON 형식의 데이터를 사용한다.

📌 4. 서버에 데이터 전송하는 방법

✨ 1. URL 파라미터

<script>
      document
        .querySelectorAll(".delete")[0]
        .addEventListener("click", function () {
          fetch("/abc/홍길동");
    </script>

//server.js
app.get('/abc/:id', async(요청,응답) => {
console.log(요청.params)
}

✨ 2. query string

<script>
      document
        .querySelectorAll(".delete")[0]
        .addEventListener("click", function () {
          fetch("/abc?age=20&name=홍길동");
          //querystring일 경우 fetch('/abc?age=20')
        });
    </script>

app.get("/abc", async (요청, 응답) => {
  console.log(요청.query);
});

📌 5. list.ejs에서 🗑️를 누르면 실행할 js 코드 추가

//생략
//삭제버튼에 id라는 이름으로 글의 _id를 숨겨놓을 수 있다.
          <span class="delete" data-id="<%= 글목록[i]._id %>">🗑️</span>
        </h4>
        <p><%= 글목록[i].content %></p>
      </div>
      <% } %>
    </div>
    <a href="/list/next/<%= 글목록[글목록.length-1]._id%>">다음</a>
    <script>
      document
        .querySelectorAll(".delete")[0]
        .addEventListener("click", function (e) {
          fetch("/delete?docid=" + e.target.dataset.id, {
            method: "DELETE",
          });
        });
    </script>
  </body>
</html>

🔍 _id 가져오는 다른 방법 dataset

<span data-A="B"></span>

A라는 이름으로 "B"라는 자료를 저장해두는 것

📌axios

• 🧐 fetch의 단점

fetch('/URL').then((r)=>r.json())
.then((result)=>{ console.log(result) }) //서버에서 array, object보내는 경우

fetch('/URL').then((r)=>r.text())
.then((result)=>{ console.log(result) }) //서버에서 문자보내는 경우

• 🧐 axios 도입

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 

• html 파일에 추가하고 GET요청 날리고 결과 출력도 가능

axios.get('/URL').then((r)=>{ console.log(r) })

• 🧐 삭제 기능 구현시 고려할 점

• 현재는 새로고침까지 해야 글이 사라진다.

• 삭제버튼 눌러서 삭제완료되면 새로고침을 강제로 하거나

• 현재 버튼이 속해있는 글의 html을 안보이게 처리하라고 코드를 짜는 등을 고려해야할 것임.