App Development 개발, 프로그래밍 웹 개발 코딩 따라하기 코딩 팁

Vue에서 무한 스크롤을 구현하는 방법

By박준영

8월 17, 2023

무한 스크롤을 구현하면 최종 사용자가 웹 페이지를 아래로 탐색할 때 애플리케이션이 추가 콘텐츠를 표시할 수 있으므로 페이지 매김이 필요하지 않습니다. 이러한 접근 방식은 앱 사용자가 방대한 정보 저장소를 중단 없이 탐색할 수 있도록 지원합니다.

Vue 애플리케이션 설정

이 튜토리얼에 설명된 단계를 성공적으로 실행하려면 Vue 3 및 기본 언어인 JavaScript에 대한 기본적인 이해가 필수적입니다. 또한 HTTP 요청을 관리하기 위한 Axios의 활용에 익숙해야 합니다.

컴퓨터에서 원하는 폴더로 이동하여 관련 npm 명령을 실행합니다. 이를 통해 선택한 환경 내에서 이 기능을 구현하기 위한 기반을 설정할 수 있습니다.

 npm create vue
 

프로젝트 구성 프로세스를 시작하면 Vue에서 애플리케이션 프리셋 선택에 대해 문의합니다. 특정 사용 사례에 추가 기능이 필요하지 않으므로 사용 가능한 모든 옵션에서 “아니요”를 선택하는 것이 좋습니다.

필요한 종속성이 있는 새로 개발된 애플리케이션을 설정하려면 파일 시스템 내의 해당 폴더로 이동하여 터미널 또는 명령 프롬프트에서 여러 줄로 구성된 npm 설치 명령을 실행해야 합니다. 이 작업에는 노드 패키지 관리자의 레지스트리에서 관련 패키지를 자동으로 가져와 다운로드하고 나중에 사용할 수 있도록 프로젝트에 추가하는 지정된 명령을 입력하는 작업이 포함됩니다.

 npm install axios @iconify/vue @vueuse/core
 

npm 명령을 실행하면 세 가지 소프트웨어 구성 요소, 즉 HTTP 트랜잭션 처리를 위한 axios, Vue 프레임워크 내에 아이콘을 원활하게 통합하기 위한 @iconify/vue, Vue의 올바른 기능에 필수적인 포괄적인 유틸리티 기능을 제공하는 @vueuse/core의 설치를 용이하게 해줍니다.

Axios는 다양한 소스에서 데이터를 검색할 수 있는 라이브러리이며, @iconify/vue는 애플리케이션에 아이콘을 쉽게 추가할 수 있도록 지원합니다. vueuse/core 패키지는 Vue 기반 프로젝트 내에서 무한 스크롤 기능을 구현하는 데 사용할 수 있는 useInfiniteScroll과 같은 여러 유틸리티 구성 요소를 포함합니다.

JSONPlaceholder API에서 더미 데이터 가져오기

무한 스크롤 기능을 구현하려면 데이터가 필요합니다. 이러한 데이터를 하드 코딩하거나 JSONPlaceholder 과 같은 무료 가짜 API 소스에서 데이터를 가져올 수 있습니다.

이 글도 확인해 보세요:  슬랙에서 나만의 사용자 지정 슬래시 명령 만들기

명시적으로 정의된 값을 사용하지 않고 데이터베이스에서 데이터를 가져오는 온라인 서비스의 경우와 같이 JSONPlaceholder에서 정보를 검색하는 것은 실제 상황을 모방한 것입니다.

Vue 프로젝트 내의 API(애플리케이션 프로그래밍 인터페이스)에서 정보를 검색하려면 “src” 디렉터리 내에 새 폴더를 생성하고 “api”로 명명합니다. 이 새로 생성된 저장소 내에서 새 JavaScript 문서를 시작하고 그 안에 후속 코딩 지침을 삽입합니다:

 //getComments.js

import axios from "axios";

async function getComments(max, omit) {
  try {
    const comments = await axios.get(
      `https://jsonplaceholder.typicode.com/comments?_limit=${max}&_start=${omit}`
    );
    return comments.data.map((comment) => comment.body);
  } catch (error) {
    console.error(error);
  }
}

export default getComments;
 

