forum-express : log 4

글 수정 기능과 삭제 기능을 구현해보자. 이때 method-override와 ajax-fetch를 사용하여 PUT/DELETE 요청을 구현한다.

RESTful한 API를 만들기 위한 method-override & 글 수정 기능 구현

form 태그에서 method 속성은 일반적으로 GET/POST만 사용 가능
npm에서 method-override를 다운로드 받아 method를 POST로 유지한 채 url parameter를 통해 PUT으로 요청할 수 있게끔 하자.
document의 고유 id를 input에 숨겨 PUT요청 시에 데이터를 전송할 수 있도록 하자.
```

...
```

<form action="/edit?_method=PUT" method="POST" class="form-box"> 
    <h4>글 수정</h4>

    <!--유저가 id 보내주기-->
    <input id="id" name="id" value="<%= 글._id %>" style="display:none">

    <input id="writetitle" name="title" value="<%= 글.title %>">
    <input id="writecontent" name="content" value="<%= 글.content %>">
    <input type="hidden" name="_method" value="PUT"/>
    <button type="submit">수정하기</button>
</form>


```javascript
// server.js
app.get('/edit', async(요청, 응답) => {
    let posting = await db.collection('post').findOne({_id : new ObjectId(요청.query.id)});
    console.log(요청.query.id); 

    응답.render('edit.ejs', {글 : posting});
});

// 서버에 없는 정보일 때 대처 : 유저에게 보내라고 하거나 or db에서 읽거나
app.put('/edit', async(요청, 응답) => {
  console.log (요청.body);
  try {
    if (요청.body.title == '' || 요청.body.content == '') {
      응답.send("<script>alert('제목이나 내용이 존재하지 않습니다.');</script>");
    } 
    else {
      await db.collection('post').updateOne({_id : new ObjectId(요청.body.id) }, {$set : {title : 요청.body.title, content : 요청.body.content}});
      응답.redirect('/list');
    }
  } catch (err) {
    응답.status(500).send('server error occurred');
  }
});

ajax-fetch를 이용해 DELETE & 글 삭제 기능 구현

시나리오

/detail?id=~~~에 있는 삭제 버튼을 누른다
서버는 그 글이 db에 있는지를 확인한다
- 없다 -> /list로 복귀
- 있다 -> 삭제

ajax를 쓰는 이유 : a태그나 form태그로 GET/POST/PUT을 하면 새로고침이 되는데, 이게 싫을 때
detail.ejs 안에 script 태그 안을 삭제 버튼 fetch 함수로 채운 후에 method를 DELETE로 하여 요청하자

<!-- detail.ejs -->
 <button type="button" class="btn btn-outline-danger" id="delete">삭제하기</button>

        <!--부트스트랩-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
        </script>

        <script>
            // btn이라는 클래스 안에 btn-outline-danger라는 클래스를 가진 요소들 중 첫번째 요소가 만약 클릭이 되었을 경우 함수에 있는걸 실행해라
            document.querySelectorAll('#delete')[0].addEventListener('click', () => {
                // 여기에 ajax 문법
                // fetch(URL) : 서버로 URL로 요청 날려줌 (이때 새로고침 없이 요청해줌)
                // method에 get인지 post인지 put인지 delete인지 설정 가능
                fetch('/delete?id=' + '<%= 글._id %>', {
                    method : 'DELETE'
                })
            });
        </script>
...

// server.js

app.delete('/delete', async(요청, 응답) => {
  let posting = await db.collection('post').findOne({_id : new ObjectId(요청.query.id)});

  console.log(posting)

  if (posting != null) {
    const confirmDelete = true;

    if (confirmDelete == true) {
      await db.collection('post').deleteOne({_id : new ObjectId(요청.query.id)});
      응답.send("<script>alert('삭제되었습니다.');</script>");
    }

    else {
      응답.redirect('/detail/' + 요청.query.id);
    }
  }

  else {
    응답.send("<script>alert('해당하는 게시물이 없습니다.'); window.location.replace('/list');</script>");
  }
});

lky473736 / forum-express

forum-express : log 4 #5

forum-express : log 4

RESTful한 API를 만들기 위한 method-override & 글 수정 기능 구현

ajax-fetch를 이용해 DELETE & 글 삭제 기능 구현

서버로 데이터를 전송하는 방법