[Node+MongoDB]글 수정기능 만들기 1

🤔글 수정 기능 만들기

1. 수정 버튼 클릭하면 수정 페이지로 이동
2. 수정페이지에는 기존 글이 채워져있음
3. 전송 버튼 클릭하면 입력한 내용으로 DB에 글 수정

✨1. 수정 버튼 클릭하면 수정 페이지로

1. 우선 글 list가 나와있는 list.ejs파일에 글 수정을 할 수 있도록 수정 페이지로 이동할 수 있는 버튼으로 a태그를 하나 넣어준다.
   

<a href="/edit/<%= 글목록[i]._id %>">✏️</a>

a태그에 감싸진 ✏️ 모양 이모지를 누르면 edit페이지로 이동할 수 있도록 만들어 준 뒤

2. 서버파일server.js로 돌아가서 /edit으로 접속하는 겨우 수정 페이지를 보내주기 위해 get 메소드 추가

app.get("/edit/:id", async (요청, 응답) => {
  응답.render('edit.ejs')
});

✨2. 수정페이지에 기존 글 채우기

1. 게시글을 보여주기 위해 views폴더 내에 새로운 ejs파일 하나를 생성하였음
   edit.ejs
   
   글 작성 페이지와 유사하지만,
   글 수정 페이지의 경우 input에 기존 글이 미리 채워져있어야 하는데 이 경우 value속성을 위처럼 추가하고

2. 다시 server.js 페이지로 돌아와 값을 넘겨주기 위한 코드를 작성해주기 위해 글 상세 페이지를 만들었던 기억을 되살려서..
   db.collection('collection명').findOne({데이터});를 활용해보자.
   그러면 detail 페이지 만들 때와 때와 동일하게
   db.collection('post').findOne({_id: new ObjectId(요청.params.id)}); 이렇게 .params를 활용하여 선택한 게시글의 id값을 받아오고, 해당 값을 result 변수에 넣어 ejs파일로 넘겨준다.
   

3. 데이터를 ejs파일로 넘겨줬으니 다시 edit.ejs로 돌아와서 value에 받아온 데이터를 넣어주자
   

✨3. 전송버튼 클릭하면 서버로 데이터 보내고 서버에서 확인 후 DB 내용 수정

데이터 수정을 위해서는 updateOne()을 사용한다.

db.collection('post').updateOne({어떤 document인지}, {$set : {수정할 데이터}})

1. 그럼 수정할 데이터부터 보자

      $set: {
        title: '새로운 글 제목',
        content: '새로운 글 내용',
      },

이렇게 작성하면 되는데, 요청.body를 사용하면 작성한 데이터를 가져올 수 있으니

      $set: {
        title: 요청.body.title,
        content: 요청.body.content,
      },

이렇게 넣어준 다음 updateOne()부분도 살펴보면
내가 수정하고 싶은 document 정보를 넣어주면 되는데, 서버 입장에서 알 방법이 없으니 유저가 글을 수정할 때 고유한 id값을 함께 받아오게 할 수 있도록 만들어주면 된다.

2. 그럼 edit.ejs파일을 보며 코드를 추가해주자
   

input태그에 id값을 받아올 수 있도록 해당 코드를 추가하고, 혹시 유저가 멋대로 id값을 바꿀 수 있으니 display : none을 추가하여 화면에서 우선적으로 보이지 않도록 처리 후에 server.js로 돌아가서 편안하게 id를 받아오자~~!

3. 잘 동작하는지 확인해보고 이후에 예외처리도 해주기!
   

이후 작성했던 예외처리들을 추가한 코드

개발자 모드 켜서 id값의 value를 없애버리거나.. 수정하거나.. 제목이나 내용 입력 없이 그냥 수정을 누르려 한다거나 하는 때에 필요할 것 같아 추가하였다.

app.post("/edit", async (요청, 응답) => {
  try {
    let result = await db
      .collection("post")
      .updateOne(
        { _id: new ObjectId(요청.body.id) },
        { $set: { title: 요청.body.title, content: 요청.body.content } }
      );

    console.log(result);

    if (요청.body.title == "" || 요청.body.content == "") {
      응답.status(400).send("빈칸을 채워주세요.");
    }

    응답.redirect("/list");
  } catch (e) {
    console.log(e);
    응답.status.send("잘못된 요청입니다.");
  }
});