Custom Component
- Modal
- Toggle
- Tag
- Autocomplete
- Loading
- Infinite Scroll
이렇게 우리가 자주 사용하는 기능들이 Custom Component를 통해 자신의 입맛에 맞게 활용할 수 있습니다.
Custom Component과 관련된 라이브러리들이 많지만 라이브러리를 사용하지 않고 직접 구현을 통해 동작 원리를 파악해야된다고 생각합니다.
Modal, Toggle, Tag, AutoComplete은 이전에 유용한 JS 기능들을 통해 다루어 보았으니 이번 블로깅에서는 Loading 과 Infinite Scroll을 다뤄보겠습니다.
Loading
Loading 은 Progress Indicators로 데이터를 받아오는 시간동안 브라우저가 빈 화면을 보여주는 것이 아닌 현재 진행 중인 상태를 표시하는 Custom Component입니다.
흔히 볼 수 있는 Spinner의 Loading이 있으며 모래 시계나 skeleton UI를 통해 보여줄 수 있습니다
Keyframes를 이용해 CSS의 animation 속성에 변화를 주는 것이 Loeading의 핵심입니다.
Infinite Scroll
Infinite Scroll은 흔히 볼 수 있는 기능으로 많은 데이터를 화면 크기에 맞게 많은 정보를 보여줄 수 있습니다.
Infinite Scroll의 핵심은 window 속성 중 innerHeight와 EventListener 중 scroll을 이용해서 구현할 수 있습니다.
scrollTop의 값과 window의 height를 통해 스크롤이 어느 지점을 지나치면 다음 데이터를 불러오는 구조 입니다.
Infinite Scroll은 IntersectionObserver를 통해 구현하는 것을 권장하고 있습니다.
이전에 말한 Viewport의 높이, document, window의 높이, 스크롤의 현재 위치의 차이 등을 계산하여 다음 데이터를 불러왔지만 Intersection Observer를 사용하면 throttle, debounce 문제를 따로 처리하지 않아도 되며 reflow가 많이 줄어듭니다.
IntersectionObserver
- 처음 보여줄 데이터 목록을 표시합니다
- 처음 보여준 데이터 목록에서 마지막 요소를 observe 하여 다음 데이터를 불러와야 된다고 하면
- 마지막 요소가 화면에 50~100%정도 관측되면 다음 데이터를 로딩
- 기존 관측된 요소를 unobserve한 후 다음 데이터 목록의 마지막 요소를 찾아 observe한다.
- 더 이상 데이터가 없다면 disconnect를 한다.
