Next.js를 활용한 게시글 작성 기능 구현: 서버와 DB 활용하기 (5)

Next.js를 활용한 게시글 작성 기능 구현: 서버와 DB 활용하기

Next.js를 활용하여 웹사이트에서 사용자의 게시글을 작성하고 그 내용을 데이터베이스(DB)에 저장하는 기능을 만드는 과정에 대해 알아보겠습니다. 이 과정은 크게 사용자의 요청을 처리하기 위한 서버 설정, 글 작성 기능의 구현, 그리고 데이터베이스에 데이터를 저장하는 과정으로 나눌 수 있습니다.

 

1. 서버의 필요성

사용자가 DB에 직접 데이터를 저장하거나 가져오게 하면 문제가 발생할 가능성이 높습니다. 예를 들어 사용자가 이상한 데이터를 DB에 저장하거나 민감한 정보를 가져오는 일이 발생할 수 있습니다. 이를 방지하기 위해 사용자의 DB 입출력 요청을 안전하게 대리로 수행하는 '서버'가 필요합니다.

서버는 사용자의 요청을 받아 해당 작업을 수행하고 결과를 반환합니다. 각 서버 기능은 URL과 method(GET, POST, PUT, DELETE 등)로 구분되며, 이를 통해 데이터를 출력, 입력, 수정, 삭제할 수 있습니다.

 

2. Next.js에서 서버 기능 만들기

Next.js에서 서버 기능을 만들기 위해 페이지 폴더 내에 api 폴더를 만들고, 그 안에 js 파일을 생성합니다. 이 파일은 서버 기능의 URL이 됩니다. 이 js 파일에 함수를 하나 넣으면, 이 함수 안의 코드가 사용자의 요청에 따라 실행됩니다. 서버는 요청을 받았으면 응답을 해주는 것이 좋습니다. 이를 위해 응답 코드를 작성합니다.

 

3. 글 작성 기능 만들기

글 작성 기능을 만들기 위해 글을 작성할 수 있는 페이지를 만듭니다. 이 페이지에서 전송 버튼을 누르면 서버에게 글 저장을 요청하는 기능을 추가합니다. 서버는 요청을 받으면 검사를 수행하고, 문제가 없다면 DB에 저장합니다.

//jsx
export default async function Write() {
  return (
    <div className="p-20">
      <form action="/api/post/new" method="POST">
        <input name="title" placeholder="글제목"/>
        <input name="content" placeholder="글내용"/>
        <button type="submit">전송</button>
      </form>
    </div>
  )
}

위 코드는 글 작성 페이지의 예시입니다. <form> 태그를 사용하여 사용자의 입력을 받고, 전송 버튼을 누르면 "/api/post/new" URL로 POST 요청을 보내게 됩니다.

 

4. DB에 데이터 저장하기

서버에서 요청을 받으면, 해당 데이터를 DB에 저장하는 과정이 필요합니다. 이를 위해 MongoDB에서 제공하는 insertOne 메소드를 사용합니다.

//jsx
export default async function handler(요청, 응답) {
  if (요청.method == 'POST'){
    if (요청.body.title == '') {
      return 응답.status(500).json('제목써라')
    }
    try {
      let db = (await connectDB).db('forum')
      let result = db.collection('post').insertOne(요청.body)
      응답.redirect(302, '/list')
    } catch (error) {
      // DB 에러 시 실행할 코드
    }
  }
}

위 코드는 서버에서 데이터를 받아 DB에 저장하는 과정을 보여줍니다. 사용자의 요청이 POST인 경우, 제목이 없으면 에러 메시지를 반환하고, 제목이 있는 경우 DB에 데이터를 저장합니다.

이렇게 Next.js를 활용하여 사용자의 글 작성 요청을 안전하게 처리하고, DB에 저장하는 기능을 만들 수 있습니다. 이를 통해 다양한 기능을 가진 웹 사이트를 구축할 수 있습니다.