제공된 코드 스니펫에는 지정된 URL ” “를 통해 원격으로 댓글을 검색하는 기능이 포함되어 있습니다. 이 작업은 비동기적으로 실행되며, 이후 이 프로세스의 결과로 함수 자체가 내보내집니다.

더 자세히 설명하기 위해 앞서 언급 한 코드 블록은 가져 오기 문을 통해 axios 라이브러리를 도입하여 시작됩니다. 그 후, “최대” 및 “생략”으로 표시된 두 개의 매개 변수를 사용하여 “getComments”라는 제목의 함수가 선언됩니다.

`getComments` 함수는 비동기 `axios.get()` 메서드를 통합하여 `max` 및 `omit` 변수에 의해 정의된 쿼리 매개변수가 포함된 지정된 URL로 HTTP GET 요청을 보냅니다. 이러한 매개변수는 백틱()으로 표시된 템플릿 리터럴을 활용하여 URL에 동적으로 삽입되므로 URL 내에서 변수 데이터를 원활하게 통합할 수 있습니다.

제공된 코드를 실행하면 지정된 API 엔드포인트에서 검색된 주석을 통해 매핑하여 업데이트된 배열이 생성됩니다. 이 새로 구성된 컬렉션은 사용된 방법을 통해 얻은 주석으로만 구성됩니다.

오류 발생 시 코드 스니펫은 검토 및 분석을 위해 콘솔에 문제를 기록합니다. 그 후 코드 스니펫은 프로그램의 다양한 섹션에서 활용될 함수를 내보냅니다.

무한 스크롤 컴포넌트 만들기

플레이스홀더 정보를 논리적으로 검색하는 데 능숙해졌다면 이제 시뮬레이션된 데이터를 표시하고 무한 스크롤이 가능한 기능을 구현하는 새로운 요소를 개발할 수 있습니다.

