[TIL] 프로그래머스 프론트엔드 데브코스 DAY30 TIL

DAY17 회고 이후에 WIL을 작성하고,

MIL을 작성하고, 
노션 클론코딩을 진행하는 동안 포스팅을 중단하고 프로젝트 회고를 작성하니

17일차 이후에 30일차 TIL이 되어버렸다.

 

공부한 내용 📖

 

무한 스크롤 기능을 구현하였다.

무한 스크롤 기능은 인스타 facebook등 SNS에서 우리가 흔히 보던 기능이다.

footer에 접근하기 어려우므로 무조건적으로 좋은 것은 아니다.

 

1. window.innerHeight + window.scrollY >= document.body.offsetHeight

 

무한 스크롤을 구현하기 위해 크게 두 가지 방법이 있다.

 

하나는 window.innerHeight 와 window.ScrollY를 사용하여 문서의 최하단에 시점이 닿은 경우 다음 화면을 불러오는 것이다.

  window.addEventListener("scroll", () => {
    const isScrollEnded =
      window.innerHeight + window.scrollY >= document.body.offsetHeight;

    if (isScrollEnded) {
      onScrollEnded();
    }
  });

isScrollEnded인 경우 onScrollEnded라는 함수를 상위 컴포넌트로 넘겨 상위 컴포넌트에서 다음 화면을 fetch 후 정보를 다시 넘겨준다.

 

이 코드를 보고 그래서 왜????

window.innerHeight + window.scrollY >= document.body.offsetHeight;이 식이 있는건데?

라는 생각이 들어 찾아보았다.

 

MDN에 의하면 

"Window 인터페이스의 scrollY 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다."

라고 한다. 

얼마나 스크롤 하였는지 라고 정의할 수 있겠다. (스크롤을 아예 안한 상황이면 0이 될 것이다.)

 

Window.innerHeight의 경우 

"Window 인터페이스의 읽기 전용인 innerHeight 속성은 창 내부 height(px) 를 return 한다."라고 적혀있다.

설명만 들어서는 무슨 소리인지 모르겠는데 아래에 그림이 있었다.

MDN에 등록된 사진 예시

 

결론) 그럼 innerHeight가 300px이고 scrollY가 0px이면 창 높이는 무조건 300px으로 고정이고 아직 스크롤을 하지 않은 상태의 scrollY가 0, 스크롤 할 때마다 srollY값이 증가되겠군.

 

document.body.offsetHeight는 

 

요렇게 우리가 보고있는 Element의 margin을 제외한 높이인데 

Element의 높이를 의미하므로 그림에서는 보이는 부분의 높이를 의미하는 것 같지만

실제로는 Element 전체의 높이를 의미한다.

 

고로 보고 있는 창의 세로 길이 + 얼마나 스크롤했는지의 합 이  element의 전체 길이가 되면 새로운 화면을 불러오는 함수를 호출하면 된다는 것이다!

 

 

2. IntersectionObserver

앞선 무한 스크롤 구현 방법에 비해 비교적 최신 기능이라고 한다. MDN을 읽어보니 

" 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단" 이라는 외계어가 적혀있다. 아무리 읽어봐도 모르겠다.

 

일단 MDN에 적힌 예제 코드를 토대로 만들어보았다.

  const observer = new IntersectionObserver(
    (entries) => {
      //내코드
      if (entries[0].intersectionRatio <= 0) return;
        console.log("화면 끝", entries);
        onScrollEnded();
      
    }
  );
  
 // 주시 시작
observer.observe($lastLi); //렌더링 된 li들 중 마지막 li를 $lastLi로 설정함
//   const $nextLi = $photos.querySelector("li:last-child");

짜보니까 이해가 됐다.

IntersectionObserver의 콜백함수에 인자로 전달된 $lastLi가 주시 대상이 되는것이고, 

if문을 보니 화면에 안나오면 그냥 return 하되

$lastLi가 화면에 등장하면 다음 화면을 렌더하는 onScrollEnded()를 호출하는 것이다.

강의에선 예외처리 등을 하느라 좀 복잡했지만 큰 토대는 이정도로 크게 어렵진 않았다.

 

궁금한 내용/부족한 내용🤔

경우에 따라 window.innerHeight + window.scrollY >= document.body.offsetHeight; 를 사용하는 방식과 IntersectionObserver를 사용하는 방식 중 어떤 것이 더 좋을지 판단해야 하는데, 그 판단의 근거가 무엇인지 모르겠다.

 

IntersectionObserver 의 MDN에 있는 공식 설명은 이해를 못하겠다... 용어의 문제인듯 하다.

 

느낀점✍

무한스크롤을 단순히 구현하는것은 어렵지 않았다.

그러나 TIL을 작성하기 위해 무한스크롤을 구현하는 원리에 대해 알아보니, 생각보다 많은 내용을 학습해야했고, 앞으로의 구현에 좀 더 확실한 자신감이 생겼다. 

더 공부하지 않았으면 나에게 새로운 프로그램을 만들어 무한스크롤을 구현하라고 하면 꽤 많은 어려움을 겪거나 강의 코드를 카피했을 것 같은데, 오늘 정리를 통해 그냥 혼자 MDN보고 뚝딱 만들 수 있게 된 것 같다.