Observer (1) 썸네일형 리스트형 React - Tanstack-Query(React-Query) v5 와 IntersectionObserver를 이용한 무한스크롤(useInfiniteQuery) Next.js App Router를 이용하여 개발한 개인 블로그에 적용한 무한스크롤에 대한 내용에 대해 적어보려고 합니다.개발한 블로그 링크는 아래에 있습니다.https://www.siklog.shop/blog 위의 이미지처럼 검색어를 통해 게시글을 조회하는 페이지에 무한스크롤을 적용하였으며, useInfiniteQuery와 IntersectionObserver를 이용하여 구현하였습니다. 무한 스크롤을 적용한 이유는 아래와 같습니다.게시글이 많아질수록 한 번에 데이터를 조회하면 조회 속도가 늦어져 UX가 좋지 않다. (로딩 UI가 너무 긿어짐)페이지네이션으로도 구현이 가능하나 모바일 유저의 UX까지 생각한다면 무한 스크롤이 더 적합하다. 1. 무한 스크롤이란?무한 스크롤은 웹 페이지에서 리스트나 테이.. 이전 1 다음
