#3. 리뷰 수정 기능 구현

리뷰 수정 페이지

리뷰 수정 페이지에서는 다음과 같은 기능들이 필요하다

 

1) 리뷰 수정 페이지를 렌더링해줄 때, 작성한 글 까지 같이 불러와 렌더링해준다

2) 그리고 작성한 내용을 인풋칸에 value로 넣어준다

3) 비밀번호를 입력하지 않았다면, 입력하도록 alert창을 띄워준다

4) 입력한 비밀번호가 틀렸다면, 비밀번호가 틀렸다는 alert창을 띄워준다

5) 비밀번호가 맞고, 수정할 내용을 모두 입력한 경우에만 수정한 내용을 저장한다.

 

우선 수정페이지를 어떻게 백엔드에서 렌더링하는지 살펴본다.

// 수정페이지 : 상세페이지에서 수정 버튼을 누르면 글을 수정할 수 있는 페이지로 이동
app.get('/update/:id', (req,res)=>{
    review = Reviews.findOne({_id: req.params.id}, (error, result)=>{
        if (error) return console.log(error);
        res.render('update.ejs', {review : result});
    })
})

리뷰 별로 부여된 id값을 파라미터로 받아서, 이에 해당되는 리뷰를 컬렉션에서 뽑아온다. 이 때의 id는 mongoDB 자체적으로 부여된 object id를 사용한다.

 

이후 프론트엔드에서 수정한 내용을 전송하는 부분을 살펴본다.

<script>
            function submitUpdate() {
                // 입력된 정보 받아오기
                let title = $("#title").val();
                let username = $("#username").val();
                let confirm_password = $("#confirm_password").val();
                let content = $("#exampleFormControlTextarea1").val();
                let musicUrl = $("#basic-url").val();

                // 리뷰수정을 위한 정보들을 다 입력했는지 확인
                if (!title || !username || !confirm_password || !content || !musicUrl) {
                    alert("모든 정보를 입력해주세요!");
                    return false;
                }

                // 정보가 다 있다면 api에 POST요청 보내기
                $.ajax({
                    type: "POST",
                    url: "/api/update/<%= review._id %>",
                    data: {
                        username: username,
                        confirm_password: confirm_password,
                        title: title,
                        content: content,
                        musicUrl: musicUrl
                    },
                    success: function (response) {
                        alert(response['message']);
                        location.href = '/detail/<%= review._id %>';
                    },
                    error: function(error){
                        alert("비밀번호가 틀렸습니다");
                        location.relode();
                    }
                })
            }
</script>

수정페이지의 input칸에서 입력한 값들이 다 입력되어 있는지 검사한뒤, 입력되었다면, 백엔드로 post요청을 보낸다. 입력한 비밀번호가 맞다면, 저장한 뒤, 다시 상세페이지로 렌더링해주고, 틀렸다면 에러메시지를 띄운 뒤, 페이지를 새로고침 해준다. 이제 백엔드에서의 코드를 리뷰해보자.

 

// 작성한 글을 수정하는 기능. 기존의 저장된 비밀번호와 같은 값을 입력한 경우에만 글을 수정할 수 있음
router.post('/update/:id', async(req, res)=>{
  const { username, confirm_password, title, content, musicUrl } = req.body;
  original_review = await Reviews.findOne({_id:req.params.id})

  if (original_review.password == confirm_password){
    await Reviews.updateOne({_id:req.params.id}, {$set:{username:username, password:confirm_password, title:title, content:content, musicUrl:musicUrl}},function(error,result){
      if (error){
        console.log(error);
      }else{
        res.status(200).send({message: "수정완료"})
      }
    })
  }else {
    res.status(400).send({message:"비밀번호가 틀렸습니다"})
  } 
}) 

그다지 어려운 로직은 없다. request의 body에서 수정한 내용들을 꺼내서 저장한 뒤, 수정한 내용의 원본에 해당하는 리뷰를 찾는다. 이 후 수정페이지에서 입력한 비밀번호와, 원본 리뷰의 비밀번호가 동일한 지 체크한 뒤에, 동일하다면, 비밀번호와 아이디를 제외한 나머지 항목들을 업데이트 해준다. 이후 http status code를 활용해, 수정이 성공한 경우, 그리고 비밀번호가 틀려서 수정이 실패한 각각의 케이스에 대한 response를 보내준다.