이번 포스팅에서는 게시글을 삭제하는 기능을 구현해보자.
1. delete 라우팅 설정
// routes/article.js
router.delete('/:id', async (req, res) => {
await Article.findByIdAndDelete(req.params.id);
res.redirect('/');
})2. DELETE 구현의 복잡성
link 는 get 요청만 가능하고, form 은 get 혹은 post 요청만 가능하다.
그렇다면 delete 요청은 어떻게 가능할까?
get 요청은 데이터를 단순히 갖고 오는 반면,
post 요청은 기존에 데이터가 존재하든 말든 해당 데이터를 덮어 씌워버리는 기능을 한다.
이 post의 덮어씌우는 기능을 활용하여 delete를 구현할 수 있다.
3. method-override 라이브러리 설치 및 삽입
method-override는 form 이 건네주는 method를 덮어 씌워주는 기능을 제공한다.
npm i method-override// server.js
const methodOverride = require('method-override');
app.use(methodOverride('_method'));4. index.ejs 에 삭제 버튼 추가
<body>
<div class = "container">
<h1 class = "mb-4">Glog Articles</h1>
<a href = "/articles/new" class = "btn btn-success">New Article </a>
<% articles.forEach(article => { %>
<div class = "card mt-4">
<div class = "card body">
<h4 class="card-title"><%= article.title %></h4>
<div class = "card-subtitle text-muted mb-2"><%= article.createdAt.toLocaleDateString() %></div>
<div class = "card text mb-2"><%= article.description %></div>
<a href = "articles/<%= article.slug %>" class = "btn btn-primary">Read More</a>
<!--여기--> <form action="/articles/<%= article.id %>?_method=DELETE" method = "POST" class = "d-inline">
<button type="submit" class ="btn btn-danger">Delete</button>
</form>
</div>
</div>
<% }) %>
</div>
</body>추가된 (여기) 를 보면, 실제 method는 POST로 지정했으나, 앞서 3번에서 선언한
_method로 인해 실제로는 DELETE 요청이 지정되었다.
삭제 버튼을 클릭하면 게시글들이 사라진다.
다음 포스팅에서는 게시글의 markdown 에 입력한 마크다운을 실제로 마크다운으로 인식하고,
HTML로 렌더링해주는 기능을 구현해보자.
