[NodeJS+Express] 12. 글 수정기능 만들기

이번에는 글을 수정하는 기능을 구현해보자.

 

0. 들어가기전

글을 수정하는 과정을 요약해보면 아래와 같다.

1) 글 마다 존재하는 수정버튼 클릭
2) 수정페이지에서 글 수정 (수정 대상 페이지의 내용이 기입되어있음)
3) 수정완료 버튼 누르면 DB에 데이터 전송 후 수정 완료

 

이러한 과정을 거쳐 구현을 해보자!

 

 

---

1. 수정 기능 만들기

1) 수정 페이지

(1) 서버파일 세팅

수정 페이지에 들어가게 되면 수정 대상인 데이터가 기입되어있다.

 

//server.js
app.get('/edit/:num', async(request, response) => {
  try {
    let result = await db.collection('post').findOne({_id : new ObjectId(request.params.num)})
    response.render('edit.ejs', {result:result});
  } catch (err) {
    response.send("오류!")
  }
})

이를 위해서 /edit의 자식path로 URL파라미터 num을 등록하고

num으로 받은 id를 활용해 데이터를 DB에서 가져와준다.

 

findOne() 함수에 request.params.num을 value로 갖는 객체를 전송하여 원하는 데이터를 반환받고

try, catch로 예외처리를 해주어서 안정성을 높인다!

이후 edit.ejs 파일로 그 결과를 보내준다.

 

 

(2) 수정 버튼 & EJS 파일 생성

각 글의 detail 페이지에 수정 버튼을 생성해준다.

 

예시

//detail.ejs
...
<a class="edit-btn" href="/edit/<%= result._id %>">수정</a>

<% result._id %>를 URL파라미터에 전송해주는 버튼을 제작해주었다.

 

 

 

 

글 수정 기능은 글 쓰기 기능과 매우 유사하기 때문에 write.ejs 템플릿을 활용해 만들어준다.

//edit.ejs
...
<form action="/editpost/<%=result._id%>" method="POST">
  <textarea name="title"><%=result.title%></textarea>
  <textarea name="content"><%=result.content%></textarea>
</form>

위처럼 db의 데이터를 바인딩해준다.

또한 글을 수정해달라는 요청을 보내기 위해서  form 태그의 action 속성에

/editpost/글id 를 넣어주었는데 이에 대한 서버파일 작업을 진행해보자.

 

※ <form> 태그에서는 GET, POST 요청만 가능함.. method-override 등을 활용하면 가능!

 

(3) 글 수정 기능 구현

updateOne({데이터 정보}, {$set : {수정된 데이터} })

글을 수정하기 위해서는 updateOne 함수를 사용할 수 있다.

 

//server.js
app.post('/editpost/:num', async(request, response)=>{
  try{
    await db.collection('post').updateOne({_id : new ObjectId(request.params.num)}, 
    {$set: {title:request.body.title, content:request.body.content}})
    response.redirect(`/detail/${request.params.num}`);
  }
  catch(err){
    response.send("오류!")
  }
})

/editpost의 하위로 들어온 URL파라미터 num에 들어있는 글id를

updateOne({데이터 정보}, {$set : {수정된 데이터}}) 형태에 적용해주면 위와 같다.

함수에 전달된 데이터 정보에 맞는 데이터를 찾아서 두번째 인자의 정보로 덮어씌워준다.

이후 해당 글의 수정사항을 확인하기 위해서 상세페이지로 redirect해주었다!

 

 

 

(4) 안전한 기능 구현위한 예외처리

//server.js
app.post('/editpost/:num', async(request, response)=>{
  try{
    if(request.body.title == ""){
      response.send("제목을 입력해주세요");
    }
    else if(request.body.title.length > 30){
      response.send("제목을 30자 이내로 입력해주세요.");
    }
    await db.collection('post').updateOne({_id : new ObjectId(request.params.num)}, 
    {$set: {title:request.body.title, content:request.body.content}})
    response.redirect(`/detail/${request.params.num}`);
  }
  catch(err){
    response.status(500).send("DB에러");
  }
})

제목을 입력하지 않거나 30자 초과인 경우를 추가로 예외처리 해주었다!