[Web API] Intersection Observer API에 대해 간단히 알아보자. (feat. 무한 스크롤)
·
언어/JavaScript
무한 스크롤에 대해 공부하던 중, 이를 구현하기 위해 많이 사용되는 Intersection Observer에 대해 궁금해졌고, 간단한 개념과 사용 방법에 대해 정리한 글이다. Intersection Observer는 Web API로, 브라우저에서 작동하는 자바스크립트의 API다. 웹 기술이 발전함에 따라 로딩되는 요소가 비대해지면서 처음부터 모든 요소를 로드하지 않고, 스크롤할 때 다음 요소를 불러오게끔 구현함으로써 초기 렌더 속도를 향상시키는 등의 기법이 많이 사용되게 되었다. 그 밖에도 사용자가 보는 영역의 변화에 따라 특정한 작업이나 애니메이션을 넣어주고 싶은 경우, 이를 감지하는 무언가가 필요한데 Intersection Observer는 이를 쉽게 구현하기 위한 API다. MDN 문서에서는 다음과..