Next.js 블로그 글 수정 기능 만들기 (6)

블로그 글 수정 기능 만들기

안녕하세요! 오늘은 웹사이트에 글 수정 기능을 어떻게 만드는지에 대해 알아보려고 합니다.

 

1단계: 수정 버튼 만들기

먼저, 각 게시글마다 수정 버튼을 만들어봅시다. 이 버튼은 사용자가 클릭하면 해당 게시글의 수정 페이지로 이동해야 합니다. 이 때, URL은 '/edit/게시물id' 형식으로 만들어져야 합니다. 이렇게 하면 URL을 통해 어떤 게시글을 수정하는지 알 수 있습니다.

 

 

2단계: 수정 페이지 만들기

다음으로 수정 페이지를 만들어봅시다. 이 페이지는 기본적으로 게시글 작성 페이지와 비슷하게 만들어져야 합니다. 하지만, 이 경우에는 이미 작성된 게시글의 내용을 DB에서 가져와서 보여주어야 합니다. 이를 위해, 페이지가 로드될 때 DB에서 해당 게시물의 내용을 가져와서 input 필드에 넣어주는 작업을 수행해야 합니다.

//javascript
import { ObjectId } from "mongodb";
import { connectDB } from "@/util/database.js"

export default async function Edit(props) {
  let db = (await connectDB).db('forum')
  let result = await db.collection('post').findOne({_id : ObjectId(props.params.id)});
  return (
    <div className="write">
      <form action="/api/post/edit" method="POST">
        <input name="title" defaultValue={result.title} />
        <input name="content" defaultValue={result.content} />
        <button type="submit">전송</button>
      </form>
    </div>
  )
}

위 코드는 수정 페이지를 만드는 예시입니다. 여기서는 MongoDB에서 해당 게시물의 내용을 가져와서 input 필드에 넣어주는 작업을 수행하고 있습니다.

 

 

3단계: MongoDB 데이터 수정하기

이제 사용자가 수정을 완료하고 '전송' 버튼을 누르면, DB에 있는 해당 게시물의 내용이 사용자가 입력한 내용으로 바뀌어야 합니다. 이를 위해, MongoDB의 'updateOne' 함수를 사용합니다. 이 함수는 첫 번째 인자로 수정할 게시물의 정보를, 두 번째 인자로 수정할 내용을 받습니다.

//javascript
import { connectDB } from "@/util/database.js"
import { ObjectId } from "mongodb";

export default async function handler(요청, 응답) {
  if (요청.method == 'POST'){

    let 바꿀거 = {title : 요청.body.title, content : 요청.body.content}
    let db = (await connectDB).db('forum')
    let result = await db.collection('post').updateOne(
      {_id : new ObjectId(요청.body._id)}, 
      { $set : 바꿀거} 
    );
    console.log(result)

    응답.redirect(302, '/list')
  }
}

위 코드는 서버에서 DB를 수정하는 작업을 수행하는 예시입니다. 사용자가 '전송' 버튼을 누르면, 서버는 DB 수정을 요청하고, MongoDB의 'updateOne' 함수를 사용하여 DB를 수정합니다.

이상으로 글 수정 기능 만드는 방법에 대해 알아보았습니다. 이 과정을 통해 사용자가 원하는 대로 게시글을 수정할 수 있게 만들 수 있습니다. 다만, 사용자가 DB 데이터를 직접 수정하지 않도록 주의해야 합니다. 필요한 데이터가 없는 경우에는 사용자에게 데이터를 보내달라고 요청하거나, DB에서 데이터를 직접 가져와야 합니다. 이렇게 해서 안전하고 효율적인 글 수정 기능을 만들 수 있습니다.