Next.js와 MongoDB를 활용한 게시판 만들기 (3)

Next.js와 MongoDB를 활용한 게시판 만들기

1. 첫 번째 단계: 게시판의 기능 정의

게시판을 만들기 위해서는 어떤 기능이 필요한지 먼저 정의해야 합니다. 일반적인 게시판에는 다음과 같은 기능이 있습니다:

글목록 조회기능
상세페이지 기능
글발행기능
수정/삭제기능
이 중에서 가장 중요한 기능인 글목록 조회기능부터 만들어봅시다.

 

2. 두 번째 단계: 기능 별 구현 방법 정의

각 기능을 구현하기 위한 방법을 정의해야 합니다. 예를 들어, DB에 저장된 글들을 보여주는 기능을 만들고 싶다면 다음과 같은 방법을 사용할 수 있습니다.

html 페이지를 만들어서 사용자에게 보여줄 준비를 합니다.
사용자가 페이지에 접속하면, DB에서 데이터를 꺼내옵니다.
꺼내온 데이터를 html 페이지에 삽입하여 사용자에게 보여줍니다.
이렇게 기능을 한글로 상세히 정의한 후, 그걸 코드로 번역하면 됩니다.

 

3. 세 번째 단계: 기능 구현

이제 실제로 기능을 구현해봅시다.

 

3.1. html 페이지 만들기

먼저, 글 목록을 보여줄 html 페이지를 만들어봅시다. /list 경로로 접속했을 때 글 목록을 보여주도록 설정합니다.

export default function List() {
  return (
    <div className="list-bg">
      <div className="list-item">
        <h4>글제목</h4>
        <p>1월 1일</p>
      </div>
      <div className="list-item">
        <h4>글제목</h4>
        <p>1월 1일</p>
      </div>
      <div className="list-item">
        <h4>글제목</h4>
        <p>1월 1일</p>
      </div>
    </div>
  )
}

 

3.2. MongoDB에서 데이터 가져오기

이제 DB에 있는 데이터를 뽑아서 html 페이지에 보여줘봅시다. 먼저 DB에 게시물을 몇 개 만들어두어야 합니다.

//json
{
  "title": "안녕",
  "content": "반가워"
}

이런 식으로 게시물을 몇 개 만들어둔 후, MongoDB에서 데이터를 가져옵니다. MongoDB에서 데이터를 가져오려면 다음과 같은 코드를 사용합니다.

let result = await db.collection('post').find().toArray();

3.3. html에 데이터 보여주기

마지막으로, 가져온 데이터를 html에 삽입하여 사용자에게 보여줍니다.

import { connectDB } from "@/util/database.js"

export default async function List() {
  let db = (await connectDB).db('forum');
  let result = await db.collection('post').find().toArray();

  return (
    <div className="list-bg">
      <div className="list-item">
        <h4>{result[0].title}</h4>
        <p>1월 1일</p>
      </div>
      <div className="list-item">
        <h4>글제목</h4>
        <p>1월 1일</p>
      </div>
      <div className="list-item">
        <h4>글제목</h4>
        <p>1월 1일</p>
      </div>
    </div>
  )
}