무한스크롤

1. scroll 이벤트
2. intersectionObserver API

1. scroll 이벤트 ( + 스로틀 )

• 단점

1. 단시간에 수백번, 수천번 호출될 수 있고 동기적으로 실행되기 때문에 메인 스레드(Main Thread) 영향
2. 각 엘리먼트마다 이벤트가 등록되어 있기 때문에 사용자가 스크롤할 때마다 이를 감지하는 이벤트가 끊임없이 호출 (스로틀을 이용해 개선은 한다)
3. 특정지점 감지를 위한 getBoundingClientRect()호출하는 과정에서 Reflow 발생

• scroll 이벤트를 통해 getBoundingClientRect 함수 실행

2. intersectionObserver

• 장점
  getBoundingClientRect() 실행을 하지않아 Reflow 발생을 하지않는다.

intersectionObserver 사용법

const options = {
  root: null, //default값
  rootMargin: '0px 0px 0px 0px', //default값
  threshold: 0 //default값
}

// IntersectionObserver 생성
const io = new IntersectionObserver((entries, observer) => {
  // IntersectionObserverEntry 객체 리스트와 observer 본인(self)를 받음
  // 동작을 원하는 것 작성
  entries.forEach(entry => {
    // entry와 observer 출력
    console.log('entry:', entry);
    console.log('observer:', observer);
  })
}, options)

intersectionObserver options

1. root : 교차영역의 기준 ( threshold와 관련 )
2. rootMargin : 대상의 전체영역이 다 들어와 있는가 기준 ( 조절할 경우 사진이 전부 보이지 않아도 어떤 것을 실행 가능 )
3. threshold : 타겟 엘리먼트에 대한 교차 영역 비율

intersectionObserver 메소드

1. IntersectionObserver.observe(targetElement)
2. IntersectionObserver.unobserve(targetElement)

1. 타겟 엘리먼트에 대한 IntersectionObserver를 등록할 때(관찰을 시작할 때) 사용

2. 타겟 엘리먼트에 대한 관찰을 멈추고 싶을 때 사용

intersectionObserver Properties

1. IntersectionObserverEntry.boundingClientRect
2. IntersectionObserverEntry.rootBounds
3. IntersectionObserverEntry.intersectionRect
4. IntersectionObserverEntry.isIntersecting : 타겟 엘리먼트가 교차 영역에 있는 동안 true를 반환하고, 그 외의 경우 false를 반환합니다.

정리

new intersectionObserver로 등록한 대상(i)이
observe가 등록되면(i.observe(대상target)) 해당 대상에 대해
new로 정의된 option에 의해
new로 정의된 콜백함수를 실행하고
해당 콜백함수에서 조건에 따라 이벤트(함수)를 동작시키게 만든다.

출처

class 속성

1. classList

add, remove ,toggle, contains와 같은 메소드를 사용하기 위해 사용

2. className

class의 값을 가져온다.

<div class='a'>a</div>
<span class='b c'>bc</span>
<script>
console.log(document.querySelector('div').classList)	//DOMTokenList ['a', value: 'a']
console.log(document.querySelector('div').classList.value)	//a
console.log(document.querySelector('div').className)		//a


console.log(document.querySelector('span').classList)		//DOMTokenList(2) ['b', 'c', value: 'b c']
console.log(document.querySelector('span').classList[0])	//b 
console.log(document.querySelector('span').classList[1])	//c
console.log(document.querySelector('span').classList[2])	//undefined 
console.log(document.querySelector('span').classList.value)	//b c
console.log(document.querySelector('span').className)	//b c
</script>

모듈화를 하는 이유

App.js안에서 A.js와 B.js는 A.js의 어떤 행동에 따라 B.js의 영향을 끼치고 싶은데 A.js는 B.js를 몰라도 동작하기 위해서는 App.js로 대상을 옮기고 App.js는 B.js로 영향을 끼치게 하면 A.js와 B.js는 서로를 몰라도 동작 할 수 있게 하여 서로간의 독립성을 만든다.