[CNU SW Academy] 28일차(23.01.09)

프로그래머스 - 프론트엔드 미니 데브코스

무한 스크롤 UI 구현하기

- 컨텐츠를 페이징하는 기법 중 하나

- 아래로 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식

 

1. 

window의 scroll 이벤트를 통해 스크롤링이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠 끝 즈음에 다다랐는지 체크해서 처리하는 방식 

scroll 할 때마다 이벤트가 발생하기 때문에 성능 문제가 발생할 수 있음

2.

intersection observer 방식

 

window.addEventListener('scroll', () => {
	const isScrollEnded = (window.innerHeight + window.scrollY) + 100 >= document.body.offsetHeight
    
    if(isScrollEnded && !this.state.isLoading) {
    	onScrollEnded()
    }
}

Debounce : 이벤트가 발생하면 일정 시간 내에 똑같은 이벤트가 발생했을 경우 이전 것을 취소

Throttle : 가장 처음에 들어온 이벤트만 실행하고 다음은 모두 무시하는 방법

 

무한 스크롤의 단점 : scroll event 때문에 footer에 접근하지 못한다.

=> 상황에 따라서는 더보기 버튼을 이용하는 경우도 있다.

 

MDN IntersectionObserver

https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver

IntersectionObserver - Web API | MDN

observer의 경우 감시대상을 지정해주어야 함

 

무한스크롤 UI는 모바일 환경에서 많이 사용됨

1. scroll 이벤트를 이용해 계산

2. intersection observer

- observe, unobserve를 잘 해야 함

- threshold값으로 observe 대상이 얼마나 노출되어있는지에 따라 동작하게 할 수 있다.

 

https://github.com/narlo23/Scroll

GitHub - narlo23/Scroll: intersectionobserver 이용해보기

무한스크롤 강의를 들었는데, intersectionObserver를 사용하다가 마무리짓지 못하고 강의가 끝났다. 개인적으로라도 더 알아보고 문제를 해결해봐야겠다..

---

코딩테스트 - 10:00 ~ 12:00