🟦 INTERSECTION OBSERVER

• https://heropy.blog/2019/10/27/intersection-observer/

1. 🔹 Intersection Observer : 요소의 가시성 관찰

• 브라우저 viewport와 설정한 요소(Element)의 교차점을 관찰하며,
  요소가 뷰포트에 포함되는지 포함되지 않는지,
  (더 쉽게는) 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공한다.
• 이 기능은 비동기적으로 실행된다.
• new IntersectionObserver()를 통해 생성한 인스턴스(io)로
  관찰자(Observer)를 초기화하고 관찰할 대상(Element)을 지정한다.
• 생성자는 2개의 인수(callback, options)를 가진다.

const io = new IntersectionObserver(callback, options);
io.observe(element);

2. 🔹 callback

• 콜백함수 : 다른 함수에 인수로 넘겨지는 함수
• 관찰할 대상(target)이 등록되거나 가시성(visibility, 보이는지 안보이는지)에 변화가 생기면
  관찰자는 콜백(callback)을 실행한다.
• 콜백은 2개의 인수(entries, observer)를 가진다.

const io = new IntersectionObserver( (entries, observer) => {} , options );
io.observe(element); 

3. 🔹 entries

• entries는 IntersectionObserverEntry 인스턴스의 배열이다.
• IntersectionObserverEntry 는 읽기전용(Read only)의 다음 속성들을 포함한다.
  • boundingClientRect : 관찰대상의 사각형 정보
  • 
  • intersectionRect : 관찰대상의 교차한 영역 정보
  • 
  • intersectionRatio : 관찰대상의 교차한 영역 백분율
    (intersectionRect영역에서 boundingClientRect영역까지 비율, Number)
  • isInterecting : 관찰대상의 교차 상태(Boolean)
  • 
  • rootBounds : 지정한 루트 요소의 사각형 정보
  • target : 관찰 대상 요소 (Element)
  • time : 변경이 발생한 시간 정보

4. 🔹 observer

• 콜백이 실행되는 해당 인스턴스를 참조한다.

const io = new IntersectionObserver((entries, observer) => {
  console.log(observer); 👉 🟢👆IntersectionObserver의 객체가 출력된다.🟢
}, options);
io.observe(element);

• 

5. 🔹 options

• root

  • target의 가시성을 검사하기 위해 뷰포트 대신 사용할 요소 객체(루트요소)를 지정한다.
  • target의 조상요소이어야 하며 지정하지 않거나 null일 경우
    브라우저의 뷰포트가 기본 사용된다.
  • 기본값은 null

const io = new IntersectionObserver(callback, {
  root : document.getElementId('my-viewport'); 
})

• threshold

  • 옵저버가 실행되기 위해 target의 가시성이 얼마나 필요한지 백분율로 표시한다.
  • 기본값은 Array타입의 [0]이지만 Number 타입의 단일 값으로도 작성할 수 있다.
  • 0 : target의 가장자리 픽셀이 Root범위를 교차하는 순간
    (target의 가시성이 0%일 때) 옵저버가 실행된다.
  • 
  • 0.3 : target의 가시성 30%일 때 옵저버가 실행된다.
  • 
  • [0, 0.3, 1] : target의 가시성이 0% , 30% , 100%일 때 모두 옵저버가 실행된다.
  • 

const io = new IntersectionObserver(callback, {
   threhold : 0.3 //threhold : [0.3] 
})

6. 🔹 Method

• observe() : 대상 요소의 관찰을 시작한다.
• unobserve() : 대상 요소의 관찰을 중지한다.
• disconnect() : IntersectionObserver 인스턴스가 관찰하는 모든 요소의 관찰을 중지한다.

🟦 children

• 자식 요소에 접근
• 현재 요소의 자식 요소가 포함된 HTMLCollection을 반환합니다.
  document.querySelector("div").children

🟦 element.offsetHeight

• margin을 제외한, padding값, border값까지 계산한 값을 가져온다

🟦 element.clientHeight

• margin값과 border값이 제외된, padding값까지만 적용된 내부의 실제크기를 가져온다

🟦 scroll이벤트의 passive옵셥

• 요즘엔 scroll이나 touchstart 같은 이벤트에 passive 옵션을 추가하지 않으면 콘솔에 경고까지 뜬다.
• passive가 true인 이벤트 리스너는 preventDefault()를 호출할 수 없다.
• preventDefault()를 호출할 일이 없으니, 브라우저의 메인 쓰레드에까지 악영향을 끼치는 일 을 막을 수 있다.

🟦 이벤트의 옵션

• addEventListener() 함수는 파라메터로 옵션을 추가할 수 있다
• capture: 기본값 false. 이벤트를 캡쳐링(Capturing) 방식으로 전파(Propagation) 할지를 결정한다. 이벤트 캡쳐링과 버블링에 대한 이해가 필요하다.
• once: 이벤트가 한번만 호출되고 등록한 이벤트 리스너가 삭제. 한번 사용후 폐기해야 하는 경우.
• passive: 기본값 false.
• true 인 경우 콜백 함수에서 preventDefault()(이벤트 취소 및 타겟의 기본 동작 차단) 를 사용할 수 없다. 이벤트에 의해 스크롤이 블럭되는 것을 막아주며, 주로 모바일 브라우저의 스크롤 성능 향상을 위해 추가된 옵션이다.

🔹 내가 만든 무한스크롤 소스

setTableScrollInfinity : function () {
        tableDivElem.addEventListener('scroll', () => {
            let $tr = cmtListElem.lastElementChild;
            const io = new IntersectionObserver((entries, observer) => {
                const entry = entries[0];
                const ioTarget = entry.target;
                if (entry.isIntersecting && this.tableItemLength === this.tableLimit) {
                    console.log('현재 보이는 타겟 : ', ioTarget);
                    io.unobserve($tr);

                    this.tableItemLength = 0;
                    this.getCmtList(++this.currentTablePage);
                    $tr = cmtListElem.lastElementChild;
                    io.observe($tr);
                }
            }, {
                root : tableDivElem,
                threshold : 0.3
            });
            io.observe($tr);
        }, {passive : true});
    },