2022/09/30 - TIL

Pair-Programming에서 배운 것

1. CustomEvent

CustomEvent는 3가지의 단계를 통하여 사용할 수 있다.

1. CustomEvent를 생성한다.

const eventName = new CustomEvent('event-name', {
	detail: something	
	//... detail을 통하여 이벤트의 내용이 전달된다.
})

어떤 이벤트 이름으로 어떤 일을 할지를 정한다. 1번에서 정의한 이벤트는 3번에서 정의할 dispatchEvent로 2번에서 정한 addEvenListener에 보낼 때 1번에서 보낸 내용을 이용하여 실행된다.

1. addEventListener을 생성한다

$container.addEventListener('event-name', e => {
	console.log(e.detail)		
	//event 내용
});

addEventListener으로 이벤트가 도착하면, e.detail을 통하여 이벤트로 전달된 내용을 사용할 수 있다.

1. dispatchEvent를 만든다

$container.dispatchEvent(eventName)

dispatchEvent를 이용하여 eventName인 이벤트의 내용을 전달한다. addEventListener처럼 어떤 이벤트를 정의하여 그 이벤트를 관찰 할 때 사용하기 좋은 것 같다.

2. Observer Intersection

문제

Observer Intersection의 사용법이 아니라, Observer Intersection의 문제에 대해서 알게 되었다. Observer Intersection은 Viewport를 기준으로 이벤트가 발생한다. 문제가 되는 것은 Observer Intersection을 이용하여 무한스크롤을 구현할 때였다. 평소에는 문제가 안생기지만, 화면이 아주 긴 경우에는 화면을 다채우지 못하고 무한 스크롤이 아니라 0회 스크롤이 되어버린다.

고민 및 해결

문제를 해결하기 위하여 타이밍 위치 등 여러가지를 고민해 보았다. 이 문제를 해결하기 위해서 다양한것들을 사용하였지만.. 별로 도움이 안되었고

1. getBoundingClientRect()

document.querySelector('selector').getBoundingClientRect()

getBoundingClientRect()이 도움이 많이 되었다. 이번 케이스 같은 경우에는 getBoundingClientRect의 top 매서드를 사용하였다. top 매서드를 사용하면 selector에 잡혀있는 HTML Collection과 Viewport 상단까지의 거리를 구한다. 그 다음으로 필요한 방법은 스크린의 넓이였다. 문제는 스크린의 넓이를 구하는 것은 많았으나, zoom을 할 때 문제가 많았었다.

크롬을 사용하다 보면(다른 브라우저도 마찬가지) 화면을 원래의 기본 값이 아닌 화면을 축소하거나 확대하는 경우가 많다. window.screen.height나 다른 availHeight 등 모두 크기를 확대하더라도 그에 따라 변화하지 않기 때몬에 도움이 별로 되지 않았다.

2. innerHeight

innerHeight의 경우 화면의 크기에 따라 다르게 사이즈가 다르게 변환되기 때문에 지금과 같은 케이스에서 사용할 수 있었다.

window.innerHeight > document.querySelector('selector')
.getBoundingClientRect().top

다음과 같은 방법을 이용하여 selector가 화면에 있는지 없는지를 확인할 수 있었다.