작성한 글을 수정하는 기능을 만들자!
우선 수정 페이지를 만들어야 한다
- 글마다 있는 수정버튼 누르면 글수정할 수 있는 페이지로 이동
- 그 페이지엔 글의 제목과 내용이 이미 폼에 채워져있어야 한다
- 전송누르면 그걸로 기존에 있던 document를 수정
🖤 1. 글마다 있는 수정버튼 누르면 글 수정페이지 이동
◾ list 페이지에 수정 버튼 추가
페이지를 이동시키기 위해서는 a 태그를 만들고, href 로 경로 지정을 해주면 된다
나는 글 제목 옆에 수정 링크를 추가했다
<a href="/edit">✏️</a>◾ server.js에서 get 요청하기
첫번째글은 /edit/1 , 두번째 글은 /edit/2 이런식으로 이동해야 한다
( 해당 글의 정보를 가져와야하기 때문 )
어떤 방법을 써야할까?
➡ URL 파라미터 !
app.get('/edit/:id', (요청, 응답) => {
응답.render('edit.ejs')
})그럼 위의 a태그 경로도 수정해야할 듯 하다
<a href="/edit/<%= lists[i]._id%>">✏️</a>◾ edit.ejs 생성
글 작성 페이지와 동일한 레이아웃을 사용하기 (그게 익숙한 사용자 경험이다)
<body class="grey-bg">
<%- include('nav.ejs') %>
<form class="form-box" action="/edit" method="POST">
<h4>수정하기</h4>
<input name="id" value="<%= list._id%>" style="display: none;">
<label> 제목 </label>
<input type="text" name="title" value="<%= list.title%>">
<label> 내용 </label>
<input type="text" name="content" value="<%= list.content%>" >
<button type="submit">완료</button>
</form>
</body> 🖤 2. 수정 페이지엔 글의 제목과 내용이 이미 폼에 채워져 있어야 한다
◾ DB에서 해당 post 정보 꺼내오기
edit.ejs를 보내줄 때(render) 내용을 DB에서 꺼내서 ejs 에 박아주는 방식으로 구현
app.get('/edit/:id', async(req,res)=>{
let result= await db.collection('post').findOne({_id: new ObjectId(req.params.id)})
res.render('edit.ejs',{list:result})
})
findOne을 사용하여 DB의 post 컬렉션에 존재하는 document들 중 _id 가 param에 해당하는 것을 찾기
◾ input 박스에 데이터 넣어놓기
input 박스에 값을 미리 입력해두기 위해 사용하는 input 태그 속성은 value 이다
<input name="title" value="<%= result.title %>">
<input name="content" value="<%= result.content %>">* result 같은 변수의 경우는 미리 사용전 출력해보는 것도 좋은 습관이다!
🖤 3. 전송누르면 그걸로 기존에 있던 document를 수정
◾ 수정페이지의 form 태그 action 설정
전송을 클릭하면 서버로 글을 전송하게 한다
method 는 post, url은 POST
◾ sever.js에서 update set를 사용하여 수정하기
db.collection('post').updateOne( { a : 1 }, {$set: { a : 2 }})
위의 문법은 a:1인 documnet를 찾아서 a를 2로 수정하는 문법이다
이를 적용하여 아래처럼 코드를 작성할 수 있다
documemt 1개 수정은 updateOne()
document 여러개 수정은 updateMany()
이제 edit 페이지에서 전송 버튼을 누르면 서버로 글을 전송하고,
서버는 그걸 검사하고 DB에 있던 내용을 수정해야한다
app.post('/edit', async(req,res)=>{
// //req.body : 유저가 input에 입력한 값이 객체로{title:, content:} 들어있음
await db.collection('post').updateOne({_id: new ObjectId(req.body.id)},{$set :{title:req.body.title,content:req.body.content}})
res.redirect('/list')
})
req.body 는 유저가 input 에 입력 한 값이 들어 있는 곳인데 id의 input 이 없기 때문에 가져올 수 없다
👌 그렇다면 id input 만들고 숨기기!
<input name="id"value="<%= result._id %>">🖤 method override 란?
form 태그에서는 get, post 요청만 가능하지만 put, delete를 사용할 수 있는 방법이 있다
AJAX를 쓰거나 method를 강제로 변경해주는 라이브러리를 쓰기
➡ 후자인 method override를 사용해보겠다!
라이브러리 설치해주고
npm install method-override 서버 상단에 코드 추가해주고
const methodOverride = require('method-override')
app.use(methodOverride('_method')) form 태그에서 원하는 요청 날리기!
<form action="/edit?_method=PUT" method="POST"> </form>method="POST" 는 수정 금지!
이제 서버에서도 app.put 을 사용하여 put 요청을 수신할 수 있다
