[Node.js] 게시판 페이지네이션 구현하기, Pagination

🎯 게시판 페이지네이션 구현하기, Pagination

• 데이터를 균일한 수로 나누어 페이지로 분리하는 것
• Mongoose를 이용해 Pagination을 구현하기 위해서 한 페이지에 보일 자료의 개수를 limit으로 제한하고 특정 페이지로 넘어가기 위해 skip으로 자료를 건너뛴다.

 

📝 Express.js + Mongoose의 Pagination

router.get(... => {
const page = Number(req.query.page || 1); // 값이 없다면 기본값으로 1 사용
const perPage = Number(req.query.perPage || 10);
...

• page : 현재 페이지
• perPage : 페이지 당 게시글 수
• /posts?page=1&perPage=10 : 일반적으로 url query를 사용해 전달
• query는 문자열로 전달되기 때문에 Number로 형변환이 필요함

 

router.get(... => {
...
const total = await Post.countDocument({}); // 총 게시글 수 세기
const posts = await Post.find({}) 
    .sort({ createdAt: -1 }) // createdAt는 timestamps로 생성한 시간을 역순으로 정렬 === 데이터를 최근 순으로 정렬 
    .skip(perPage * (page - 1)) // 아래 설명 보기
    .limit(perPage);
const totalPage = Math.ceil(total / perPage); // 만약 전체 게시글 99개고 perPage가 10개면 값은 9.9 그래서 총 페이지수는 10개가 되어야 한다. 그래서 올림을 해준다.
...

• MongoDB의 limit과 skip을 사용하여 pagination 구현 가능
• limit : 검색 결과 수 제한
• skip : 검색 시 포함하지 않을 데이터 수
  • 페이지 당 게시글 수 * (현재 페이지 - 1)
  • 만약 perPage가 10이라면 1page로 왔을 때 10*(1-1) = 0이라서 0부터 9까지 출력
  • 만약 page가 2라면 결과가 10이라서 10~19까지 데이터 검색
  • 이렇게 0-9, 10-19, 20-29 이렇게 앞에 몇 개의 페이지를 생략할 건지 계산
• pagination 시에는 데이터의 순서가 유지될 수 있도록 sort를 해준다.
• 총 페이지 수 : 게시글 / 페이지 당 게시글 수
  • 항상 올림으로 계산!!!!

 

📝 페이지네이션 화면에 그리기

mixin pagination(path)
    p
        - for(let i = 1; i <= totalPage; i++)
            a(href=`${path}?page=${i}&perPage=${perPage}`)
                if i == page
                    b= i
                else
                    = i
            = " "

// ---
include pagination
    tr
        td
            +pagination("/posts")

• pagination을 mixin으로 선언
• pagination이 필요한 페이지에서 해당 템플릿을 include 한 후, +pagination으로 mixin을 사용한다.
• 현재 페이지는 b 태그로 굵게 표시