오늘 한 일
오늘도 컨디션이 좋지 않은 채 기업 과제를 이어갔다.
생각보다 무한 스크롤에 사용하는 Intersection Observer API가 어려워서 시간을 잡아 먹었다.
공부한 것
많은 목록을 나열할 때 페이지를 나눠서 다음 페이지로 이동하거나 일정 목록을 보고 나면 다름 목록들이 나오는 무한 스크롤을 이용한다.
이번 기업 과제에서는 무한 스크롤을 구현해야 했기에 흔히 사용하는 Intersection Observer API를 적용해보았다.
원리
우리가 보고 있는 화면을 Viewport라고 할 때 Viewport에 사전에 정해놓은 Target이 보이면 다음 목록을 보여준다.
정의
const observer = new IntersectionObserver(Callback(), option
우리는 이 observer를 생성하므로서 무한 스크롤을 제어할 수 있다.
Callback 함수는 Viewport와 Target이 교차되었을 때 실행되는 함수이다. 보통 목록을 더 불러오는 작업을 한다.
option은 몇 가지 조건을 붙이는데, 보통 3가지를 넣는다.
1. root: Viewport를 지정, 기본값은 브라우저에서 우리가 보고있는 화면이 된다.
2. threshold: 0에서 1사이에 값을 사용하는데, 이것은 Viewport와 Target이 교차되는 비율이다. 이 비율이 채워지면 Callback 함수가 실행된다.
3. rootMargin: root가 가진 margin이라고 생각하면 좋은데, threshold를 계산할 때 rootMargin 만큼 더 계산한다.
실제 본인 코드
오늘 완전하게 만든건 아니지만 실행이 되는 것을 확인한 코드이다.
중간에 주석처리한 코드는 target을 재지정 하는 코드인데 본인은 가장 밑에 따로 target을 나둬서 필요없다고 판단해서 주석처리를 했다.