무한 스크롤 기능을 구현하기 위해 “src/components” 디렉터리 내에 “InfiniteScroll.vue”라는 새 Vue 컴포넌트를 만들 수 있습니다. 이 컴포넌트의 코드에는 스크롤 이벤트와 사용자 상호 작용을 처리하고 필요에 따라 추가 콘텐츠를 동적으로 로드하는 데 필요한 로직이 포함되어야 합니다. 다음은 이를 수행하는 방법을 보여주는 몇 가지 샘플 코드입니다: “`php

변수 `listEl`은 애플리케이션 내에서 스크롤 인터페이스의 컨테이너 역할을 하는 HTML 요소에 대한 참조로, 사용자가 이를 탐색하고 상호 작용할 수 있도록 합니다.

사용자 스크롤 시 비동기 함수가 시작되어 새 댓글 검색을 트리거하고 이를 `commentsList`에 추가합니다.

10 }은 사용자가 댓글 목록의 끝에서 10픽셀 거리를 이동했을 때 새 댓글 로딩이 시작됨을 나타내는 역할을 합니다.

무한 스크롤 컴포넌트 사용하기

무한 스크롤 컴포넌트의 기능을 활용하기 위해서는 해당 스크립트와 템플릿 블록을 적절히 구현해야 합니다. 특히 스크립트 섹션에서 무한 스크롤 로직을 처리한 후 컴포넌트 구조의 템플릿 부분 내에서 관련 콘텐츠를 렌더링해야 합니다.

React 애플리케이션에 무한 스크롤 기능을 통합하려면 `react-infinite-scroll-component` 라이브러리의 `InfiniteScroller` 컴포넌트와 함께 `useEffect` 훅을 활용하면 됩니다. 사용 방법은 다음과 같습니다: 자바스크립트 '에서 { useState }를 가져옵니다; 'react-infinite-scroll-component'에서 InfiniteScroller를 임포트합니다; 함수 MyComponent() { const [data, setData] = useState([]); // 초기 데이터 배열 [...] // 로드된 데이터를 반환하고 로딩 플래그를 설정하는 페치 함수 정의 const fetchData = async () => { setLoading(true); const response = await fetch('api

 <!-- InfiniteScroll.vue -->
<template>
  <div>
    <ul ref="listEl">
      <li v-for="comment in commentsList">
        {{ comment }}
      </li>
    </ul>
  </div>
</template>
 

현재 코드 모듈은 주석 배열을 표시하는 Vue 요소의 청사진을 구성합니다.

HTML 요소는 일련의 항목을 표시하는 데 사용되며, 목록의 각 항목은 v-for 지시문을 사용하여 렌더링된
• 태그의 인스턴스로 표시됩니다. 이 작업의 목적은 commentsList 배열을 반복하고 그에 따라 해당 목록 항목을 생성하는 것입니다.

  앞서 언급한 주석은 템플릿 리터럴을 활용하여 < li HTML 요소에 포함되며, 각 인스턴스는 자리 표시자 주석 로 대체됩니다. 이 프로세스를 통해 개별 비고를 쉽게 표시할 수 있습니다. 또한 코드 구조는 ul 태그에 listEl 의사 클래스 참조를 추가하여 사용자 상호 작용 시 무한 스크롤 메커니즘이 실행될 수 있도록 지원합니다.

  애플리케이션에 무한 스크롤 기능을 통합하려면 제공된 코드 스니펫을 활용하고 개별 디자인 요구 사항에 맞게 조정하여 App.vue 파일 내에 통합할 수 있습니다. 이렇게 하면 사용자가 아래로 스크롤할 때 추가 콘텐츠를 원활하게 로드하여 사용자 경험을 향상시키고 수동으로 페이지를 탐색할 필요 없이 더 다양한 정보에 쉽게 액세스할 수 있습니다.

   <!-- App.vue -->
  
  <script setup>
  import InfiniteScroll from "./components/InfiniteScroll.vue";
  import { Icon } from "@iconify/vue";
  </script>
  
  <template>
    <Suspense>
      <InfiniteScroll />
      <template #fallback>
        <Icon icon="eos-icons:bubble-loading" width="250" height="250" />
      </template>
    </Suspense>
  </template>
   

  제공된 코드 스니펫을 참조하면 무한 스크롤 컴포넌트와 아이콘 컴포넌트 모두에 대한 임포트 문이 성공적으로 실행되었음을 알 수 있습니다. 그 후, 이러한 컴포넌트는 Suspense 컴포넌트 내에 포함되므로 비동기 렌더링이 가능합니다.

  Suspense 컴포넌트를 사용하면 무한 스크롤 구성 내에서 비동기 연산의 완료를 기다리는 동안 기본 이미지 또는 기호를 표시할 수 있습니다. 이 작업은 Vue에서 모든 비동기 프로세스가 해결된 후에 수행됩니다.

  이제 프로젝트 디렉토리 내에서 "npm run dev" 명령을 실행하여 애플리케이션을 검토할 수 있습니다. 그러면 아래 그림과 유사한 인터페이스가 표시됩니다:

  

  사용자가 이 플랫폼에서 콘텐츠를 탐색할 때 `commentsToBeDisplayed` 변수에 할당된 값에 따라 동적 주석 표시가 표시됩니다. 이 구현을 통해 무한 스크롤 환경을 구현할 수 있으며, 페이지를 계속 아래로 스크롤할 때 추가 주석이 원활하게 로드되어 읽을 수 있습니다.

  무한 스크롤 방식은 웹 기반 플랫폼, 특히 X나 틱톡과 같은 소셜 미디어 애플리케이션에서 각광을 받고 있습니다.

  이 접근 방식을 구현하면 추가 정보를 지속적으로 검색하고, 열람, 소비, 시청할 수 있는 자료의 지속적인 흐름을 제공하여 사용자의 호기심과 관심을 유지함으로써 지속적인 사용자 참여를 보장할 수 있습니다.

  슬롯이 있는 Vue 컴포넌트 재사용 방법 배우기

  VueUse 라이브러리를 활용하여 useInfiniteScroll 컴포넌트를 통합하여 무한 스크롤 메커니즘을 구현하는 데 능숙해졌습니다.

  다양한 HTML 콘텐츠를 사용하여 동일한 요소를 자주 렌더링하는 최신 웹 사이트 개발에서 Vue 구성 요소를 재사용하는 것은 필수적인 측면입니다. 이 기술을 숙달하면 웹 애플리케이션이 다양한 섹션에서 균일 한 모양을 유지하도록 할 수 있습니다.