[vue + 무한 스크롤] 무한 스크롤 구현

사용 기술

Javascript Intersection Observer(iob)

iob는 사용자가 감시하고자 하는 페이지의 요소가 브라우저와 교차되는 정도를 관찰하고, 설정 비율 이상의 교차가 일어났을 때 실행되야 하는 콜백함수를 등록할 수 있는 객체이다.

 

사용법

const iob = new IntersectionObserver((entries) => {
  if (entries.isIntersecting) {
    // 실행 로직
  }
}, {
  //options
});

 

무한스크롤을 구현하면서 고려해야할 사항

1. 마운트될 때 한 번 실행해버리는 경우가 있음.

방법1. entries.isIntersecting === true 인 경우에 실행로직을 작성하면 된다.

2. 다시 위로 올라가면, 중복되서 페이지네이션을 요청하면 안 된다.

방법1. 관찰 요소를 숨긴다.

방법2. new IntersectionObserver().unobserve(target); 함수 사용

 

3. 목록에서 상세페이지를 들어갔다가, 다시 목록으로 돌아온 경우. 스크롤과 받아온 데이터는 그대로 보존할 것인가?

방법1. 받아온 데이터는 vuex store에 저장한다. -> 문제가 있음.

문제: 상세페이지에 들어갔다가, 다시 목록으로 돌아왔을 때, vuex의 store를 그대로 사용한다면, 스크롤 위치를 유지하고ㅡ 데이터 패치는 안 받겠지만, 최신 데이터를 못 받아옴...

 

store에 이미 들어가있는 목록 데이터에 최신 데이터를 어떻게 받아올 것인가?

 

상위 20개를 받아와서 바꿔치기..

그런데, 20개 밖에 동일한 아이템이 있는 경우는??? -> 중복됨..

 

 

 

 

 

방법2. 목록 페이지 위에 모달을 띄운다.

 

 

Vue에서 구현한 코드

List.vue

 

Item.vue