# infinite scroll

__dan_n

Intersection Observer 로 무한 스크롤 구현하기

rlwjd31

react-query로 infinite scroll을 구현하는 도중 새로고침 시 useEffect동작과 관련하여 ref 참조 element가 null이 되는 에러현상

springhana

사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험 (UX) 방식입니다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있습니다

khd

무한스크롤을 구현 하고 로딩중 스피너를 띄어보자

papamoon0113

트위터의 무한 스크롤 기능, 모듈 형식으로 구현하기

da_na

이전에 검색 기능을 QueryDSL로 변경하면서, 검색 기능이 무한 스크롤을 적용하고 있어서 반환값을 Slice로 반환해줘야 했습니다. 하지만 Slice와 Page를 혼동하여 코드를 작성하여서 이에 대한 차이점을 분석하여 무한 스크롤을 구현하려고 합니다.

kky1373

관리자 페이지에서 정보 수정요청과 새 장소 신청 요청 각각 무한스크롤로 정보를 받아와야 했다. react-query로 비동기 관리를 했기 때문에 useInfiniteQuery를 이용하기로 했다. 무한스크롤 필요한 용어 IntersectionObserver로 바닥

hdmoon127

많은 데이터 리스트를 렌더링 시켜야 할때 Pagination을 해야할지 Infinite Scroll을 할지 고민에 빠지곤 한다. UX적인 측면도 고려하면서 화면UI 구성도 고려해야하기 때문인데 React Native를 사용하는 앱 개발자라면 사용성, 화면구성에 용이한

easyxxu

Intersection Observer API를 이용한 무한스크롤

yvnji25

초기에 게시글 이미지 등록 기능을 구현할 때 이미지 파일 데이터를 저장하는 상태와 이미지 미리보기를 위한 상태 2가지를 사용하여 상태를 따로 관리하였다. (이후 데이터 관리 형식을 바꾸어서 현재는 하나의 상태만을 이용한 코드로 구현되어 있다) 이미지 등록 api 요청

dudwns

컨텐츠를 페이징 하는 기법 중 하나로,아래로 스크롤 하다가 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식이다.Facebook, Twitter, Instagram 등 SNS에서 주로 사용된다.구현 방식은 크게 두 가지가 있다.Window의 scrol

aimzero9303

우선 스크롤로 바닥을 찍었을 때를 알기 위해 라이브러리를 설치해서 import했다.import후 다음과 같이 callback을 전달해주면 된다.callback의 내용으로는, 최초의 불러온 데이터 이후의 데이터를 불러오는 로직을 짜주었다..

sju4486

✅ Pagination Pagination : 검색 결과를 가져올 때 데이터를 쪼개 번호를 매겨 일부만 가져오는 기법 사용자가 게시판, 상품 목록 등을 요청할 때 결과 값을 전부 가져오면 느려지며 사용자는 불편을 느끼게 된다. 그래서 데이터를 조금씩 나눠서 가져오

zitto

▼ 링크 react infinite scroller react infinite scroll component ✅ 무한스크롤 방식 마직막으로 받아올 댓글이 없다면 리패치할것이 없다면 기존거ㅅ만 리턴해달라 typescript

ikolp34

페이지네이션은 사용자가 과도한 스크롤 발생으로 인해 생기는 불편함을 방지하기 위해 콘텐츠를 여러 페이지로 나누어 이전 페이지와 다음 페이지 또는 특정 페이지로 이동할 수 있는 요소이다.가장 흔히 쓰이는 곳은 게시판같은 테이블 형태의 페이지등이 있다.한 페이지에 보여주고

zeon8080

이 두가지에 대해 알아보자.우선 페이지네이션이란 우리가 게시글 목록에서 흔히 볼 수 있는 UI이다.위처럼 구글에서도 보이듯이 거의 모든 사이트에서 확인할 수 있다고 해도 과언이 아니다.이는 게시글 등의 목록을 띄울 때 몇 개를 띄울지 정하고 그 이상의 게시글(?)이 있

cloud_oort

유저가 데이터의 바닥에 닿으면 방해없이 스크롤을 계속하게 하기 위해 새로운 데이터를 fetch 할 것데이터를 한번에 불러오는 방법보다 효율적인 방법. react-query의 useInfiniteQuery를 사용한다.

buddle6091

netlify CI / CD 자동화 과정에서 오류 127번이라는 친구를 만나서 어려움을 겪던 찰나에 npm run build 하여 만든 빌드 폴더를 직접 배포하여 서비스를 배포하는데 성공을 하였다.그러나 axios 요청을 하는데 response 값이 호출이 잘되지 않는

kemezz

FlatList는 ScrollView와는 다르게 몇 가지 특수한 기능들을 제공하는데, 그 중 하나가 인피니트 스크롤의 손쉬운 구현이다. 이 글에서는 React Query와 연동하여 빠르게 인피니트 스크롤이 가능한 뷰를 만드는 방법을 소개하고자 한다.onEndReache

fnvl2358

1.일반적인 방식 (Pagination)2.무한스크롤 방식 (Infinite Scroll)페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법입니다.게시판 형태의 페이지에서 가장 일반적으로 사용되는 방식입니다.a. page 인자를 사용해서 게시글 목록 불러오기b.