[TIL] 데브코스 51일차

오늘 배운 것

• 과제 검색기 구현

• scrollEvent + debounce

• Intersection Observer

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

• scrollEvent 방식의 장단점
• 장점: 정확한 스크롤의 위치와 제공하는 API의 다양한 활용가능성
• 단점: 너무 많은 이벤트 발생 시킴 → debounce, throttle, Intersection Observer로 보완 혹은 대체

느낀점

• scroll 이벤트에 따른 특정 동작의 처리의 어려움이라는 Intersection Observer가 등장배경을 이해하고 나니, 더 쉽게 해당 개념과 사용방법을 이해할 수 있게 되었다.
• 또 실무에서 사용되는 사례인 lazy Loading, Infinity Scroll, 의미없는 광고노출 보고 등의 적용 코드들을 살펴보니 빠르고 재미있게 이해할 수 있었다.

참고

실무에서 느낀 점을 곁들인 Intersection Observer API 정리

요즘 회사에서 컨텐츠의 가시성을 기반으로 작업해야 할 일이 많습니다. 예를 들어, 광고 요금을 청구하기 위해선 광고 노출 통계를 쌓고 이를 기반으로 청구해야 합니다. 이런 경우 scroll 이벤트를 통해 콜백을 호출하여 가시성을 확인하는 방법도 있지만 Intersection Observer API 를 사용하여 작업하기도 합니다. 이 포스팅에선 먼저 Intersection Observer 에 대해 소개하고 이 후 실무에서 API를 사용하면서 느낀 한계점에 대해서 얘기해보고자 합니다.

https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC