[Next.js] 글 목록 조회 (리스트 페이지) 만드는 방법

글 목록 조회 (list 페이지) 기능 만들기. 

 

게시판의 여러 기능
- 글목록 조회기능
- 상세페이지 
- 글발행기능 
- 수정삭제기능

DB에 저장된 글들을 보여주는 기능 만들고 싶으면 
1. html 페이지도 하나 필요하고 
2. 그 페이지 방문하면 DB에서 데이터를 꺼내와서 (없으면 임시로 몇개 만들고)
3. html 페이지에 꽂아넣어주면 되는거 아니겠습니까 

---

1. 글 목록 보여줄 HTML 생성

 

1) list 폴더 app폴더 안에 만들어서 주소 생성.
/list

 

그리고 list 폴더 안에 page.js 파일 생성해서

/list 경로로 들어갔을 시의 보여줄 page 만듦. 

 

1-1) page.js 파일 안에다가 컴포넌트 생성하고 html 레이아웃 만들어주기.

2) MongoDB에 있는 데이터 출력
= connectDB 임포트 / async 붙여주기 

 

두 줄로 축약한 코드 갖고와준다.

+ connectDB 임포트는 필수

+ await 사용하니까 컴포넌트 옆에다가 async 붙여주기.

const db = (await connectDB).db('forum');
const result = await db.collection('post').find().toArray();

-  forum 이라는 이름을 가진 데이터베이스(프로젝트)에 접속을 하고

- 컬렉션(폴더) 명인 post 에 있는 모든 데이터(document) 들을 갖고오라는 뜻.

 

console.log 로 result 변수 출력해주고 터미널 오픈해주면 데이터들 확인 가능.

= 자료형으로 돼있는 거 확인 가능. 

3) HTML 에 갖고온 데이터들 넣어줘서 보여주기 

  <h4>{result[0].제목}</h4>

변수 갖고 올 거니까 중괄호 {} 로 열어서 

데이터 넣어주면 된다. 

---

export default async function List(){
  (생략)
  return (
    <div className="list-bg">
      { result.map(()=>
        <div className="list-item" key={i}>
          <h4>{result[i].title}</h4>
          <p>1월 1일</p>
        </div>
      ) }
    </div>
  )
}