Javascript
[Vanilla Javascript] 무한 스크롤(infinite scroll) 구현하기
🤔 무한 스크롤이란? 컨텐츠를 페이징하는 기법 중 하나로 스크롤을 이용해 맨 아래까지 도달할 때 새로운 컨텐츠를 불러오는 방식을 말한다. 🪄 구현 방식 스크롤을 끝까지 내렸을 때 fetch된 새로운 데이터를 엘리먼트에 계속 추가(appendChild)하는 방식으로 구현한다. 구현 방식은 크게 두 가지이다. 1. scroll 이벤트를 이용한 방법 - 전통적인 방식 - window의 scroll 이벤트가 일어날 때마다 브라우저 화면의 높이, 스크롤바의 위치를 이용해 body(컨텐츠)의 끝까지 다다랐으면 새로운 데이터를 가져오는 방식을 말한다. - window.innerHeight : 클라이언트에서 보여지는 화면 중 탭, url 주소창, 북마크 탭을 제외한 브라우저의 높이 - window.scrollY : 현..