오늘의 할일 / Lazy loading 수정

🍊 오늘의 할일

• 기술 발표 최종 수정
• Lazy loading 수정

🍊 오늘의 정리

🍉 Lazy loading 수정

이전 구현 정리

이전 lazy loading 구현 정리

구현 수정

Lazy loading과 관련된 내용을 정리하던 중, 내가 구현한 lazy loading의 문제점을 알게 되었다.

1. debounce로 인한 이미지 로딩 지연
2. reflow 현상

이 두가지 문제를 발견하게 되었고, 이를 해결하기 위해 intersectionObserver API를 통한 Lazy loading을 구현하였다.

  const option = {
    root: null,
    rootMargin: '0px',
    threshold: 0,
  };

  const callback = (entries, observer) => {
    const [entry] = entries;
    if (entry.isIntersecting) {
      let classes = cardRef.current.classList;
      classes.add('imgload');
      if (classes.contains('imgload')) observer.unobserve(cardRef.current);
    }
  };

  useEffect(() => {
    const interObserver = new IntersectionObserver(callback, option);
    if (cardRef.current) interObserver.observe(cardRef.current);

    return () => interObserver.disconnect();
  }, []);

이번 기능 구현 과정을 통해 깨달은 점은 특정 기능을 구현할 때에는, 기획단계에 더 많은 시간을 들여야한다는 점이다.

초기에 Lazy loading 구현과 관련된 다양한 방법을 정리하고, 각각의 장단점을 정확히 파악했다면 이번과 같이 두번의 작업을 하는 일은 없었을 것 같다.

코드 작성 전 기능 구현에 대해 시간을 들여 학습하고 기획하여 시행착오를 줄이는 것이 더욱 중요한 것 같다.