[Important] Pagination.

[leejaerim]

in Payment list

• Pagination.

[leejaerim]

페이지네이션

과정

• firebase 쿼리 옵션 중 startafter를 사용해서 lastDocument의 값부터 limit 값까지 데이터를 가져오려고 하였습니다.
  • 단순 number type 인줄 알았으나, 공식 문서를 보고 별도의 object type임을 확인하였습니다.

    다음은 공식 문서 중 일부입니다.

    
    import { collection, query, orderBy, startAfter, limit, getDocs } from "firebase/firestore";

// Query the first page of docs const first = query(collection(db, "cities"), orderBy("population"), limit(25)); const documentSnapshots = await getDocs(first);

// Get the last visible document const lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1]; console.log("last", lastVisible);

// Construct a new query starting at this document, // get the next 25 cities. const next = query(collection(db, "cities"), orderBy("population"), startAfter(lastVisible), limit(25));

- 공식문서를 참조했음에도 불구하고 `startAfter, endBefore`를 사용한 이전, 다음 페이지만 구현이 가능했고, 
각 페이지로 이동할 수 있는 기능에 대한 목적에 맞지 않았습니다.
- 따라서 모든 `datamap`을 쿼리로 가져오되, `index`에 맞게 `slice` 하도록 구현하였습니다.
**_- `datamap`이 충분히 클 경우에, 브라우저의 성능 저하를 줄 수 있음을 인지하고 있습니다._**
- `pagination` 부분은 구독형이 아닌 단순 쿼리형으로 결재내역을 새로 업데이트 하지 않습니다.