# infinite scroll

dev_marco

FrontEnd에서 처리 가능한 무한스크롤무한스크롤을 위한 state 값추가로 상품리스트를 더 가져오는 함수로딩 상태를 바꿔주는데 타이밍 이슈가 있어setTimeout 으로 isLoading의 상태를 바뀔 수 있는 시간을 준다.추후 데이터를 DB에서 바로 받아오면 삭제

heelieben

무한 스크롤이란 사용자가 페이지 하단에 도달했을 때, 컨텐츠가 계속 로드되는 사용자 경험(UX) 입니다. 무한 스크롤을 구현하기 위해 필요한 기술은 다음과 같습니다.컨텐츠 fetch API페이지 하단 요소 관찰새로운 컨텐츠 추가컨텐츠를 가져오는 data fetch 는

jinyinshu

Screen에서 Loading을 한꺼번에 하지않고 화면이 밑으로 도달할때 쯤, 다시 Loading을 함.블랙핑크 제니의 인스타그램 follow를 본다고 생각해 보면됨.very difficult ㅜㅜ 초집중이 팔요함.https://react-query.tanst

sookim482

역시나 제 medium 글을 복사해왔지만 누군가엔 도움이 될 것 같아서 벨로그에도 포스팅합니다.

mango1004

페이지 처리를 하는 방법에는 일반적인 방식과 무한스크롤 방식이 있다. 먼저, 일반적인 방식을 알아보자.페이지네이션: 페이지 번호를 클릭해서 이동하는 방식필요한 요소로는 시작페이지 값을 알려줄 state,페이지를 눌렀을 때 화면을 해당 페이지로 재구현 해줄 함수,이전 목

ssjjyy

게시글이나 댓글 등 목록화 되어있는 데이터를 받아올 때 한꺼번에 모든 데이터를 받아올 수 없기때문에 일정 양만큼 나누어 받아와야 한다.예를 들어 게시판의 게시글이 999개가 있을 때, 한 페이지에 10개의 게시글씩 나눈다면 100개의 페이지가 생길 것이다.이런 작업을

pbs1014

antDesign의 paginationhttps://ant.design/components/pagination/npm의 infinite Scrollhttps://www.npmjs.com/package/react-infinite-scroller대부분의

hyeun427

페이지네이션은 가지고 있는 데이터가 많아서 한 화면에 전부 보여줄 수 없는 경우에 사용한다. 흔히 게시판의 게시글 페이지 목록, 이전/다음페이지 기능을 생각하면된다.무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 방식이다.트위터나 인스타그램

s2s2hyun

UX 기법의 일종인 무한 스크롤과 페이지 네이션이 각각 지니는 장/단점에 대해서 알아보겠습니다.페이지네이션은 디지털 콘텐츠를 웹사이트의 또 다른 페이지들로 분리하는 방법입니다. 사용자는 페이지 하단에 있는 숫자 형식의 링크를 클릭하여 페이지들을 탐색할 수 있습니다. 페

whljm1003

프로젝트를 진행하면서 페이징 기능이 필요하여 무한 스크롤로 기능을 구현해보았습니다.사용자 참여 및 콘텐츠 탐색이 쉽습니다.무한 스크롤이 클릭하는 것보다 더 나은 사용자 경험을 제공합니다.모바일에 적합합니다.페이지 성능이 느려집니다.특정 항목 검색 및 원래 위치로 되돌아

april_5

infinite scroll에서 scroll이 특정 포지션을 지나갈 때, 아이템을 추가로 로드하기 위해 필요한 Intersection Observer API.

kjh2868

웹사이트를 구현하면서 다양한 데이터를 보여줘야할 때 데이터를 로드해오는 여러가지 방식이 있는데 대표적으로 페이지네이션과 무한스크롤이다. Pagination : 데이터를 또 다른 페이지로 분리하는 방법. 사용자는 페이지 하단에 있는 숫자 형식의 링크를 클릭하여 페이지를

kjh2868

웹사이트를 사용하면서(특히 어플) 자주 보던 기능이 어떻게 구현되는 지 알게되니까 신기하기도하고 한편으로 복잡한 코드에 정신이 없었다.이걸로 구현해보고 싶은 화면에 적합한 기능이라 오늘 한 게시물 목록 무한 스크롤링에 대한 코드를 꼭 기억해둬야겠다. 연휴동안 그동안 배

rkd028

Infinite Scroll 은 말그대로 무한한 스크롤을 의미한다. 스마트폰이 대중화 되면서, 모바일웹이나 앱에서 페이지네이션을 통한 데이터 더 불러오기 방식은 사용자에게 큰 불편함을 불러일으킨다. 인피니티 스크롤은 이러한 관점에서 작은 스크린에서 단순 스크롤로 데이터

raverana96

이번 프로젝트에서 유저 목록을 보여줄 때, Infinite Scroll기법을 사용해서 데이터를 보여주기로 결정하였다. react-query에 useInfiniteQuery hook이 있어서 사용해보려고 했는데, 생각보다 공식문서 설명이 부족한 것 같아서 실제 코드를 가

leeeeeoy

이 글은 유튜브 강의와 블로그 자료를 보고 정리한 글입니다

grinding_hannah

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

yh1120

infinite scroll무한스크롤은 페이지네이션 기법을 응용하여 아래 혹은 위로 스크롤을 할 때, 계속해서 새로운 데이터를 받아오는 방법이다.무한스크롤을 구현하려면 우선 나타낼 정보를 하나의 박스로 담아야한다. 그리고 그 박스들을 정렬해서 보일 페이지를 꾸민 후,

jellybrown

Scroll Event 제일 간단하게 할 수 있는 것은, window에게 scroll event를 거는 방법이다. InterSection Observer API > Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document

byseop

커스텀 훅까지 만들어보자!