#23 글 수정 기능2 - DB 데이터 수정 / redirect

● PUT 요청시 게시물 수정 코드

(views/edit.ejs)
<form action="/edit?_method=PUT" method="POST">
    <div class="form-group">
        <label>오늘의 할일</label>
        <input type="text" class="form-control" name="title" value="<%= post.title %>">
    </div>
    <div class="form-group">
        <label>날짜</label>
        <input type="text" class="form-control" name="date" value="<%= post.date %>">
    </div>
    <button type="submit" class="btn btn-outline-secondary">Submit</button>
</form>

- edit.ejs의 <form> 태그를 위와 같이 수정했다.
- action 속성을 위와 같이 지정하면 /edit 경로로 PUT 요청이 가능해진다.
- server.js는 /edit 경로로 PUT 요청을 했을 때의 코드를 아래와 같이 작성하면 된다.

cf) (method="POST") 속성 자체는 없어도 되지 않을까 해서 지운채로 update를 실행해봤는데 되지 않았다. 반드시 있어햐 하는 듯

(server.js --> app.put에 주목하자)
app.put('/edit', function(req, res){
  db.collection('post').updateOne( {_id : ??}, {$set : { title : ??, date : ?? }}, function() {
    console.log('수정완료');
  });
});

- mongoDB에서 DB 데이터 수정시 사용하는 function은 updateOne function이다.
- updateOne(업데이트할게시물찾기, 수정내용, 콜백함수)를 차례대로 넣어주면 된다.
- 수정내용은 $set operator를 사용하면 된다.(기존 값 수정 or 추가)
- 콜백함수에는 update 완료시 실행할 코드 작성

---

● ?? 채우기

(server.js)
app.put('/edit', function(req, res){
  db.collection('post').updateOne( {_id : ??}, {$set : { title : ??, date : ?? }}, function() {
    console.log('수정완료');
  });
});

- 위의 코드에서 ?? 부분을 채워보자

- 현재 edit.ejs에서 title과 date 부분은 <input>의 value 속성를 이용해 가져올 수 있는데 _id 부분은 따로 매핑해주는 부분이 없는 상태이다.    cf) _id = 사용자가 수정 요청한 글 번호

- 따라서 _id를 매핑해주는 부분을 하나 만들어야한다.

(views/edit.ejs)
<form action="/edit?_method=PUT" method="POST">
    <div class="form-group">
        <label>오늘의 할일</label>
        <input type="text" class="form-control" name="title" value="<%= post.title %>">
    </div>
    <div class="form-group">
        <label>날짜</label>
        <input type="text" class="form-control" name="date" value="<%= post.date %>">
    </div>
    <input type="hidden" name="_id" value="<%= post._id %>">
    <button type="submit" class="btn btn-outline-secondary">Submit</button>
</form>

--> <input type="hidden" name="_id" value="<%= post._id %>"> 를 추가했다.

- <form> 태그 안에 숨겨진 <input type="hidden"...> 태그를 추가했다.
- edit.ejs에서 Submit 버튼을 누르면 <input>의 value들이 전부 <form>으로 전송되는데 이때 함께 전송될 id용 <input>을 하나 더 추가한 것이다.
- 당연히 해당 <input>에는 사용자가 수정 요청을 하는 게시물의 _id를 넣어주어야한다.
- 앞으로는 3개(title, date, id)의 <input> 데이터가 서버로 전송될 것이다.
- server.js는 아래와 같이 수정하면 된다.

(server.js) 
app.put('/edit', (req, res) => {
    // DB 게시글 데이터 수정
    let updateObj = {
        title : req.body.title,
        date : req.body.date
    }
    db.collection('post').updateOne({_id : parseInt(req.body._id)}, {$set : updateObj}, (error, result) => {
        console.log("수정완료");
    });
});

1. 사용자가 /edit 으로 PUT 요청(수정 요청)을 하면
2. post collection에 있는 {_id : parseInt(req.body.id)} 게시물을 찾아 {title : req.body.title , date : req.body.date}로 update 

cf1) <form> 전송 시 서버에서는 req.body._id 와 같은 식으로 값을 꺼낼 수 있다.(_id는 <input>에 부여한 name 속성의 값)
cf2) parseInt를 까먹지 말자!

---

● 수정요청(완료) 후 페이지가 멈추는 이유

- 수정요청 후 update가 무사히 되어도 update 된 정보를 바로 볼 수 없고 페이지도 멈춰버린 상태가 된다.

- 페이지가 멈추는 이유는 응답을 안해서 그렇다.

- update 후 응답을 안해주면 브라우저가 멈춰버리니 성공 / 실패 여부와 상관없이 응답을 해줘야한다.

- 이를 위해 res.redirect() 를 추가해줘야한다.

(server.js)
app.put('/edit', (req, res) => {
    // DB 게시글 데이터 수정
    let updateObj = {
        title : req.body.title,
        date : req.body.date
    }
    db.collection('post').updateOne({_id : parseInt(req.body._id)}, {$set : updateObj}, (error, result) => {
        // 게시글 목록 화면으로 redirect
        // res.redirect('/list');

        // 수정한 게시글 상세 화면으로 redirect
        res.redirect(`/edit/${req.body._id}`);
    });
});

---

● HTML의 "data-" 접두사 속성을 사용하지 않은 이유

<input type="hidden" name="_id" value="<%= post._id %>">

- 왜 HTML의 "data-" 접두사 속성을 사용하지 않고 귀찮게 보이지도 않는 _id용 <input>을 추가한 것일까?

- 그것은 "data-" 접두사를 이용해 넣어준 값은 프론트 단의 javascript에서만 꺼낼 수 있기 때문이다.

- 즉, <form> 태그 없이 아래와 같은 ajax 코드를 이용했다면 <input>이 아니라 간단하게 event.target.dataset.id 같은 방법을 이용했을 것이다.

<script>
    $('.update').click(function(event) {
        $.ajax({
            method : 'PUT',
            url : '/edit',
            data : {
                _id : event.target.dataset.id,
                title : ~~~~,
                date : ~~~~,
            }
        })
        .done((result) => {
            console.log(result);
        });
    });
</script>

- server.js에서는 event.target.dataset.id 를 이용해 값을 꺼낼 수 없으므로 <input type="hidden"...> 태그를 추가한 것이다.

 

2023.04.28 - [Node.js+MongoDB] - #18 AJAX로 삭제하기2(서버), HTML5 data-xxx 속성

#18 AJAX로 삭제하기2(서버), HTML5 data-xxx 속성