top: 0; bottom: 0;을 통해 height: 100%와 같은 효과를 적용했다.
overflow-y: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
padding-top: vw(52px);
infinite-loading에 identifire
props 추가
기존에 우리가 사용한대로 infiniteHandler에서 state.reset()을 실행하는 것이 아니라 infinite-loading 컴포넌트의 props
v-bind:identifier="+new Date()"를 최초로 설정하고, 검색이나 필터링 등 infinite-loading를 초기화할 필요가 있는 경우에
this.identifier += 1`을 통해 infinite-loading 컴포넌트의 identifire를 변경해서
초기화를 트리거했다.
API 조회 함수 역할 분리
기존에는 API 함수 내에서 처리하는 로직이 많았다.
1) 조회 전에 로딩 시작, 조회 끝나고 로딩 종료
2) pagination.currentPage
를 체크해서 currentPage > 1
인 경우 this.list = [...this.list, ...data]
currentPage === 1
인 경우 this.list = data
로 데이터를 넣는 로직
이렇게 총 2개의 로직이 있었는데, 참고한 문서에서는 API 조회함수는 그냥 API를 조회해서 response를 리턴 하는 역할 하나 만을 수행하고,
infiniteHandler에서 data를 받아서 this.list.push(...data)
를 수행하고, $state를 변경시켜서 infinite-loading 상태를 컨트롤했다.
this.list.push(...data)
만을 실행할 수 있는 이유는, 검색하거나 필터링을 할 경우 1페이지부터 다시 조회하게 되는데 이때 무조건 this.list = []
즉 list를 빈 배열로 초기화하는
로직이 있기 때문에 this.list.push(...data)
라는 하나의 로직만으로 데이터 컨트롤이 가능했다.
: https://stackoverflow.com/questions/7332179/how-to-recursively-search-all-parentnodes