📕 글 수정 기능 1

수정할 페이지 만들기

수정 기능을 구현하는 방법은 여러가지인데 가장 쉬운 방법이 edit 페이지를 따로 만드는 것이다.
쉽게 edit.ejs 페이지를 새로 만든다.

(views/edit.ejs)

안에 들어갈 내용은 그냥 write.ejs에 있던 모든 코드 복붙

파일 새로 만들고 복붙하면 끝.
다만 새로운 점은 input 태그 안에 value 속성을 넣는 것이다.

<input type="text" value="111111">

이렇게 value 태그를 넣으면 input 태그에 미리 수정할 내용이 작성되어 있어서 좋다.
추후에 DB랑 연동시켜 value를 변경해볼것임
그전에 서버를 만져보자

(server.js)

app.get('/edit', function(요청, 응답){
  응답.render('edit.ejs')
});

사용자가 /edit으로 접속할 경우 edit.ejs 파일을 보내고 렌더링해준다.
이제 각 게시물에 맞게 데이터가 들어오도록 수정해보자.

(server.js)

app.get('/edit/:id', function(요청, 응답){
  db.collection('post').findOne({ _id : parseInt(요청.params.id) }, function(에러, 결과){
    응답.render('edit.ejs', { post : 결과 })
  })
  
});

저번에 배웠던 URL parameter 활용하면 된다.
넘겨받은 파라미터는 요청.params.id로 받아서 쓰면 되는데 반드시 parseInt 정수 변환하는거 까먹지 말기.
이제 어떤 사람이 /edit/4로 접속하면 {_id : 4}인 게시물을 찾고, 그 결과를 edit.ejs에 보내주게된다.

이제 아까 input value를 수정해보자.

<div class="form-group">
    <label for="formGroupExampleInput">오늘의 할일</label>
    <input value="<%= post.제목 %>" name="title" type="text" class="form-control" id="formGroupExampleInput">
</div>
<div class="form-group">
    <label for="formGroupExampleInput">Due date</label>
    <input value="<%= post.날짜 %>" name="date" type="text" class="form-control" id="formGroupExampleInput">
</div>

<%= 변수 %> EJS문법을 사용해서 파라미터에 맞는 데이터가 들어오게 개발했다.
저번에 했던거 복습하는 차원의 강의임

PUT 요청하기

이제 본격적인 글 수정 기능을 만들자.
서버에 요청할 수 있는 방법은 4가지라고 배웠다.
GET POST PUT DELETE.
이 4개 중에 수정할 땐 PUT 요청을 쓰면 좋다.
하지만 HTML method는 GET, POST만 받는다.
해결책으론

1. DELETE 강의처럼 AJAX를 쓰는 것
2. 라이브러리를 통해 PUT 요청하기

두가지가 있는데 2번째 방법을 사용해보자.

method-override

method-override는 form 태그에서 PUT 요청을 가능하게 해주는 라이브러리다.
터미널에 설치해보자.

npm install method-override

설치를 완료했으면 사용 셋팅을 해주기 위해 server.js 상단으로 이동한다.

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

const와 app.use가 모여있는 곳에 이 두줄을 넣어서 적당히 등록해주자.
이제 form 태그에서 PUT 요청을 할 수 있다.

(edit.ejs)

<form action="/edit?_method=PUT" method="POST">
  <input 어쩌구>
</form>

이러면 이제 /edit 경로로 PUT요청을 해준다.
기존의 POST method를 내가 설정한 PUT method로 변경시켜버리는 라이브러리다.
/경로?_method=PUT 을 기억해두자!

이제 PUT 요청을 받으면 DB 게시물을 수정해주는 서버코드만 짜면 된다.

📗 글 수정 기능 2

DB 데이터 수정하기

app.put()

요청받는 서버코드를 짜보자.

(server.js)

app.put('/edit', function(요청, 응답){
  DB 데이터를 수정해주세요
});

대충 이런 느낌으로 개발하면 되겠다.
put 요청 했으니 app.put 해주고 새로 들어온 데이터로 DB데이터를 updateOne() 해주자.

updateOne()

(server.js)

app.put('/edit', function(요청, 응답){
  db.collection('post').updateOne( {_id : ??}, {$set : { 제목 : ??, 날짜 : ?? }}, function(){
    console.log('수정완료')
  });
});

updateOne()함수 사용법이다.
updateOne( 1.업데이트할게시물찾기, 2.수정할내용, 3.콜백함수)

1. 업데이트할 게시물을 찾으려면 기존 게시물의 _id같은걸 작성해준다.
2. 게시물을 업데이트하려면 $set 같은 operator를 사용해서 기존 값을 수정/추가 해준다.
3. 콜백함수는 업데이트 완료시 실행할 코드를 적는다.

단계별로 개발하면 됨.
근데 유저가 수정요청한 글번호 라는게 없다.
하나 만들어주자.

(edit.ejs)

<form action="/edit?_method=PUT" method="POST">
  <input value="<%= post._id %>" name="id" style="display : none">
  나머지 어쩌구~
</form>

edit 페이지에서 전송버튼을 누르면 해당 form 태그 내부 input의 value들이 전부 폼으로 전송되는데,
이때 함께 전송될 input을 하나 만들어준다.
그 input에는 사용자가 수정요청하는 게시물의 _id를 적어주면 된다.
그러면 이제 총 3개의 input 데이터가 서버로 전송된다. (제목, 날짜, id)

서버는 전송된 input 데이터들을 어떻게 알 수 있냐면,

(server.js)

app.put('/edit', function(요청, 응답){
  db.collection('post').updateOne( {_id : 요청.body.id }, {$set : { 제목 : 요청.body.title , 날짜 : 요청.body.date }}, function(){
    
    console.log('수정완료')
  
  });
});

요청.body.input의name속성으로 분별할 수 있다.
사용자가 폼전송시 함께 요청한 id를 요청.body.id 이런 식으로 꺼내쓰면 됨.(id라는 단어는 input에 부여한 name 속성)

위 코드를 풀이하자면,

1. 사용자가 /edit으로 PUT요청을 하면
2. post라는 콜렉션에 있는 {_id : 요청.body.id } 데이터를 찾아서 { 제목 : 요청.body.title , 날짜 : 요청.body.date } 로 바꾸기

가 된다.
그리고 최종 마무리 단계로 parseInt()와 redirect() 해준다!

(server.js) 

app.put('/edit', function(요청, 응답){ 
  db.collection('post').updateOne( {_id : parseInt(요청.body.id) }, {$set : { 제목 : 요청.body.title , 날짜 : 요청.body.date }}, 
    function(){ 
    
    console.log('수정완료') 
    응답.redirect('/list') 
  }); 
}); 

응답을 안할 경우 브라우저가 멈출 수 있기 때문에 성공이든 실패든 무조건 응답을 해야한다.
put 요청을 받고 DB데이터를 수정했다면 /list 경로로 이동하게 응답.redirect() 걸어줬다.
진짜 끝.