반응형

무한 스크롤 2

IntersectionObserver(인터섹션 옵저버)

const io = new IntersectionObserver(callback, options) // 관찰자 초기화 io.observe(element) // 관찰할 대상(요소) 등록 Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공합니다. 조금 더 쉽게 이해하면 특정 영역이 현재 유저가 바라보는 브라우저 화면에서 보이는 영역인지 아닌지를 구별할 수 있습니다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 성능 이슈 없이 사용할 수 있다는 장점이 있..

IT/JavsScript 2021.04.19

모바일 스크롤 페이징 (infinite scrolling pagination) 구현하기

모바일은 이제 단순히 전화만 받는 의미를 가지는 사람은 더 이상 없을 거라 생각합니다. 이전에는 PC화면이 주이고 모바일 화면이 보조의 느낌이었다면 지금은 그 위세가 역전되어 모바일 화면이 더 사용자 유입이 많고 그렇기 때문에 UI 기획을 할 때도 더 신경을 많이 쓰고 디자이너도 조금 더 나은 환경을 위해 GUI를 구현하고 있다는 게 느껴집니다. 모바일은 모든 동작을 손으로 스크롤 하면서 사용하게 됩니다. 그렇기 때문에 PC처럼 클릭을 통한 페이지 이동은 화면의 성격이 달라지는 경우가 아니라면 잘 사용하지 않습니다. 그렇지만 한 번에 너무 많은 데이터를 불러와서 노출하면 사용자는 페이지에 속도 저하 문제가 발생하기 때문에 대부분의 회사들은 이런 문제를 해결하기 위해서 속도에 크게 영향이 없는 일정 양만큼..

IT/JavsScript 2021.03.10
반응형
//