[Node.js / mongoose] skip(), limit()로 페이지네이션 구현하기

📌 실습코드

아래 코드와 결과를 갖고 skip()과 limit()를 알아볼 것이다.

title이 test1~5까지 들어있다.

코드

const posts = await Post.find({});
console.log(posts);

검색결과

[
  {
    _id: new ObjectId("6167df634f117c17b2ea0b5a"),
    title: 'test1',
    __v: 0
  },
  {
    _id: new ObjectId("616821f7249553ee8393dce8"),
    title: 'test2',
    __v: 0
  },
  {
    _id: new ObjectId("616821fe249553ee8393dcea"),
    title: 'test3',
    __v: 0
  },
  {
    _id: new ObjectId("6168220a249553ee8393dced"),
    title: 'test4',
    __v: 0
  },
  {
    _id: new ObjectId("6168220a249553ee8393dced"),
    title: 'test5',
    __v: 0
  }
]

 

📌 skip()

skip()은 건너뛸 문서의 수를 지정한다.

skip(n)은 n개의 문서를 건너뛰고 n + 1부터 끝까지 출력한다.

const posts = await Post.find({}).skip(2);
console.log(posts);

skip(2)이기 때문에 2개의 문서를 건너뛰고 3번째 문서부터 가져온다.

title이 test1, test2인 문서들을 건너뛰고 그 다음부터 가져오는 것을 볼 수 있다.

[
  {
    _id: new ObjectId("616821fe249553ee8393dcea"),
    title: 'test3',
    __v: 0
  },
  {
    _id: new ObjectId("6168220a249553ee8393dced"),
    title: 'test4',
    __v: 0
  },
  {
    _id: new ObjectId("6168220a249553ee8393dced"),
    title: 'test5',
    __v: 0
  }
]

 

📌 limit()

limit()는 출력의 개수를 제한한다.

limit(n)은 n개만 출력한다는 뜻이다.

const posts = await Post.find({}).limit(2);
console.log(posts);

limit()를 2로 제한했다.

2로 제한했기 때문에 test1, test2 두 개의 문서만 가져왔다.

[
  {
    _id: new ObjectId("6167df634f117c17b2ea0b5a"),
    title: 'test1',
    __v: 0
  },
  {
    _id: new ObjectId("616821f7249553ee8393dce8"),
    title: 'test2',
    __v: 0
  }
]

 

📌 skip(), limit()로 페이지네이션(Pagenation) 구현하기

페이지네이션은 콘텐츠를 여러 개의 페이지에 나누어 보여주는 사용자 인터페이스이다.

 

 

 

 

카페 혹은 블로그 등의 하단에 이전, 다음 혹은 1, 2, 3, 4로 특정 페이지로 넘어가도록 하는 방법을 말한다.

exports.getPosts = async (req, res, next) => {
  const currentPage = req.query.page || 1;
  const perPage = 2;
  try {
    // ...
    const posts = await Post.find({})
      .skip((currentPage - 1) * perPage)
      .limit(perPage);
    // ...
  } catch (error) {
    // ...
  }
};

currentPage는 몇 번째 페이지인지를 의미한다. 프론트에서 값을 받아오고 기본이 1이다.

perPgae는 한 페이지에 몇 개의 게시물을 보는지를 의미한다.

 

Post.find({})로 전체를 검색하는데 skip()으로 ((currentPage - 1) * perPage)개를 건너뛰고 perPage개만 DB에서 가져온다.

 

글로 설명하자면

1페이지에서는 currentPage = 1, perPage = 2이다.

Post.find({}).skip((1 - 1) * 2).limit(2) -> Post.find({}).skip(0).limit(2)이 된다.

0개의 문서를 건너뛰고 2개의 문서만 가져온다.

 

2페이지에서는 currentPage = 2, perPage = 2이다.

Post.find({}).skip((2 - 1) * 2).limit(2) -> Post.find({}).skip(2).limit(2)이 된다.

2개의 문서를 건너뛰고 2개의 문서를 가져온다.

 

3페이지에서는 currentPage = 3, perPage = 2이다.

Post.find({}).skip((3 - 1) * 2).limit(2) -> Post.find({}).skip(4).limit(2)이 된다.

4개의 문서를 건너뛰고 2개의 문서를 가져온다.

 

이렇게 하면 perPage의 개수만큼 중복되지 않게 페이지별로 데이터들을 불러올 수 있다.