반응형
여승철
INTP 개발자
여승철
  • 분류 전체보기 (376)
    • CS (16)
      • 면접 준비 (7)
      • 운영체제 (0)
      • 네트워크 (2)
      • HTTP (6)
      • 스프링(Spring) IoC 컨테이너 (0)
      • 알고리즘 (1)
    • Web (13)
    • AWS (6)
    • Java (43)
    • JSP & Servlet (65)
      • 개념 (42)
      • 실습 (23)
    • Spring Framework (33)
    • Spring Boot (10)
    • Spring Data (22)
      • JPA (14)
      • Query DSL (7)
      • Redis (1)
    • Spring Security (9)
    • Spring Batch (4)
    • MyBatis (10)
    • Front-End (51)
      • JS (27)
      • Vue.js (17)
      • React (5)
      • JQuery (0)
      • d3.js (2)
    • DBMS (24)
      • SQL, RDBMS (16)
      • MongoDB (5)
      • Redis (3)
    • Kafka (3)
    • 리눅스 (Linux) (4)
    • 디자인 패턴 (3)
    • VCS (8)
    • API (0)
    • TOOL (3)
    • Reading Book (28)
      • 이펙티브 자바 (11)
      • Clean Code (10)
      • 1분 설명력 (4)
      • HOW TO 맥킨지 문제해결의 기술 (3)
    • C# (4)
    • NSIS (6)
    • ETC (11)

블로그 메뉴

  • 홈
  • 태그

인기 글

태그

  • 맥킨지
  • 로그인
  • JDBC
  • querydsl
  • JSTL
  • 게시판
  • servlet
  • 회원 관리
  • EC2
  • HTTP
  • mybatis
  • 스트림
  • Spring Batch
  • controller
  • Dao
  • 디자인 패턴
  • ubuntu
  • 환경 세팅
  • 이펙티브 자바
  • jsp

최근 댓글

최근 글

hELLO· Designed By 정상우.
여승철

INTP 개발자

Vue.js vue-infinite-loading을 사용한 무한 스크롤 구현하기
Front-End/Vue.js

Vue.js vue-infinite-loading을 사용한 무한 스크롤 구현하기

2023. 10. 19. 14:44
반응형

무한 스크롤

웹 어플리케이션에서 페이지 스크롤이 아래로 내려가면서 자동으로 추가 콘텐츠를 로드하는 무한 스크롤은 사용자 경험을 향상시킵니다. 바닐라 JS로 구현도 가능하지만 간단하게 구현하기 위해 Vue.js에서 제공하는 플러그인을 사용하여 구현해보겠습니다. vue-infinite-scroll과 vue-infinite-loading이 있지만 vue-infinite-loading vue 컴포넌트 라이브러리를 사용한 예시를 보여드리겠습니다. 

 

vue-infinite-loading

Vue.js 애플리케이션에 무한 스크롤 기능을 추가하는데 도움을주는 Vue 컴포넌트 라이브러리입니다. 이 라이브러리를 통해 무한 스크롤을 간단하게 구현할 수 있습니다. 다음 링크에 나와있는 예제 코드를 참고하여 작성했습니다.

https://jsfiddle.net/rLw27aby/2/ 

 

vue-infinite-loading 설치:

npm install vue-infinite-loading

 

코드 작성:

axios를 이용하여 GET 요청을 보내기 때문에 요청을 받는 서버 쪽에 page와 perPage를 파라미터로 받는 코드를 작성해주어야 합니다. (MySQL의 경우 limit/offset)

<template>
    <div>
        <h3 class="user-list-title">사용자 리스트</h3>
        <div class="table-container">
            <table class="user-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>이름</th>
                        <th>소속</th>
                        <th>전화번호</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users" :key="user.userId">
                        <td>{{ user.userId }}</td>
                        <td>{{ user.userName }}</td>
                        <td>{{ user.userOrganization }}</td>
                        <td>{{ user.cellphone }}</td>
                    </tr>
                </tbody>
            </table>
            <infinite-loading @infinite="infiniteHandler"></infinite-loading>
        </div>
    </div>
</template>

<script>
import Constants from '@/constants.js';
import InfiniteLoading from 'vue-infinite-loading';

export default {
    components: {
        InfiniteLoading,
    },
    data() {
        return {
            page: 1,
            users: [],
        }
    },
    methods: {
        infiniteHandler($state) {
            this.$axios.get(Constants.URL.GET_USERS, {
                params: {
                    page: this.page,
                    perPage: 10     // 가져올 개수
                },
            }). then((response) => {
                const data = response.data;
                if (data.length) {
                    this.page++;
                    this.users.push(...data);
                    $state.loaded();
                } else {
                    $state.complete();
                }
            });
        },
    },
}
</script>
반응형

'Front-End > Vue.js' 카테고리의 다른 글

Vue.js mixin 사용 방법: 코드 재사용 및 컴포넌트 공유  (0) 2023.10.16
Vue.js this.$set 반응성 유지를 위한 방법  (0) 2023.07.25
Vue.js Vuex store: Vue.js 어플리케이션의 상태 관리를 해결하는 방법  (0) 2023.07.25
Vue.js Vue에서 배열(Array) 변경 감지하기  (0) 2023.07.13
Vue.js ref 속성으로 요소와 컴포넌트에 쉽게 접근하기  (0) 2023.07.12
    여승철
    여승철

    티스토리툴바