Intersection Observer를 사용하여 lazy loading 해보기

안녕하세요. 이번시간에는 Intersection Observer를 사용한 Lazy Loading에 대해 알아보도록 하겠습니다!

Lazy Loading이란

페이지의 초기 로드 후까지 굳이 필요 없는 내용들의 로드를 딜레이 시키는 것입니다.

그렇게 로딩을 적용함으로써 유저가 바로 볼 수 있는 부분은 바로 로드 하고 그 이후로 유저가 스크롤을 내리면서 그 내용을 볼 수 있을때 아직 로드 안한 부분을 순차적으로 보여주는 것이죠!

현대 어플리케이션에서 lazy loading을 추가하는 방법에는 다양한 방법이 있는데, 가장 흔하게 사용되는 것중 하나가 바로 무한 스크롤링입니다! 첫번째로 유저가 보여줄 곳만 렌더링하고 그 이후의 컨텐츠들은 아래로 스크롤 하면서 필요한 부분이 생길때마다 추가적으로 렌더링을 시키는 것이죠

또한 React에서 code splitting 이라는 기술을 사용 해 볼수도 있겠죠! code spliting은 말그대로 코드를 부분 부분 쪼개면서 저희의 프로젝트 번들 사이즈를 대폭 줄이고 유저가 필요할때 그 쪼갠 컴포넌트들을 노출 시키는 것입니다.

이번 글에서는 바닐라 자바스크립트에서 제공하는 Intersection Observer API를 알아보는 시간을 가지겠습니다!

Intersection Observer API 사용해보기

수년이 지나면서 웹은 계속해서 진화해왔습니다. 브라우저에 지원되는 기능들이 굉장히 많아지고 잇고, 새로운 API들고 계속해서 탄생하고 있습니다!

예를들어 예전 브라우저에는 어떠한 요소들이 현재 우리가 보고 있는 viewport에 들어있는지 체크하는 기술이 없었습니다. 그리고 jQuery같은 여러 라이브러리들에 의존하곤 했죠. 하지만 요즘은 이러한 기능을 제공해주는 기능이 사용되는데 그것이 바로 Intersection Observer입니다.

Intersection Observe은 어떠한 특정 요소가 교차하는지 체크하여 이것이 우리의 viewport안에 들어오는지를 체크하는 것입니다.

Intersectio Observer API 작동 예시 이미지

위의 사진 처럼 어떠한 엘리먼트가 우리가 보고 있는 브라우저의 viewport와 교차하는지 체크해서 현재 우리가 이 엘리먼트를 볼 수 있는지를 체크할 수 있습니다.

이러한 기술은 여러 방면에서 쓰이게 됩니다.

페이지를 스크롤하면서 이미지나 다른 컨텐츠들의 지연로딩을 시키기

무한 스크롤링 하기

요소들의 노출을 체크해서 광고 수익을 계산하기

브라우저가 어떠한 요소들이 보이자마자 어떠한 이벤트나 코드를 발생 시키도록 만들기

와 같은 여러 상황에서 쓸 수 있습니다!

이제 어떤식으로 개발하면 되는지 알아보겠습니다.

기본적으로 어떠한 요소를 감지할 observer를 만들어야합니다.

let observer = new IntersectionObserver(callback, options);

위의 코드가 observer을 생성하는 기본 코드인데, callback함수에는 해당 요소가 감지되었을때 받을 수 있는 여러 프로퍼티가 들어옵니다. ( 나중에 이 프로퍼티들로 다양한 이벤트를 적용시켜 컨트롤 할 수 있습니다.)

그리고 options에는 옵션들을 줄 수 있는데, 주 옵션들은 이렇습니다.

root : 대상의 가시성을 확인하기 위해 viewport로서의 역할을 수행하는 요소를 넣습니다. 기본값은 브라우저의 viewport입니다.

rootMargin : root 요소에 둘러싼 margin 값입니다.

threshold : 관찰하는 요소가 어느정도 비율의 가시성에 들어왔을때 콜백을 받아올지 정하는 옵션입니다. 기본값은 0이고 1부터 까지 지정할 수 있습니다. 1은 모든 요소가 노출되었을때 이고 그 요소가 50% 노출 되었을때 콜백을 받고 싶으면 0.5를 사용하면 됩니다.

위 옵션들을 적용 시킨 예시 코드를 보겠습니다

const options = {
  root: document.querySelector(".container"),
  rootMargin: "10px",
  threshold: 0.5
};
const observer = new IntersectionObserver((elements) => {
  elements.forEach((element) => console.log("element", element));
}, options);

그리고 저희가 지켜볼 target을 정해줍니다.

const target = document.querySelector(".header");

그리고 IntserectionObserver 생성자로 인스턴스를 만든 observer를 이용하여 해당 target을 지켜보도록 알려줍시다

observer.observe(target);

모든 코드를 지켜보면 아래와 같이 됩니다.

const options = {
  root: document.querySelector(".container"),
  rootMargin: "10px",
  threshold: 0.5
};

const observer = new IntersectionObserver((elements) => {
  elements.forEach((element) => console.log("element", element));
}, options);

const target = document.querySelector(".header");
observer.observe(target);

위의 코드를 분석하면 container라는 class 속성값을 가진 요소에 타겟을 지정한 header의 요소가 50%가 교차되는 지점에 들어왔을때 그 요소들의 프로퍼티들에 대한 값들이 콜백함수로 들어옵니다.

실제 업무에서는 그 콜백 인자들을 받아 원하는 이벤트들을 주어 개발을 진행하시면 되겠습니다! 예를들어 이미지 지연로딩을 원했을때 이미지들에 대한 프로퍼티들이 elements callback 인자로 들어올것이고, 그것들 받아 이미지들을 로드 시키면 되겠습니다! 다시 한번 더 정리하자면 첫 이미지를 placeholder image와 같이 사이즈가 작은 이미지를 로드 시키거나 background 색상을 지정하여 실제로 로드 시킬 이미지를 대신하여 가벼운 컨텐츠들을 로드 시킨다 → 이미지가 들어있는 타겟이 뷰포트에 들어오게되면 실제로 로드 시킬 이미지로 src를 변경한다 이상으로 간단하게 IntersectionObserver를 이용하여 lazyLoading을 어떻게 주는지 알아보았습니다. 감사합니다