무한스크롤 UI 구현하기
- 무한스크롤: 컨텐츠를 페이징하는 기법 중 하나
아래로 스크롤하다가 컨텐츠의 마지막 요소를 볼 때 다음 컨텐츠가 있으면 불러오는 방식
SNS(페이스북, 트위터, 인스타그램) 에서 주로 사용됨
무한 스크롤 구현 방식 (2가지)
1. window 의 scroll 이벤트를 통해 스크롤링이 일어날 때마다 화면 전체의 height 와 스크롤의 위치를 통해 스크롤이 컨텐츠의 끝 즈음에 도달했는지 체크하여 처리
2. intersection observer 방식
스크롤을 감지하지 않고 지정한 돔 객체가 시야에 닿았는지를 감지하는 방식
무한스크롤 UI 구현 실습 진행
회고
무한스크롤 개념이 특히 모바일 웹 사이트나 앱에서 정말 자주 사용되는 개념임을 경험해봤기에 더 중요한 주제가 되지 않았나 생각했다.
실습을 진행해 보았을 때, 스크롤의 위치를 감지하여 새로운 로드를 하는 방식은 이해에 큰 어려움이 있진 않았던 것 같다.
하지만 이 방식은 스크롤을 계속 감시하고있기 때문에 조금은 불필요한(?) 낭비의 단점이 존재할 수 있다.
비교적 최신 기술인 itersection observer 방식은 로딩을 받아오는 객체 중, 마지막 객체가 시야에 닿았는지를 체크하기 때문에 스크롤을 계속 탐지하고 있을 필요가 없다는 장점이 있지만, 개인적으로 이해하기가 어려웠고 잘 쓸 수 있을지 걱정이다..🥲
두 방법 모두 강의를 보지 않고 만들 수 있는 수준까지 연습해야겠다!
프론트엔드