[5주차] Express.js + Mongoose로 Pagination 구현하기

2월 19일 자 학습 내용 정리입니다.

 

 

✏️ 예제 - Pagination

데이터가 많아지면 한 페이지의 목록에 모든 데이터를 표현하기 어렵다.
Pagination이란 데이터를 균일한 수로 나누어 페이지로 분리하는 것을 말한다.

 

const express = require('express');
const router = express.Router();

router.get(url, async (req, res) => {
    const page = Number(req.query.page || 1); // 현재 페이지
    const perPage = Number(req.query.perPage || 10); // 페이지 당 게시글 수
    const total = await Post.countDocument({});
    const posts = await Post.find({})
                            .sort({ createdAt: -1 })
                            .skip(perPage * (page - 1))
                            .limit(perPage);
    const totalPage = Math.ceil(total / perPage);
    ...
});

module.exports = router;

 

page는 현재 페이지를 가리키며 perPage는 페이지 당 게시글 수를 나타낸다.

이 값들은 일반적으로 "/posts?page=1&perPage=10" 처럼 url query를 사용해 전달된다.

query는 문자열의 형태로 전달되기 때문에 Number로 형변환이 필요하다.

 

pagination의 구현은 mongoDB의 limit, skip()을 이용한다.

.limit()은 검색 결과 수를 제한하고 .skip()은 검색 시 포함하지 않을 데이터의 수를 정한다.

pagination 시에는 데이터의 순서가 유지될 수 있도록 sort를 사용한다.

sort, skip, limit 함수를 사용하는 순서는 상관없으나 일반적으로 저 순서를 사용한다.

 

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")

 

pug를 사용해 pagination을 mixin으로 선언한다.

pagination이 필요한 페이지에서 해당 템플릿을 include한 후 +pagination으로 mixin을 사용한다.

현재 페이지는 b 태그를 이용해 굵게 표시한다.