각 게시글마다 수정을 할 수 있는 수정 페이지를 만들려고 한다.
edit.ejs 라는 파일을 만들어준다. 전체적인 폼은 write.ejs 랑 거의 같다.
일단 수정하기 폼에 들어가면 아래와 같이 기존에 들어있던 데이터가 폼에 디폴트 값으로 들어가있어야 한다.
server.js 에 edit/:id 로 접속했을 때 post 라는 collection 에서
url 파라미터로 데이터를 찾아서 result 라고 하고, 이걸 post라는 변수에 넣어서 edit.ejs 에서 쓸 수 있도록 했다.
edit.ejs 파일이다.
아까 server.js 에서 결과로 받아온 데이터들을 post라는 변수에 넣었기 때문에 저런식으로 랜더링 할 수 있다.
여기까지 하면 디폴트 값을 폼에 넣어둘 수 있다.
이제 폼을 전송했을 때 db 가 수정되도록 기능을 만들어보자.
수정요청을 할 때에는 PUT 요청을 쓴다.
하지만 HTML5 로는 PUT 요청을 못한다.
action과 method를 설정할 때에 method에 PUT 을 사용하지 못한다는 의미이다.(DELETE 도 마찬가지)
PUT 요청을 위해선 라이브러리를 하나 설치해야 한다.
method override 를 설치하자
npm install method-override
그리고 server.js 상단에 코드를 추가한다.
edit.ejs 에 method 는 그대로 POST 라고 쓰고 대신에 action 경로에 코드를 조금 추가해줘야 한다.
그럼 put 요청 기능을 만들어보자
updateOne 함수를 사용할 건데,
updateOne( {어떤 게시물을 수정할건지}, {수정할 값}, 콜백함수 )
이런식으로 작성해주면 된다.
app.put 을 작성해줬다. 여기서 update 를 해줄 데이터를 고르는 과정은 edit.ejs 도 필요하다.
edit.ejs 에서 폼을 작성해 전송할 때에 display: none 속성으로 데이터의 id도 보내도록 했다.
그러면 update 를 해줄 때 어떤 데이터를 수정해줄지 id 를 이용해 찾을 수 있으니까.
데이터를 고르고 나면 $set 을 이용해 어떤 값으로 수정할 건지도 작성해준다.
콜백함수의 내용으로는 콘솔창에 수정완료했음을 출력하고, list 화면으로 다시 돌아가기 위해 redirect 를 작성했다.
그러면 edit 페이지에 접속해서 값을 수정해주면 값이 바뀐 것을 확인할 수 있다.
