Vanilla JS Infinite Scroll

순수 JavaScript와 Intersection Observer를 활용한 무한스크롤 구현

#2. Vanilla JS순수 JavaScript - DOM 조작 기반 구현

핵심:순수 JavaScript + Intersection Observer - 프레임워크 없이 순수 JavaScript로 직접 DOM을 조작하여 무한스크롤 구현

✅ 장점: 가벼운 번들 크기, 빠른 실행 속도, 프레임워크 의존성 없음, 직접적인 DOM 제어, 높은 성능

❌ 단점: 수동 DOM 관리, 메모리 누수 위험, 코드 재사용성 낮음, 유지보수 어려움, 복잡한 상태 관리

💡 사용 시나리오: 가벼운 웹사이트, 성능이 중요한 프로젝트, 프레임워크 사용 불가능한 환경, 마이크로 프론트엔드

🔧 동작 방식: IntersectionObserver API로 스크롤 감지하고, DOM 조작으로 리스트 아이템을 동적 추가하며,async/await로 비동기 데이터 페칭 처리

Vanilla JS InfiniteScroll