無制限スクロール実装

ロールイベント

> window.addEventListener('scroll'()=>{
  //전체 화면의 높이 
const displayedContentHeight = document.body.offsetHeight;
  // 현재 화면에 표시된 높이
const windowHeight = window.innerHeight;
  // 스크롤 된 높이
const scrollHeight = window.scrollY;
  
  // 컨텐츠 제일 가장 부분이 보이는지에 대한 변수
const isScrollReachedEnd = windowHeight + scrollHeight >= displayedContentHeight;
  
  if(isScrollReachedEnd){
  	loadMoreContents();
  }
})

intersectionObserver

交差点Observerとは?

画面に表示されているかどうかの監視者のオブジェクトです.

交差点Observerの作成

const obserber = new IntersectionObserber(function(entries){});
// 첫번째 인자로 들어오는 것은 감시하는 Element의 배열을 인자로 받는 함수가 들어온다.

監視要素の作成と削除

	observer.observe(); // 생성
	obserber.unobserve(); // 추가

交差点オブザーバの使用

function(entries){
  entries.forEach(entry=>{
    console.log(entry.isIntersecting);
    if(entry.isIntersecting){
    console.log(`화면에 ${entry}가 보입니다.`)
      loadMore();
    }
    //해당 감시 요소가 화면에 표시되는지에 대한 불린형 값
  })
}

isIntersectionを使用して画面にコンテンツを表示すると、スクロールイベントよりも多くのコンテンツをロードして表示することで、パフォーマンスが向上します.

ThrottleとDebounseの違い

Throttleとは、イベントが繰り返されると、最初にイベントが実行されることを意味し、Debounseとは、イベントが繰り返されると、最後にイベントが実行されることを意味する。

に感銘を与える

普段使っているUIはこのような複雑な原理に従って働いていることに気づきました。これはサービスを利用してこれまで見られなかったUIの動作原理を考えるきっかけになったようだ。