22.10.4 페이지 기능 구현

페이지 기능을 구현할 준비가 어느 정도 끝났습니다. 페이지 기능을 구현하려면 앞 절에서 배운 limit 함수를 사용해야 하고, 추가로 skip 함수도 사용해야 합니다.

skip이란 표현에는 ‘넘긴다’는 의미가 있습니다. skip 함수에 파라미터로 10을 넣어 주면, 처음 열 개를 제외하고 그다음 데이터를 불러옵니다. 20을 넣어 준다면? 처음 20개를 제외하고 그다음 데이터 열 개를 불러오겠지요.

대충 감이 잡혔나요? skip 함수의 파라미터에는 (page - 1) * 10을 넣어 주면 됩니다. 1페이지에는 처음 열 개를 불러오고, 2페이지에는 그다음 열 개를 불러오게 되겠죠. page 값은 query에서 받아 오도록 설정합니다. 이 값이 없으면 page 값을 1로 간주하여 코드를 작성해 보겠습니다.

src/api/posts/posts.ctrl.js - list

export const list = async ctx => {
  // query는 문자열이기 때문에 숫자로 변환해 주어야 합니다.
  // 값이 주어지지 않았다면 1을 기본으로 사용합니다.
  const page = parseInt(ctx.query.page || '1', 10);

  if (page < 1) {
    ctx.status = 400;
    return;
  }

  try {
    const posts = await Post.find()
      .sort({ _id: -1 })
      .limit(10)
      .skip((page - 1) * 10)
      .exec();
    ctx.body = posts;
  } catch (e) {
    ctx.throw(500, e);
  }
};

---

 

이렇게 하면 http://localhost:4000/api/posts?page=2 형식으로 페이지를 지정하여 조회할 수 있습니다.