dev-hpk 님의 블로그

throttle과 IntersectionObserver API를 활용하여 Infinity Scroll을 라이브러리 없이 구현했습니다. 직접 구현하면서 여러 모듈을 조합하여 성능을 최적화하고, 부드럽게 데이터를 로드하기 위해 상당한 고민이 필요했습니다. 특히 throttle로 스크롤 이벤트를 제어하고, IntersectionObserver로 뷰포트 내 요소가 감지될 때만 데이터를 추가 요청하도록 구성한 부분이 핵심이었습니다. 1. IntersectionObserver 적용 Infinity Scroll 구현...function ScrollComponent() { ...생략 const endRef = useRef(null); // Infinite Scroll 구현을 위한 Ref 객체 /** * 서버에..

IntersectionObserver API는 스크롤이나 뷰포트 변화를 감지해 특정 요소가 뷰포트에 진입하거나 떠날 때 콜백 함수를 실행하게 해주는 API입니다. 이를 통해 이미지 지연 로딩, 무한 스크롤, 애니메이션 활성화 등을 효율적으로 처리할 수 있습니다. 목차 1. IntersectionObserver 기본 사용법 2. IntersectionObserver 옵션 3. 주의할 점 4. IntersectionObserver 적용 예시추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. IntersectionObserver 기본 사용법IntersectionObserver는 크게 두 단계로 구성됩니다. 첫 번째로 IntersectionObserver 객체를 생성하고, 두 번째로 해당 객체로 ..