프로그래머스 데브코스 TIL - Day 25

 

✅ 오늘의 학습

- 무한 스크롤 UI 구현하기

- Scroll / intersectionObserver

 

 

 

이전에 next를 하면서 무한 스크롤을 구현한 적있었는데

복습할겸 다시 정리를 해보려고 한다.

 

---

 

 

 

버튼 여러 번 클릭 시 중복 요청 제어하기

state에 isLoading 값을 넣고 데이터 요청 시작 시 isLoading값을 false로 주고
데이터를 응답받으면 isLoading값을 true로 주는 방법으로 핸들링 할 수 있다.

  $photoList.addEventListener("click", (e) => {
    if (e.target.className === "photoList__loadMore" && !this.state.isLoading) {
      // this.state의 isLoading이 false여야만 데이터 요청
      onScrollEnded();
    }
  });

 

 

scroll을 통한 infinite Scroll

window.innerHeight + window.scrollY >= document.body.offsetHeight;
// 스크롤이 문서의 맨 끝까지 도달 했는지 확인

window.innerHeight + window.scrollY + 100 >= document.body.offsetHeight;
// 스크롤이 문서의 맨끝에서 + 100px 한 곳까지 도달 했는지 확인

현재 높이와 스크롤 된 값을 더한 값을 통해 body의 offsetHeight를 비교하여

스크롤이 문서 끝까지 되었는 지 확인할 수 있다.

 

문서의 맨 끝인 경우 중복 요청이 되지는 않지만

100px의 여유를 준 경우 문서의 끝에서 -100px부터 0px까지에 닿을 때마다

반복적으로 요청을 보내게 된다.

 

중복 요청 제어하기

  window.addEventListener("scroll", () => {
    const isScrollEnded = window.innerHeight + window.scrollY + 100 >= document.body.offsetHeight;
    if (isScrollEnded && this.state.isLoading && this.state.photos.length < this.state.totalCount {
      onScrollEnded();
    }
  });

 

API의 전체 데이터를 모두 불러왔음에도 계속 API요청을 하게 되기 때문에

현재 API내 의 데이터 전체 개수와 현재 내가 불러온 데이터의 개수를 비교하여 제한을 걸어준다.

 

 

intersection opserver

이미지 지연로딩 할 때 intersection opserver 활용가능

observe, unobserve 잘 체크하기
threshold 값으로 observe 대상이 얼마나 노출되었는지에 따라 동작하게 할 수 있다.

 

new IntersectionObserver 사용

  const observer = new IntersectionObserver(
    (entries) => {
      // entries는 여러개를 지정할 수 있다.

      entries.forEach((entry) => {
        //entry.isIntersecting을 통해 viewport에 해당 entry가 들어왔는 지 알 수 있음.
        if (entry.isIntersecting && !this.state.isLoading) {
          console.log("화면 끝!");
          observer.unobserve(entry.target);
          if (this.state.photos.length < this.state.totalCount) {
            onScrollEnded();
          }
        }
      });
    },
    {
      threshold: 1, // 보이는 영역이 얼만큼인지 지정. 1로 지정 시 view port에 완전히 들어왔을 때 실행
    }
  );

 

observer.observe를 사용한 대상 지정

    const $lastLi = $photoList.querySelector(".photoList__photos li:last-child");
	// 데이터를 불러와서 만든 맨 마지막의 li를 observe로 지정.
    
    if ($lastLi !== null) {
      observer.observe($lastLi);
    }

 

---

✍ 느낀 점

 

이전에 접해봤던 개념이였기 때문에 강의 내용 토대로 간단하게 정리하였다.

intersectionObserver의 경우 이전에 딱 한번 해봤기 때문에

그때 당시 약간 헷갈리는 게 있었는데, 이번 강의를 통해서 조금 더 응용할 수 있는 방법들이 떠올랐다.

개인적으로 프로젝트를 만들 때 다양하게 접목해서 사용해보고 싶은 기능이다.