# infinite scroll

50개의 포스트
post-thumbnail

[React] useInView를 활용한 Infinite Scroll

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

1일 전
·
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개의 댓글
·
post-thumbnail

[React] infinite scroll을 구현해보자

IntersectionObserver를 이용하여 React에서 Infinite Scroll 구현하기

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

[React] Pagination & Infinite Scroll

웹에서 사용자에게 보여줄 요소들을 구성하는 방식은 여러가지가 있겠지만가장 대중적으로 쓰이는 두가지 방식을 알아보자.Page 단위로 관리하여 보여주는 pagination다른 하나는 스크롤을 내릴때 지정해놓은 단위별로 불러오는 infinte scroll방식 페이지네이션에

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

UX - pagination vs infinite scroll

Pagination-페이지네이션 페이지네이션은 게시글 목록 페이지에서 가장 흔하게 볼 수 있는 페이지 처리 방식으로 사용자가 페이지 하단에 있는 숫자 형식의 링크를 클릭하면 해당 페이지가 보여지게 하는 방식이다. pagenation 구현 import { u

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

Pagination & Infinite Scroll

페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법.일반적으로 몇 가지 공통된 주제 혹은 목적들을 지니고 있는 페이지에서 사용된다.유튜브 또는 페이스북과 같이, 페이지를 아래로 스크롤 하다가 종단점에 도달하면 새로운 데이터가 계속해서 추가되는 방식의 페이지 처리

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

15) 셋째주 금요일

Algorithm Self Study, Infinite Scroller , Code Review, Daily Scrum, Algorithm Class, self Study

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

Day 15)1. 객체와 배열이 복사가 이상해.. => Shallow-Copy 2. 스크롤 형태의 페이지네이션 만들자! => Infinite-Scroll

오늘 목표 다음 페이지 클릭했을 때 2교시 댓글 수정 ![](https://velog.velcdn.com/images/songinho96/post/f2b54

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

Day-14 Pagination vs Infinite scroll, State-Lifting

Infinite scroll이란 무한 스크롤이라고 하는데 페이지 하단에 도달했을 때 콘텐츠가 다른 페이지로 이동하지 않고 계속 로드되는 방식이다.무한스크롤은 단일 페이지에서 끝없는 정보의 흐름을 보여주기 때문에 페이스북, 인스타그램 등에서 흔하게 볼 수 있다.스크롤을

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

Pagination vs Infinite scroll

Pagination pagination은 인쇄 또는 디지털 콘텐츠를 개별 페이지로 분리하는 프로세스다. 인쇄 문서 및 일부 온라인 콘텐츠의 경우 Pagination은 페이지의 순차적 순서를 식별하기 위해 연속 번호를 추가하는 자동화된 프로세스를 나타낸다. 검색 엔진 결과 페이지(SERP), 블로그 및 토론 포럼과 같은 일부 유형의 웹 사이트 콘텐츠는 별...

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

무한 스크롤(Infinite Scroll)

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

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

Infinite Scroll

Intersection Observer API을 이용해서 Infinit Scroll을 구현했습니다.

2022년 5월 11일
·
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개의 댓글
·