Vue + Spring Infinite Loading (Scroll) 구현

Vue 와 Spring을 사용하여 무한 로딩(스크롤) (Infinite Loading, Scroll) 을 구현해보겠습니다. 아래 사이트에서 자세한 코드들과 예시를 확인할 수 있습니다.

https://peachscript.github.io/vue-infinite-loading/guide/#installation

Guide | Vue-infinite-loading

---

1. Vue에서 무한 스크롤에 필요한 먼저 필요한 npm을 설치하거나 CDN 방식으로 import 합니다.

npm install vue-infinite-loading -S

<script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>

 

2. Vue에서 데이터를 받아와 반복 하면서 보여줄 컴포넌트 script에 import 해주고, export default 안에 componenets에 InfiniteLoading을 등록합니다. 그리고 <template> 안의 반복문 밖에 InfiniteLoading 컴포넌트를 넣어줍니다. spinner 속성에 적용할 수 있는 것들은 5가지가 있습니다. 그리고 데이터를 받아와서 저장할 list 변수와 몇개씩 로딩할지 정할 limit 변수를 선언합니다.

<template>
  <infinite-loading @infinite="infiniteHandler" spinner="circles"></infinite-loading>
  <!-- spinner : default, spiral, circles, bubbles, waveDots -->
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';

export default {
  data: () => {
    list : [],
    limit : 0,
  }
  components: {
    InfiniteLoading,
  },
};
</script>

 

3. infinite-loading 될 때 적용할 infiniteHadnler 메소드를 구현합니다. api 에는 Spring과 통신할 주소를 넣어주고, setTimeout() 을 해준 이유는 1초 뒤에 데이터를 로딩시키려고 넣었습니다. 이번 예제에서는 3개씩 보여주기 위해서 limit를 3씩 증가시켜줬습니다.

<script>
import InfiniteLoading from 'vue-infinite-loading';

export default {
  data: () => {
    list : [],
    limit : 0,
  },
  components: {
    InfiniteLoading,
  },
  methods : {
  	infiniteHandler($state) {
      http
        .get(api, {
          params: {
            limit: this.limit,
          },
        })
        .then((response) => {
          setTimeout(() => {
            if (response.data.length) {
              this.list = this.list.concat(response.data);
              this.limit += 3;
              $state.loaded();
            } else {
              $state.complete();
            }
          }, 1000);
        })
        .catch((error) => {});
    },
  },
};
</script>

---

Spring의 코드를 알아 보겠습니다. 이번 예제는 JPA를 사용하여 구현했습니다.

Controller.java - limit 값을 받아와서 limit 만큼의 데이터를 가져옵니다.

@GetMapping("api")
@ApiOperation(value = "infinite Loading")
    public Object selectInfiniteLoading(@RequestParam("limit") int limit) {

	List<DTO> list = Dao.selectListLimit(limit);
	return new ResponseEntity<>(list, HttpStatus.OK);
}

 

Dao.java - 한번의 infinite loading 시에 3개의 데이터를 가져오기로 했기 때문에 JPA 쿼리문을 다음과 같이 작성합니다.

@Query(value = "select * from table limit ?1, 3", nativeQuery = true)
	List<Feed> selectListLimit(int limit);