html 폼 전송은 form태그의 속성에 method를 추가하여 GET이나 POST요청을 보낼 수 있다.

하지만 PUT와 DELETE 요청은 불가능하다.

DELETE요청은 ajax를 PUT요청은 method-overrid를 활용해서 문제를 해결해보자.

👉 AJAX (DELETE요청)

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

jquert CDN을 추가하고 그 아래에 script태그를 생성해서 ajax명령을 작성한다.

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

e.target은 지금 클릭한 요소를 뜻한다.

dataset.id는 요소에 data-id 속성이 있으면 그 값을 반환하는 것이다.

$(this)는 클릭 이벤트가 동작하는 곳으로 e.target과 같은 의미다.

삭제요청이 성공하면 done 콜백함수가 동작한다.
this의 부모 요소 중 <li>를 fadeOutAPI로 부드럽게 사라지는 효과를 줄 수 있다.

이제 요청을 맞이하는 응답을 app.js에 작성해주자.

주의할 것은 ajax로 요청을 보내면 숫자 자료가 문자화가 되는 경우가 있다.
서버에서는 다시 문자로 변환된 데이터를 paserInt를 사용하여 다시 정수형으로 바꿔줄 수 있다.

app.delete('/delete', (req, res)=>{
  req.body._id = parseInt(req.body._id)
  db.collection('post').deleteOne(req.body, (err, req)=>{
    console.log('삭제완료')
  })
  res.sendStatus(204)
});

req.body는 { _id : e.target.dataset.id }를 담고있다.
이때 value는 아까 말했듯 숫자가 아니라 문자로 변환되어 할당되었다. 따라서 value의 형태만 정수로 바꿔서 다시 저장해준다.
mongodb모듈의 deleteOne은 인자로 받은 것과 조건이 일치하는 데이터 하나를 삭제한다.
삭제가 완료되면 정상적으로 다음 콜백함수가 실행된다.

👉 Method-override (PUT요청)

수정 작업을 하려면 put요청을 보내야하지만 HTML에서는 put요청을 보낼 수가 없다.
method-override를 사용해서 put요청을 흉내낼 수 있다.

npm i method-override
npm을 사용해서 method-override 모듈을 설치한다.

import methodOverride from "method-override"
app.use(methodOverride('_method'))

이코드를 app.js 상단에 추가해주면 put요청을 흉내내는 html의 form요청을 서버가 속아준다.

<form action="/add?_method=PUT" method="POST">
  <input>
</form>

html은 action에 쿼리스트링으로 put요청을 흉내낸다고 명시해줌으로써 가짜 put요청을 보내게 된다.

이제 서버가 put요청을 받고 db작업을 해주는 코드만 작성하면 된다.

app.put('/edit', function(req, res){ 
  db.collection('post').updateOne( {_id : parseInt(req.body.id) }, {$set : { 제목 : req.body.title , 날짜 : req.body.date }}, 
    ()=>{ 
    console.log('수정완료') 
    res.redirect('/list') 
  }); 
}); 

보다시피 mongodb의 API는 직관적이다. updateOne의 동작은 예상하는 것처럼 하나의 데이터를 업데이트해준다.
첫번째 인자는 데이터를 구분할 수 있는 pk를 object로 전달해주고 두번재는 update할 내용들을 object로 전달해주면 된다.

👉 템플릿 상속

<header>나 <footer> 그리고 <nav>같은 것들은 html파일에 공통적으로 작성된다.
개발자들은 필요없는 반복작업을 싫어한다!
따라서 반복작업을 없애려는 많은 기술들이 나왔고 이 역시 마찬가지로 해결방법이 존재한다.

views폴더 안에 상속될 html 파일을 만들자.

그리고 ejs파일에 <%- include('상속파일이름.html') %>을 작성해주면 html의 코드들이 저 코드 한문장으로 표현이 된다.