무한 스크롤 썸네일형 리스트형 [TIL-37] 무한 스크롤 성능 문제 - react-query useInfiniteQuery 도입 무한 스크롤 성능 문제 - react-query useInfiniteQuery 도입 1. react-query 도입 이유 성능 개선 방법들에는 네트워크 요청 및 응답 시간을 줄이기 위해 최적화된 서버 설정, 캐싱 기법, 데이터 압축 등을 고려할 수 있을 것 같다. 그 중 데이터 압축은 이미지 최적화를 진행할 때 하도록 하고, 무한 스크롤을 최적화하기 위해, 즉 스크롤 시 마다 요청되는 서버와의 데이터 통신 횟수와 속도를 개선 하기 위해서는 무엇 보다도 캐싱 기능을 고려하지 않을 수 없었다. 때문에 자동으로 캐싱 기능을 제공하는 react-query를 사용하였다. 2. react-query useInfiniteQuery를 도입한 이유 지금까지는 usequery 와 refetch, 그리고 Intersecti.. 더보기 [TIL-36] 무한 스크롤 기능 구현 - Intersection Observer API 무한 스크롤의 도입 장점 페이지네이션은 사용자가 다음페이지로 넘어갈 때 마다 번호를 눌러줘야한다는 단점이 있다. 버튼을 눌렀을 때 페이지가 바뀌는 피로감과 눌러야하는 노동력이 들 수 있다. 무한 스크롤은 이런 단점을 극복할 수 있고, 사용자들이 덜 기다리고, 더 편리하게 웹서핑 할 수 있게 한다. 무한 스크롤의 단점 1. 사용자가 현재의 위치를 알기 힘들다. 2. 원하는 위치에 있는 자료를 찾기 힘들다. 3. 웹페이지의 푸터 부분을 볼 수 없다. 4. 글을 읽고난 후 뒤로가기를 했을 때 원래 위치로 돌아가기 힘들다. 무한 스크롤의 도입 이유 우리 프로젝트의 경우, 특정 오피스 정보를 찾을 수 있도록 검색 서비스가 구현되어 있고, 그 외에 아무래도 여러가지 오피스 정보를 계속해서 둘러볼 수 있도록 하기 위.. 더보기 이전 1 다음
