# infinite scroll

61개의 포스트
post-thumbnail

Firebase 무한스크롤을 직접 구현해보자..

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

2023년 4월 24일
·
0개의 댓글
·
post-thumbnail

Pagination vs Infinite Scroll

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

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

[TIL 0331] 무한스크롤

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

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

Pagination / Infinite Scroll

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

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

Pagination or Infinite scroll

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

2023년 1월 30일
·
0개의 댓글
·
post-thumbnail

[Next.js] react-query 이용한 무한스크롤 구현

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

2023년 1월 19일
·
0개의 댓글
·
post-thumbnail

📆 23.01.15 - Mixed Content

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

2023년 1월 15일
·
0개의 댓글
·

FlatList와 React Query로 Infinite Scroll 구현하기

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

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

Pagination vs Infinite Scroll

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

2022년 12월 22일
·
0개의 댓글
·

Pagination vs Infinite Scroll

게시판에서 글을 보여주는 방법중에 글 목록을 한페이지씩 보여주는 페이지 네이션과 스크롤 하면 무한으로 스크롤이 내려가면서 목록을 보여주는 무한 스크롤방식이 있습니다. 이 두 방식을 사용하는 방법을 알아봅시다. 페이지네이션이란 페이지번호를 클릭해서 이동하는 방식의 페이지

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

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

😵이번 글은 무한 스크롤을 구현하기 위한 일대기를 담은 포스팅입니다…

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

[Next.js] React Query, Prisma와 함께하는 무한 스크롤 (Infinite Scroll)

`react query`의 `useInfiniteQuery`와 `prisma`의 `Cursor-based pagination`을 사용하여 무한 스크롤에 필요한 모든 것을 구현해 보겠습니다! 이번 구현에 사용한 데이터는 아래 첨부한 이미지와 같으며, 전체 코드는 http

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

[React] useInView를 활용한 Infinite Scroll

useQuery를 사용하여 정적인 이벤트의 실행하여 api를 호출하는데 성공하였다...

2022년 11월 25일
·
0개의 댓글
·

Infinite Scroll

무한 스크롤은 이미지나 컨텐츠의 길이 또는 갯수가 많을 때, 한번에 다 보여주지 않고 사용자가 마지막 컨텐츠를 볼 때 쯤 다음 컨텐츠가 있으면 불러오는 방식이다Facebook, Instagram같이 게시물들을 한번에 보여주지 않고 사용자가 게시물을 보려고 계속해서 스크

2022년 11월 18일
·
0개의 댓글
·

INFINITE SCROLL

우리가 페이스북이나 인스타그램 피드를 보면 끝도 없이 게시물이 보이며 스크롤을 계속할 수 있다. 이러한 방식을 infinite scroll이라고 하는데 원리는 다음과 같다.웹이 처음 켜졌을 때 서버에서 데이터를 받아온다(onMount). 이후 스크롤하여 화면의 끝에 도

2022년 11월 15일
·
0개의 댓글
·

[React] Intersection Observer API 활용해서 무한스크롤 기능 구현하기

무한스크롤을 구현하는 방법으로는 scroll이벤트인 onScroll을 사용하는 방법이 있고, Intersection Observer API를 활용하는 방법이 있다.하지만 onScroll을 사용하면 scroll이 일어날때마다 이벤트가 실행돼서 성능 저하의 문제가 생기기

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

intersection observer란? (feat: 무한 스크롤 만들기)

무한 스크롤을 구현하거나 특정 요소를 관찰하고 싶을 때는 Intersection observer API를 사용하자!

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

[React Query] Section3- Infinite Queries for Loading Data “Just in Time”(”동적" 데이터 로드를 위한 무한 쿼리)

Infinite scrollfetch new data “just in time” as user scrolls (사용자가 스크롤할 때마다 새로운 데이터를 가져오는 것이다.)more efficient than fetching all data at once(모든 데이터를 즉

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

[React] React query를 이용해 Infinite scroll을 구현해보자

해당 포스팅은 React query의 useInfiniteQuery api와 IntersectionObserver 로직을 이용해 무한스크롤을 구현하는 방법에 대해 서술하는 데 목적이 있다.

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

[Vue] 무한 스크롤 예제(vue-infinite-loading) (with Vuex)

vue-infinite-loading 사용.https://peachscript.github.io/vue-infinite-loading/guide/

2022년 7월 6일
·
0개의 댓글
·