# infinite scroll

34개의 포스트

무한 스크롤(Infinite Scroll)

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

2일 전
·
0개의 댓글
post-thumbnail

React | Infinite Scroll 구현하기 (react-query, react-intersection-observer)

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

2022년 4월 11일
·
0개의 댓글
post-thumbnail

Infinite Scroll

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

2022년 4월 10일
·
0개의 댓글
post-thumbnail

Flutter: Infinite Looping Scroll

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

2022년 4월 5일
·
0개의 댓글

Pagination / Infinite-scroll

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

2022년 4월 3일
·
0개의 댓글

Pagination & Infinite Scroll

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

2022년 4월 2일
·
0개의 댓글

Paging(Pagination / infinite Scroll)

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

2022년 4월 2일
·
0개의 댓글
post-thumbnail

Pagination & Infinite Scroll

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

2022년 4월 1일
·
0개의 댓글
post-thumbnail

페이지네이션 VS 무한스크롤

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

2022년 3월 31일
·
0개의 댓글
post-thumbnail

무한스크롤(infinite scroll) 구현 (Intersection Observer API)

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

2022년 3월 28일
·
0개의 댓글
post-thumbnail

Intersection Observer API로 lazy loading의 무한 스크롤 구현하기!

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

2022년 3월 6일
·
0개의 댓글
post-thumbnail

Pagination ? Infinite Scroll ?

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

2022년 2월 2일
·
0개의 댓글
post-thumbnail

20220128_TIL(2) : 무한 스크롤링

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

2022년 1월 28일
·
0개의 댓글
post-thumbnail

[React] Infinite Scroll 구현 (IntersectionObserver)

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

2021년 12월 4일
·
0개의 댓글

[react-query] useInfiniteQuery 사용법

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

2021년 11월 19일
·
0개의 댓글

[Flutter] ScrollController 사용해보기

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

2021년 9월 23일
·
0개의 댓글
post-thumbnail

[TIL] Intersection Observer 와 React에 대해

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

2021년 7월 28일
·
0개의 댓글
post-thumbnail

Infinite Scroll

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

2021년 7월 27일
·
0개의 댓글
post-thumbnail

[React] Infinite Scroll 구현

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

2021년 7월 27일
·
0개의 댓글