Vue에서 Intersection Observer를 활용한 무한 스크롤 구현하기

Intersection Observer 란? 브라우저의 자바스크립트 API 중 하나입니다. 엘리먼트의 가시성 변화를 감지할 수 있습니다. 예전에는 스크롤 이벤트를 통해서 스크롤 페이징을 구현하였는데, 브라우저 과부하를 일으켜서 성능 저하가 일어나기도 하였습니다. 하지만 Intersection Observer API를 브라우저의 내부 로직을 이용하여 엘리먼트의 가시성 변화를 감지할 수 있어서 성능이 좋고 효율적으로 무한 스크롤을 구현할 수 있습니다. 언제 사용하면 좋은지? 1. 무한스크롤 구현 사용자가 스크롤을 할 때 새로운 내용을 동적으로 로드할 수 있습니다. 무한스크롤을 이용하면 페이지 로딩 속도를 개선할 수 있고 부드러운 사용자 경험을 제공할 수 있습니다. 2. 이미지/광고 로딩 최적화 화면에 보일때..