Sequelize:: 페이지네이션 기능 (limit, order, Op.lt)

페이지네이션 만들기

 

앞서 피드를 구현할 때, infinite scrolling 방식으로 게시글을 가져오도록 만들었다.

 

서버를 만들었으니 더미데이터말고 실제 서버에서 게시글을 가져오도록 할텐데,

게시글을 순차적으로 가져오도록 하는 설정이 필요하다.

 

이 기능은 시퀄라이즈에서 제공해주는 기능인 limit과 offset 방법으로 설정가능하다.

 

  Post.findAll({  //모든 포스트를 가져옴.                                         

  limit: 숫자,   // 한번에 (숫자)개 가져오기.                        

  offset: 숫자 // (숫자 + 1) ~ (숫자 + 11) 까지의 게시글을 가져옴.

  order: [['createdAt', 'DESC']]  // 최신 게시글부터 가져옴

(ASC: 오름차순, DESC:내림차순)

  });  

 

 

하지만 offset 방식에는 치명적인 단점이 있다.

중간에 유저가 게시글을 삭제하거나 추가한다고하자.

20개의 게시글이 있어서, 처음에 20~11번째 게시글을 불러온다.

어떤 유저가 게시글 하나를 쓰면, 그 다음 로딩때는 (21~12번째를 뛰어넘어서, 11 ~ 2번째 게시글을 불러온다.

누가 삭제하거나 추가하면 limit과 offset순서가 꼬인다.

 

그래서 offset보다는 lastId 방식을 많이 사용한다.

lastId는 DB에서 제공하는건 아니고, 사용자가 구현한 거.

where: {id: lastId } 이런식으로 사용한다.

 

 

-

 

 

페이지네이션기능은 posts.js 라우터를 만들어 여기에 구현했다.

 

order: [

['createdAt', 'DESC'],  // 이 부분은 포스트정렬부분

[Comment, 'createdAt', 'DESC']  // 이 부분은 Comment의 정렬부분이다.

아래쪽에서 order을 만들어서 정렬하는 방법이 아닌,

전체 order부분에서 첫번째 인수를 모델로 주고 정렬해야한다.

]

 

---

 

lastId 구현하기

 

프론트에서 lastId값 넘겨주기

dispatch

최상위 컴포넌트에서 lastId값을 넘겨준다.

onScroll === 스크롤 시 게시글을 로드해오는 함수

  mainPosts[mainPosts.length - 1]?.id;  

mainPosts(서버에서 받아온 게시글들이 들어가는 state)의 마지막 요소의 id를 lastId에 넣어준다.

-

saga

GET요청은 data를 보낼 수 없으므로, 쿼리스트링방식으로 서버에 데이터를 넘겨준다.

  URI + ?key=value  

value뒤에는 &로 구분하여 limit이나 offset같은 옵션을 적을 수도 있다.

 

 

route

** 쿼리스트링의 value값은 req.query 안에 전달된다.

req.query.key를 사용해 value를 사용할 수 있다.**

GET /post 요청은 페이지를 로딩할 때 사용된다.

 

처음에 웹페이지에 접속했을 때 사용되고(초기로딩),

스크롤을 내려 게시글을 불러와야할 때도 사용이 된다.

 

이 둘을 다른 로직으로 불러와주어야한다.

초기로딩은 where값이 없고, 이후부터는 id값이 lastId보다 작은 포스트에서부터 불러와한다.

비교연산자기능이 시퀄라이즈에 내장되어있다.

 

우선 Op를 시퀄라이즈에서 불러온다.(import)

  [Op.lt]: 기준 숫자  

를 사용하면 된다.

 

 

 

---

 

 

😄😄

스크롤할때마다, 게시글을 5개씩 불러온다.