- 분류 전체보기 (508)
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 리터럴 타입
- dfs
- 인터섹션
- 무한 스크롤
- 태그된 유니온
- React
- app router
- useAppDispatch
- TS
- 결정 알고리즘
- autosize
- 타입 좁히기
- tailwind
- 호이스팅
- recoil
- SSR
- 공변성
- Jest
- 이분 검색
- CI/CD
- 투포인터
- Promise
- async/await
- map
- CORS
- Cypress
- ESlint
- RTK Query
- webpack
- 반공변성
- Today
- Total
목록무한 스크롤 (3)
짧은코딩
무한 스크롤 값 저장 방식 수정 with 공식 사이트
이전 구현 방식 https://shortcoding.tistory.com/534 전체 상품 불러오기 무한 스크롤 구현 with react-intersection-observer 구현 화면 및 사용 기술 fakejs와 MSW를 이용하여 mock API를 만들어서 구현했다. "react-intersection-observer"를 이용하여 총 아이템 중 마지막에서 4번째 위치에 있는 아이템을 사용자가 보면 데이터를 더 shortcoding.tistory.com 저번에는 무한 스크롤에서 데이터를 불러오고 데이터 저장을 items를 따로 만들어서 하였다. 이번에는 공식 사이트에서 준 예시를 보고 구현해 보겠다. 전체 상품을 불러오는 페이지를 구현하는 것은 쉬웠다. 하지만 검색 상품을 가져오는 페이지에서 설정 방법..
전체 상품 불러오기 무한 스크롤 구현 with react-intersection-observer
구현 화면 및 사용 기술 fakejs와 MSW를 이용하여 mock API를 만들어서 구현했다. "react-intersection-observer"를 이용하여 총 아이템 중 마지막에서 4번째 위치에 있는 아이템을 사용자가 보면 데이터를 더 불러오도록 했다. (다음엔 serializeQueryArgs, merge, forceRefetch도 같이 이용하여 구현해보려 한다..!) 구현 RTK Query 우선 RTK Query의 endpoints에 위와 같이 코드를 작성했다. fakejs 백엔드와 위 데이터 형식으로 소통하기로 했기에 fakejs를 통해 위 데이터 구조를 만들었다. import { faker } from "@faker-js/faker"; export function createRandomItem..
리액트 쿼리에서 무한 스크롤을 구현하려면 useInfiniteQuery를 사용하면 된다. 전체 wrapper 컴포넌트로는 react-infinite-scroller 라이브러리의 InfiniteScroll를 사용하면 된다. -react-infinite-scroller의 npm 사이트 https://www.npmjs.com/package/react-infinite-scroller react-infinite-scroller Infinite scroll component for React in ES6. Latest version: 1.2.6, last published: a year ago. Start using react-infinite-scroller in your project by running `npm..