[RESTful 라우트] Express 메서드 재정의를 통한 댓글 편집 기능 구현

이번 포스팅에서는 Express의 메서드 재정의를 활용하여 댓글 편집 기능을 구현하는 방법에 대해 알아보겠습니다. 이미 CRUD(Create, Read, Update, Delete)에서 U(Update)에 해당하는 내용은 거의 다 다뤘습니다. 이제 남은 부분은 댓글을 업데이트하는 것인데, 이를 Postman이나 Axios를 이용하여 진행할 수 있습니다. 하지만 댓글을 편집할 수 있는 폼을 만들어 브라우저 상에서도 편집할 수 있도록 해봅시다.

먼저, 클라이언트에서 댓글을 편집할 수 있는 폼을 제공하기 위해 서버에서 해당 댓글을 불러와야 합니다. 이를 위해 라우트를 설정합니다. 클라이언트는 /comments/:id/edit에 GET 요청을 보내면, 해당 댓글의 편집 폼을 제공받게 됩니다.

// 서버 측 코드 (index.js)
app.get('/comments/:id/edit', (req, res) => {
  // 해당 ID를 기반으로 댓글을 찾습니다.
  const comment = comments.find(comment => comment.id === req.params.id);
  // 댓글을 편집할 수 있는 폼으로 이동합니다.
  res.render('comments/edit', { comment });
});

이제 템플릿 엔진(EJS)을 사용하여 실제로 댓글을 편집할 수 있는 폼을 만듭니다.

 

<!-- edit.ejs -->
<h1>Edit</h1>
<form method="POST" action="/comments/<%=comment.id%>?_method=PATCH">
    <textarea name="comment" id="" cols="30" rows="10">
        <%= comment.comment %>
    </textarea>
    <button>Save</button>
</form>

여기서 주의할 점은 HTML 폼은 기본적으로 GET이나 POST 요청만 전송할 수 있다는 것입니다. 하지만 우리는 PUT이나 PATCH, DELETE 요청을 보내야 합니다. 이 문제를 해결하기 위해 Express의 method-override 패키지를 사용합니다.

 

npm i method-override

method-override 패키지 설치

 

// 서버 측 코드 상단에 작성(index.js)
const methodOverride = require('method-override');
app.use(methodOverride('_method'));

이제 브라우저에서 /comments/:id/edit로 이동하면 해당 댓글을 수정할 수 있는 폼이 나타납니다. 댓글을 수정하고 'Save' 버튼을 클릭하면 해당 내용이 업데이트됩니다. 이때, 브라우저에서는 POST 요청을 보내지만, Express에서는 _method라는 특별한 쿼리 매개변수를 통해 해당 요청을 PATCH로 인식하게 됩니다.

기존 Comments

moew *4 로 수정 후 적용

이로써 댓글을 편집하는 부분까지 구현이 완료되었습니다. 다음 글에서는 남은 D(Delete)에 해당하는 내용을 다뤄볼 예정입니다. 계속해서 따라와 주세요! 🚀