# infinitescroll

sebinn

Intersection Observer API로 InfiniteScroll 구현

ljw4536

풀스택과 관련된 어떤 강의를 시청하면서 custom hook을 생성하여 IntersectionObserver() 생성자와 함께 사용하여 50개 이상의 메세지 컨텐츠 데이터들을 특정 개수 단위로 잘라서 스크롤을 내릴 때마다 호출되도록 하는 일명 무한 스크롤(Infini

longcoat

무한스크롤 -> 유튜브 또는 페이스북 같이 페이지를 아래로 스크롤 하다가 종단점에 도달하면 새로운 데이터가 계속해서 추가되는 방식의 페이지 처리방법react infinite scroller 사용 (npm에서 react-infinite scroller docs 참고)1.

jejualrock

현재 "Simple SNS" 프로젝트는 axios 라이브러리를 이용하여 클라이언트에서 서버로 데이터를 요청하여 받고 있다. 하지만 XMLHTTPrequest나 fetch를 사용할 때도 마찬가지로 서버에 요청을 하기 위해서는 우선 서버 URL이 필요하다.

jejualrock

SNS에 작성된 모든 컨텐츠를 한꺼번에 요청을 하게 된다면 클라이언트의 뷰에 업데이트를 할 때 렌더링 되는 데 시간이 걸리게 된다. 또한 서버에서도 한 번에 많은 데이터를 보내야 하기 때문에 부하가 생긴다. 사용자 입장에서도, 그리고 서비스 제공자 입장에서도 한 번에

dogsocks

이번 과제에서 react query를 활용하여 무한스크롤을 구현하는 과제가 있었다.useInfinity 쿼리를 활용하여 페이지가 증가할 때 마다 추가 데이터를 불러오는거는 문제가 없었는데스크롤의 최하단에 도달할 때 fetch가 작동하게 하는 방법을 찾아보니'react-

lilys2

스타워즈 API와 React-Query, infinite-scroll 패키지를 이용해서 인피니티 스크롤을 만들었다.

apro_xo

[react-query] useInfiniteQuery로 무한스크롤 구현하기

nanyong0214

댓글 수정 > 1. graphql에서 게시글 목록을 query 한다. >2. 배열이 전부 false인 변수를 state에 담는다. >3. 수정하기 버튼을 눌렀을 때(event.target.id)의 state값이 true로 바뀌도록 한다. >4. map으로 뿌려준

rlatjsdn147

Pagenation, 말그대로 페이지를 나타내는 것이다. 흔히 볼 수 있다.프론트엔드에서 게시물 목록이나 상품목록 등이 필요할 때, map을 사용해 리스트화시키고 보여준다, 그런데 우리가 fetchBoards(목록 조회하는 API)라는 API요청을 백엔드로 보내게 되면

apro_xo

Intersection Observer API 설명 및 React 적용 사례

jinyinshu

들어가기예를 들어, 손흥민 팔로우를 loading한다고 할때, data가 너무 많으면,loading시 error가 날수도 있고, server가 힘들진다.따라서, 스크롤이 화면 아래에 왔을때, 이어서 3~4개의 data를 loading하게하는것, 여기서 feed부분만 설

silverj-kim

최근 무한스크롤을 구현하다가 intersection observer에 대해 알게 되어 오랜만에 정리합니다.

jce1407

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

secho

무한스크롤을 구현하는 방법scrollIntersectionObserver스크롤이벤트를 attch하여 현재 스크롤위치를 계산해 맨 끝에 스크롤되었을 때 다음 데이터를 fetch하는 방법을 사용한다.스크롤마다 이벤트가 발생하므로 성능이슈를 예방하기 위해 쓰로틀링 적용을

decemberok

처음에는 그냥 홈에서 모든 포스트를 불러와서 그대로 보여주는걸 선택했다. 그래서 그냥 GraphQL Resolver도 getPosts를 하나 만들어서 몽땅 전체 포스트를 불러오기로 막연하게 만들었다. 그러나 조금만 생각해보니 너무 많으면 초기 로딩이 오래 걸릴 것 같아

april_5

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

kyungjune

1.useEffect안에 async는 반환하는값의 형태가 다르므로 쓸수 없다. 그래서 새로운 함수를 만들어서 호출하는 방식으로 진행하였다.2.새로운 컴포넌트에 input의 onChange가 될때마다 비동기 서버 통신을 하는 커스텀훅을 만든다.3.useEffect의 op

namda-on

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

sunnysideup0w0

IntersectionObserver를 이용한 Infinite Scroll 만들기