nodejs express CRUD 만들기 3(UPDATE)

Node.js

nodejs express CRUD 만들기 3(UPDATE)

간카레 2024. 8. 6. 19:18

SMALL

edit.ejs파일을 하나 생성하였다.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>게시물 리스트</title>
    <link rel="stylesheet" href="/main.css" />
  </head>
  <body class="grey-bg">
    <%- include('nav.ejs') %>

    <form class="form-box" action="/edit?_method=PUT" method="POST">
      <h4>수정하기</h4>
      <input
        type="text"
        name="_id"
        value="<%= result._id %>"
        style="display: none" />
      <input name="title" value="<%= result.title %>" />
      <input name="content" value="<%= result.content %>" />
      <button type="submit">전송</button>
    </form>
  </body>
</html>

db에 클릭한 게시물의 정보를 요청하는 서버코드
결과적으로 클릭한 게시물의 id와 같은 데이터를 가지고 왔고,
post안에는 _id, title, content가 들어있다.그 이후 PUT요청을 할 것인데, form태그는 기본적으로 POST와 GET요청만 할 수 있다.
POST를 이용해도 기능은 동작하게 할 수 있지만,
요즘(?)은 아니지만,
REST API라던가 RESTful API에 맞게 하려면 수정 동작을 할 것이기 때문에 PUT요청을 날려야 한다.
이 때, method-override라는 것을 사용한다.
라이브러리인데, 설치하면 된다. npm i method-override
app.get('/edit/:id', async (req, res) => { try { const postId = req.params.id; const post = await db.collection('post').findOne({ _id: new ObjectId(postId) }); if (post) { res.render('edit', { result: post, }); } else { res.status(404).send('게시물을 찾을 수 없습니다.'); } } catch (err) { console.log('데이터베이스 오류:', err); res.status(500).send('서버 오류'); } });

그리고 서버 파일 상단에 app.use(methodOverride('_method'))를 추가한다.
여기서 app은 express()이다
express()는 express라이브러리에서 가지고 왔다.

그래서 값을 아래와 같이 변경했다.(method-override를 이용해서 사용이 가능해졌다)
<form class="form-box" action="/edit?_method=PUT" method="POST">
이렇게 하면 서버에 put요청을 날릴 수 있게되고,
아래와 같은 서버 코드를 작성할 수 있다.

수정 페이지 put요청을 받는 서버코드
post요청과 동일하게 req.body안에 ejs파일에서 넘겨준 title과 content가 들어있다.
db에서 해당하는 collection을 연결 후 document 하나를 업데이트 한다.
```
app.put('/edit', async (req, res) => {
await db
  .collection('post')
  .updateOne(
    { _id: new ObjectId(req.body._id) },
    { $set: { title: req.body.title, content: req.body.content } }
  );
res.redirect('/list');
});
```

LIST