[Vue.js] 성능 개선 (3) - Infinity Scroll

2022-01-08

Vue 성능 개선에 대한 세 번째 이야기이다.

사실 이건 특별한 기법은 아니다.

많이 알려져있고, 오픈소스 라이브러리로도 많이 올라와있다.

그렇다고 이 글을 안쓴다면 나중에 이 기법을 또 적용해야할 때

구글이나 스택오버플로우같은데 가서 삽질을 또 할 수도 있기 때문에

미리 정리해놓고 나중에 참고하자는 차원에서 글을 쓰게 되었다.

Infinity Scroll이란 스크롤을 최대로 내릴 때마다 데이터를 더 보여주는 기법으로, Lazy-loading의 한 종류이다.

대표적인 사례로, Facebook의 타임라인을 끝없이 내리면 로딩되면서 새로운 타임라인들이 더 뜨는 것을 볼 수 있다.

우선, Vue.js에서 Infinity Scroll을 사용하기 위해 다음과 같은 흐름으로 따라해보자.

npm i --save vue-infinite-loading