블로그 만들기(4)- 게시판 기능 만들기 (pagination)

오늘 메인 페이지에 게시글 보여주려 하는데

기능을 만들기위해서 기능설명을 먼저 한글로 적어보면

 

1. db에서 post 컬렉션에 저장되어있는 title이랑 content를 찾기

2. 메인페이지에 html을 생성하기

 

순서대로 하면 될것 같습니다.

 

1번 기능 만들어보면

 

find().toArray()로 post에 들어있는 모든 document를 찾아서 result에 배열 형태로 저장한다음

그 값을 render()의 두번째 파라미터로 데이터를 보내줍니다.

 

ejs 파일이라서 js 문법을 사용해서 html을 생성할 수 있는 장점이 빛을 낼 차례입니다.

 

ejs 파일안에서 js 문법 사용하려면 <% %> 안에 감싸주면 되고

html을 생성해주려면 <%=  %> 이런식으로 감싸주면 ok

 

모르면 검색하면 되서 굳이 외울필요는 없어 보입니다.

 

render()을 통해 보내준 배열 result로 result의 길이만큼 html 생성해 주도록 코드를 작성했습니다.

메인 페이지가 보이긴 하는데, 스타일을 안줘서 가독성이 너무 떠러지네요, gpt를 이용해서 css를 작성하겠습니다.

이런식으로 디자인 해줬네요. 그런데 문제가 있습니다.

게시물이 한두개면 괜찮은데 너무 많으면 보기 불편할것 같네요

 

게시물이 8개정도만 보이고, 다음 넘어가면 밑에 페이지를 나눠주도록 수정해 보겠습니다..

이러한 기능을 페이지네이션 이라고 합니다.

 

근데 페이지네이션 하려면 

/main/1 , /main/2 , ... /main/n 이런식으로 /main과 비슷한 api를 계속 만들어야 하는데

이걸 동적으로 만들어주는 기능이 있습니다.

그걸 URL 파라미터라고 하는데요.

 

/main/:파라미터이름  /// 이런식으로 사용하는데 보통 :id를 많이 사용합니다.

그래서 /main/:id 이렇게 작성했습니다.

이러면 라우트 핸들러에서 req.params.id 이런식으로 현재 id의 값을 출력 가능합니다.

 

1.  페이지 네이션의 갯수 = Math.ceil(게시글 갯수 / 게시글 제한) 이렇게 구성하면 페이지네이션을 동적으로 만들수 있을것 같네요

 

그럼이제 이걸 이용해서 main.ejs에서 document의 갯수에 따라서 페이지네이션  html을 생성할 수 있겠죠?

 

그럼 여기서 페이지네이션 버튼을 클릭하면

페이지네이션에 할당된 게시글들만 보여주도록 코드를 구성하면 되는데

잘 풀리지 않아서 gpt의 도움을 조금 받았습니다.

 

일단 현재 result는 모든 게시글을 찾아와 html에 보여주는데

result의 값을 동적으로 조절하면 될것 같습니다.

 

const result = await db.collection('post').find().toArray(); 이건 전체 게시글을 배열화해서 result에 저장한거고

 

우리가 보여주고 싶은건 페이지네이션을 이용해서 페이지를 구분해주고, 페이지를 클릭했을때 클릭된 현재 페이지를 보여줘야 합니다.

 

그래서 skip() , limit() 메소드를 이용해서 보여줄겁니다.

 

현재 페이지 까지 skip()을 이용해서 skip 해주고

그 시점부터 8개의 게시물을 보여주면 될것같네요

 

const result = await db.collection('post').skip((parseInt(req.params.id)-1) * 8),limit(8).find().toArray()

result의 값을 이렇게 저장하면 될것 같습니다.

 

이런식으로 나눌수 있겠군요 이제 main.ejs 파일의 구성을 보면

result를 skip().limit() 으로 8개로 제한을 했기때문에 pagination 되어있는 대로 잘 보여줄것 같네요

페이지 네이션 기능이 정상적으로 작동하네요

 

UI가 너무 불친절 해서 GPT를 이용해서 스타일을 주면

적당히 봐줄만한 UI가 생성되었네요.

 

다음 포스팅에서는

 

상세페이지 만들고, 게시물 클릭하면 상세페이지로 이동하는 기능

게시글마다 삭제버튼을 만들고, 삭제버튼을 클릭하면 게시글이 삭제되는 기능을 추가 해보도록 하겠습니다.

 

페이지네이션 기능 만들때 많이 버벅거려서 코드를 한번더 리뷰를 해보겠습니다.