study/React (2) 썸네일형 리스트형 React - Tanstack-Query(React-Query) v5 와 IntersectionObserver를 이용한 무한스크롤(useInfiniteQuery) Next.js App Router를 이용하여 개발한 개인 블로그에 적용한 무한스크롤에 대한 내용에 대해 적어보려고 합니다.개발한 블로그 링크는 아래에 있습니다.https://www.siklog.shop/blog 위의 이미지처럼 검색어를 통해 게시글을 조회하는 페이지에 무한스크롤을 적용하였으며, useInfiniteQuery와 IntersectionObserver를 이용하여 구현하였습니다. 무한 스크롤을 적용한 이유는 아래와 같습니다.게시글이 많아질수록 한 번에 데이터를 조회하면 조회 속도가 늦어져 UX가 좋지 않다. (로딩 UI가 너무 긿어짐)페이지네이션으로도 구현이 가능하나 모바일 유저의 UX까지 생각한다면 무한 스크롤이 더 적합하다. 1. 무한 스크롤이란?무한 스크롤은 웹 페이지에서 리스트나 테이.. React - Error Boundary, React-Query와 사용하기 React Query에 React Error Boundary를 사용하는 방법을 작성해보고자 합니다.React Query는 v5를 사용할 것이며, Error Boundary의 경우 직접 구현하는 것이 아닌 react-error-boundary 라이브러리를 사용하였습니다. Error BoundaryError Boundary란 React v16에 도입된 에러를 핸들링할 수 있는 React 합성 컴포넌트입니다. Error Boundary는 하위 컴포넌트 트리의 어디에서든 자바 스크립트 에러를 기록하고, 에러가 발생한 컴포넌트 트리 대신 fallback UI를 보여줄 수 있습니다.fallback UI란?어떤 기능이 제대로 동작하지 않을 때, 이에 대처하는 기능 또는 동작을 말하며, 실패에 대해서 후처리를 위해 .. 이전 1 다음
