# 무한스크롤

22개의 포스트

뷰페이저 무한 스크롤 + 자동스크롤

디자인 요구에 따라 뷰페이저에 무한스크롤과 자동스크롤을 구현해야했다.디테일한 요구사항은 좋아요가 있으면 좋아요 한 이미지가 나오고 없으면 3개의 뷰페이저가 좌우로 흘러가는데 그것들이 다른 방향으로 무한슼크롤 + 자동스크롤이 되어야했다.처음에 요구사항을 듣고 좌우로 흘러

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

[TIL] 9월 17일 무한스크롤, state 끌어올리기

오늘은 어제에 이어서 무한스크롤 설정방법, 그리고 하위컴포넌트에서 상위컴포넌트를 제어할수 있게 하는 state 끌어올리기에 대해서 배웠다.State 끌어올리기react의 데이터 흐름은 단방향 이다.즉 부모컴포넌트에서 자식컴포넌트를 변경할수 있고 자식에서 부모를 변경할수

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

데브코스 28일차 TIL : 자바스크립트 무한스크롤 UI

자바스크립트에서 무한스크롤 UI를 구현하는 방식을 살펴보면서, 무한스크롤을 구현할 때 사용하면 좋은 디바운스와 쓰로틀 방식까지 알아보려 한다.무한스크롤은 페이스북, 인스타그램 등에서 주로 볼 수 있는 방식으로, 아래로 스크롤하다가 마지막 컨텐츠를 볼 즈음 다음 컨텐츠를

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

[Android/Kotlin] Infinite/endless Scrolling(무한 스크롤) 페이징

RecyclerView 무한 스크롤 무한 스크롤이란? 리스트를 밑으로 스크롤 했을 때 progressBar가 보였다가, 새로운 리스트가 추가되는 것을 말함. ** 📌구현방법 RecyclerView 생성 Scroll이 끝에 닿는 것을 감지하여 닿았을 경우 데이터에

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

Intersection Observer (뷰포트 노출 감지) | APIs

Intersection Observer란 뷰포트의 영역과 타겟 요소 영역의 중첩을 감지(Detect)하는 웹 API 기술이다.쉽게 말해 사용자의 화면에 특정 요소가 보이는지의 여부와, 영역이 겹친 정도 등을 알려주는 비동기적 센서라고 할 수 있다.Intersectio

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

React 무한 스크롤 구현하기 with Intersection Observer

🔥🔥 Intersection Observer API를 이용한 React 무한 스크롤(Infinite Scroll) 만들기!

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

[TIL] Intersection Observer 와 React에 대해

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

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

[React] Infinite Scroll 구현

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

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

무한 스크롤(Infinite scroll) 구현하기

게시판의 많은 양의 글을 편리하게 보기 위해 무한 스크롤 방법으로 페이징 기능을 구현해 봤습니다.무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식입니다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고

2021년 6월 14일
·
0개의 댓글
post-thumbnail

#TIL25, React로 무한스크롤 구현✨

개인 공부를 위해 작성했습니다1차 프로젝트를 하면서 메인 페이지의 전체 상품을 가져오는 기능 구현 중, 성능상 한 번에 많은 상품이 전부 노출되기 보단 스크롤에 따라 일정 데이터의 양 만큼 호출되도록 기능 구현이 필요했다. 그럴 때 알게 된 무한스크롤 기능 구현했던 내

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

프로그래머스 데브매칭 무한스크롤

깃허브 repository여러 방법 중 Intersection Observer API 사용loading 속성의 경우 width : 100% 적용 시 width,height가 없어 레이지 로딩 불가observeBottomOf.js : element의 아래 부분에 도달할

2021년 2월 26일
·
0개의 댓글

Pagenation

qurey parameter는 url 뒤에 원하는 데이터에 대한 요구 조건임 기능 구현 하다보면 URL Query Parameter 값을 가져와야 하는 경우가 발생합니다. 이 때 다양한 방법으로 값을 가져올 수 있지만 location.search 를 이용해서 바로 값

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

React에서 무한스크롤 구현하기 📑

안녕하세요 오늘은 TypeScript + React에서 무한스크롤을 구현하는 방법에 대해서 알아보도록 하겠습니다.

2021년 2월 22일
·
2개의 댓글
post-thumbnail

Intersection Observer를 활용한 Lazy Rendering - TypeScript

부스트 캠프에서 가계부 서비스를 개발하며 겪었던 난관 중 하나를 해결하는 과정에 대해 공유하고자 합니다. 프로젝트를 진행하며, 한 달간의 거래내역 페이지에서 거래내역 data의 양이 많을 때 랜더링 속도가 매우 느린 것을 관찰하였고 이를 개선하고자 무한스크롤을 구현하려

2020년 12월 24일
·
1개의 댓글

#28. 무한 스크롤 (infinite scroll) 구현

// infiniteScroll = () => { // const scrollHeight = Math.max( // document.documentElement.scrollHeight, // document.body.scrollHeigh

2020년 11월 29일
·
0개의 댓글
post-thumbnail

TIL 56 | React로 무한스크롤 구현

참고 자료 : React에서 Infinite Scroll 구현하기무한스크롤은 화면의 맨 아래까지 스크롤을 하면 새로운 컴포넌트가 랜더되는 형태이다. 페이스북, 인스타그램 등 다양한 사이트가 이러한 무한 스크롤 형식을 띄고 있다.

2020년 9월 18일
·
1개의 댓글
post-thumbnail

firestore에서 where절 이용해 filter기능 구현 및 더보기 무한스크롤 기능 구현

firestore에서 where절을 이용해 filter 기능 구현하기! 그리고 더보기 함수를 만들어 무한스크롤 기능을 구현해보았다!

2020년 5월 29일
·
0개의 댓글
post-thumbnail

무한 스크롤 만들기 : Throttling

프로그래머스 2020 Dev-Matching : 웹 프론트엔드 과제 복기 https://github.com/woohyeonjo/ilovecat

2020년 3월 31일
·
0개의 댓글