2022-01-08
Vue 성능 개선에 대한 세 번째 이야기이다.
사실 이건 특별한 기법은 아니다.
많이 알려져있고, 오픈소스 라이브러리로도 많이 올라와있다.
그렇다고 이 글을 안쓴다면 나중에 이 기법을 또 적용해야할 때
구글이나 스택오버플로우같은데 가서 삽질을 또 할 수도 있기 때문에
미리 정리해놓고 나중에 참고하자는 차원에서 글을 쓰게 되었다.
Infinity Scroll이란 스크롤을 최대로 내릴 때마다 데이터를 더 보여주는 기법으로, Lazy-loading의 한 종류이다.
대표적인 사례로, Facebook의 타임라인을 끝없이 내리면 로딩되면서 새로운 타임라인들이 더 뜨는 것을 볼 수 있다.
우선, Vue.js에서 Infinity Scroll을 사용하기 위해 다음과 같은 흐름으로 따라해보자.
vue-infinite-loading
라이브러리 설치npm i --save vue-infinite-loading