jvn4dev

  • 홈
  • 태그
  • 방명록

Intersection Observer 1

useInfiniteQuery로 무한스크롤 구현기

Scroll Event vs Intersection ObserverScroll Event로 구현 순서1. scroll 이벤트를 감지한다.2. 현재 스크롤 영역의 `위치를 계산`한다. with Throttle3. 영역 계산을 통해 페이지 아래에 위치하면 API 요청을 진행한다.4. 받아온 데이터를 추가하여 다시 렌더링한다.5. 무한 반복const handleScroll = () => { const { scrollTop, offsetHeight } = document.documentElement if (window.innerHeight + scrollTop >= offsetHeight) { setFetching(true) } }쓰로틀을 걸어서 실질적인 이벤트감지 수를 최적화하더라도 docu..

FE 2024.08.22
이전
1
다음
더보기
프로필사진

jvn4dev

안녕하세요. 개발자 정성준입니다. ZEP이라는 서비스를 만들고 있습니다. 빠른 배포를 통한 핵심 가치 전달에 관심이 많습니다.

  • 분류 전체보기 (12)
    • FE (12)

Tag

symboliclink, SSG, Package Manager, hardlink, 디버깅, Sentry, SSR, Cursor, Next.js, pnpm, node_modules, Intersection Observer, oninput, 에러, nextjs, isr, CSR, Reflow, react, next.config.js, Angular.js,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

Copyright © Kakao Corp. All rights reserved.

티스토리툴바