2. 데이터출력

ListPage

🌞 MongoDB에서 데이터 가져오기
await db.collection('collection이름').find()

• 공식문서.find()

• find() 메서드는 주어진 조건과 일치하는 모든 문서(데이터)를 검색합니다.

• 검색 결과는 커서(cursor) 형태로 반환됩니다.

• 이 커서는 문서의 컬렉션을 나타내며, 이를 통해 반복(iterate)하거나, 필요한 만큼의 문서를 가져오는 등의 작업을 할 수 있습니다.

• 결과가 없는 경우에는 비어 있는 커서를 반환합니다.

  • 예시: db.collection('posts').find({author: 'John Doe'})는
    'John Doe'가 작성한 모든 게시물을 찾아 커서를 반환합니다.

  let data = await db.collection("post").find().toArray();

.find()메서드 통해 데이터 불러와서 배열로 출력한 뒤, 글 목록 컴포넌트 생성 후 map() 메서드 통해서 데이터 불러와 title 데이터바인딩 해주었다.
날짜는 이후에..

ListPage 전체코드

import { connectDB } from "@/utils/database";
import styles from "./list.module.css";
import Link from "next/link";

export default async function ListPage() {
const client = await connectDB;
const db = client.db("board");
let postData = await db.collection("post").find().toArray();

return (
  <ul className={styles["list-bg"]}>
    {postData.map((item, index) => (
      <li className={styles["list-item"]} key={item._id}>
        <Link href={`/detail/${item._id}`}>
          <h4>{item.title}</h4>
          <p>1월 1일</p>
        </Link>
      </li>
    ))}
  </ul>
);
}

DetailPage

• 게시글 목록 클릭 시 해당 게시물 보여주기 (/detail/[id]/page.js)
  - Dynamic Routes
  - findOne({key:value})
  

🌞 MongoDB에서 데이터 하나만 가져오기
await db.collection('collection이름').findOne ({찾고 싶은 key:"찾고 싶은 value"})

👿 씬나게 작성한 에러나는 코드...

import { connectDB } from "@/utils/database";

export default async function DetailPage({ params }) {
  const client = await connectDB;
  const db = client.db("board");
  let data = await db.collection("post").findOne({
    _id: params.id,
  });
  console.log(data);
  return (
    <div>
      <p>DetailPage :{params.id}</p>
      <h2>{data.title}</h2>
    </div>
  );
}

내가 이해한 것 : findOne ({찾고 싶은 key:"value"}) 넣어 주면 데이터 중 해당 항목만 불러옴
동적 라우팅을 통해 params로 id를 받아올 수 있었기 때문에 아래와 같이 params.id를 냅다 넣어줬다.
DetailPage :{params.id}를 통해 id가 제대로 출력되는 것도 확인

    let data = await db.collection("post").findOne({
  _id: params.id,
});

근데 왜 안돼???????????????????????????

정신 똑띠 차리고 콘솔 확인...또 확인했는데

_id: id가 아니라
_id: new ObjectId('어쩌구저쩌구엄청긴id값')이넹...😂
코드를 아래와 같이 수정해주니 드디어 나온다!!

// board\src\app\detail\[id]\page.js
import { connectDB } from "@/utils/database";
import { ObjectId } from "mongodb"; //import 필요!!

export default async function DetailPage({ params }) {
  const client = await connectDB;
  const db = client.db("board");

  const data = await db.collection("post").findOne({
    _id: new ObjectId(params.id),
  });

  return (
    <div>
      <h2>{data.title}</h2>
      <p>{data.content}</p>
    </div>
  );
}

import { ObjectId } from "mongodb"; 임포트도 잊지 말자!

:: 진행상황 & TODO ::

• 몽고 DB setting
• MongoDB 입출력
• 글 목록 조회 기능(/list)
  • 글 제목,~~
  • 날짜 데이터바인딩
• 글 상세 페이지(/detail/[id]/page.js)
  • 제목, 내용,
  • 게시 날짜, 댓글 데이터바인딩
• 글 작성 페이지
• 글 수정 페이지
• 글 삭제 페이지
• S3 파일업로드
• Next-auth 회원인증기능
• 404페이지 만들기
• 글 작성 페이지 마크다운 작성페이지로 변경
• 캐싱, 에러처리 등 부가기능
• 스타일링
• AWS 클라우드 배포