[Node.js / MongoDB] 글 수정 기능 만들기

💡 실습 포인트!

• 글 수정 페이지 HTML 파일을 만들어서, 할일 리스트에서 수정 버튼을 클릭하면 해당 게시글의 글 수정 페이지로 연결되도록 했다.
• 연결된 글 수정 페이지에서는 해당하는 게시물의 데이터를 DB 에서 받아와 input 의 내용으로 보여줄 수 있게 했다.
• 글 수정 페이지에서 내용을 수정한 후 Submit 버튼을 누르면 DB 의 해당 게시물 데이터의 내용이 수정되고, 브라우저에서는 글 수정 페이지에서 할일 리스트 페이지로 넘어가도록 했다.

---

💜 글 수정 페이지(HTML) 만들기

<h4 class="container mt-5">
    <strong>글 수정하기</strong>
    <p class="mt-3" style="font-size: 14px;">글번호 : <%= edit._id %></p>
</h4>
<div class="container mt-4">
  <form action="/edit?_method=PUT" method="POST">
    <div class="form-group my-4">
      <label class="mb-2">할일</label>
      <input type="text" name="id" style="display: none;" value="<%= edit._id %>">
      <input type="text" class="form-control" name="content" value="<%= edit.할일 %>">
    </div>
    <div class="form-group my-4">
      <label class="mb-2">마감일</label>
      <input type="text" class="form-control" name="date"  value="<%= edit.마감일 %>">
    </div>
    <button type="submit" class="btn btn-danger fw-bold">Submit</button>
  </form>
</div>

• 수정 기능을 구현할 수 있는 방법은 다양하지만, 가장 쉬운 방법이 수정 페이지를 따로 만드는 것!
• 따라서, edit.ejs 라는 글 수정 페이지에 해당하는 EJS 파일을 따로 만들었다.
• 전반적인 구조는 글쓰기 페이지와 동일하게 하되, input 태그에 value 속성을 넣고 EJS 문법을 사용하여 미리 해당 게시물의 데이터를 넣어서 보여줄 수 있도록 해주었다.
  (아래의 JavaScript 코드를 보면 알겠지만 해당 데이터는 edit 이라는 변수에 담아서 받아온다.)
• 이제 edit.ejs 에서 Submit 버튼을 클릭하면 수정 요청에 해당하는 PUT 요청을 해주어야 하는데, form 태그 내에서는 POST, GET 두 가지 방식만 지원한다.
• 따라서, DELETE 요청 때처럼 AJAX 를 활용하든지, method-override 라이브러리를 사용하면 된다.
  (method-override 라이브러리 설치방법은 아래에 기재)
• 라이브러리 설치 후에는 form 태그의 수정이 필요하다.
  • action 속성을 /edit?method=PUT 으로 바꾸어주면 /edit 경로로 PUT 요청이 가능해진다.
  • method 부분은 어차피 GET, POST 두 가지 방식만 지원하고 수정하는 기능은 POST 에 가까우므로 POST 로 작성해주었다.

🤍 method-override 라이브러리 설치하기

• 터미널에 npm install method-override 입력하여 method-override 라이브러리 설치하기
• JavaScript 파일 상단에 아래의 코드 추가하기

const methodeOverride = require('method-override');
app.use(methodeOverride('_method'));

 

 

---

💜 GET 요청 JavaScript 코드 짜기

// 누군가가 수정 버튼을 클릭하여 /edit/:id 로 GET 요청을 하면
app.get('/edit/:id', function(req, res){
    // DB 에서 게시글 불러오기
    req.params.id = parseInt(req.params.id);
    db.collection('post').findOne({_id : req.params.id}, function(err, result){
        res.render('edit.ejs', {edit : result});
    })
})

• 우선 경로를 /edit/:id 로 설정해서 누군가가 /edit/ 뒤에 게시물의 _id 를 적어서 GET 요청을 하면 해당하는 게시물의 edit.ejs 페이지를 볼 수 있게끔 해주었다.
• 이전의 블로그 게시글에서 작성한 코드와 설명과 거의 유사해서 더 이상의 설명은 생략한다.

---

💜 PUT 요청 JavaScript 코드 짜기

// 누군가가 폼에서 /edit 으로 PUT 요청을 하면
app.put('/edit', function(req, res){
    // 폼에 기재된 데이터를 db.collection 에 업데이트하기
    req.body.id = parseInt(req.body.id);
    db.collection('post').updateOne({_id : req.body.id}, {$set : {할일: req.body.content, 마감일 : req.body.date}}, function(){
        console.log('게시물 수정 완료');
        res.redirect('/list') 
    })
})

• DB 의 데이터를 수정하려면 .updateOne() 함수를 사용한다.
• .updateOne() 함수는 3개의 파라미터를 필요로 한다.
  • 업데이트할 게시물 : 여기서는 기존 게시물의 _id 를 작성
  • 수정할 내용: 기존 값을 수정할 것이므로 $set 이라는 operator 를 사용
  • 콜백 함수 : 업데이트가 완료되면 실행할 코드를 작성
• 첫번째 파라미터에는 기존 게시물의 _id 가 들어가야 하므로, 게시물 수정 요청할 때 _id 를 같이 보낼 수 있도록 HTML 파일을 수정해준다.
  
  • 글 수정 페이지에서 Submit 버튼을 누르면 모든 input 들의 value 가 전송된다는 점을 이용하여, 게시물의 _id 도 input 에 담아 서버로 전송해준다.
  • 단, 이 input 은 사용자를 위한 부분이 아니므로 display : none 처리를 하여 숨겨주었다.
  • 이제 Submit 버튼을 통해 form 을 전송할 때, 총 3가지 데이터(id, content, date) 가 전송된다.

<input type="text" name="id" style="display: none;" value="<%= edit._id %>">

• JavaScript 파일에서는 전송받은 데이터들(req.body 에 담긴 데이터들)을 가지고 .updateOne() 함수를 구성해주어야 한다.
• 단, 이때에도 req.body.id 는 숫자임에도 문자열로 바뀌어있을 수 있으므로 parseInt() 함수를 통해 숫자로 변환하는 과정이 필요하다.
• 마지막으로, res.redirect('/list') 코드를 통해 업데이트가 완료되었으면 할일 리스트 페이지로 강제이동시켜준다.