Laravel, Inertia.js v 및 Vue 3을 사용하여 무한 스크롤 구현

이 종합 가이드에서는 Inertia.js v2.0 및 Vue 3을 사용하여 Laravel 애플리케이션에서 무한 스크롤을 구현하는 방법을 살펴보겠습니다. 프런트엔드와 백엔드를 모두 다룰 것입니다. 전체 페이지 새로 고침 처리 및 스크롤 위치 유지에 특별한 주의를 기울여 구현했습니다.

목차

• 구성요소 이해
• 프런트엔드 구현
• 백엔드 구현
• 실제 사례: 카테고리가 포함된 블로그 게시물
• 모범 사례 및 고려 사항

구성 요소 이해

무한 스크롤 구현은 세 가지 주요 구성 요소에 의존합니다.

1. Inertia.js v2.0의 WhenVisible 구성 요소: 이 구성 요소는 교차 관찰자 논리를 처리하여 더 많은 콘텐츠를 로드해야 하는 시기를 감지합니다.
2. Laravel의 페이지 매김: 서버 측 페이지 매김 논리를 처리합니다.
3. Vue 3의 Composition API: 프런트엔드 상태와 반응성을 관리합니다.

프론트엔드 구현

블로그 게시물 목록에 대해 무한 스크롤을 구현하는 Vue 구성 요소부터 시작해 보겠습니다.

<script setup>
import { computed } from 'vue'
import { usePage, WhenVisible } from '@inertiajs/vue3'
import LoadingSpinner from '@/components/LoadingSpinner.vue'
import BlogPostCard from '@/components/BlogPostCard.vue'

const page = usePage()

const hasFeaturePost = computed(() => !!page.props.featuredPost)
const categoryName = computed(() => page.props.category?.name)
</script>

<template>
    <div>



<h3>
  
  
  Key Frontend Features
</h3>

<ol>
<li><p><strong>WhenVisible Component</strong>: This component from Inertia.js v2.0 automatically triggers a request when the element becomes visible in the viewport.</p></li>
<li><p><strong>Pagination Parameters</strong>:<br>
</p></li>
</ol>

<pre class="brush:php;toolbar:false">:params="{
    data: {
        page: page.props.postsPagination.current_page + 1,
    },
    only: ['posts', 'postsPagination'],
}"

• 데이터: 로드할 다음 페이지를 지정합니다
• only: 필요한 데이터만 가져와서 요청을 최적화합니다

1. 로드 상태: 구성 요소는 로드 및 콘텐츠 끝 상태를 모두 우아하게 처리합니다.

백엔드 구현

다음은 일반 페이지 매김과 전체 페이지 로드 시나리오를 모두 처리하는 Laravel 컨트롤러 구현입니다.

<?php namespace App\Http\Controllers;

use App\Models\Post;
use App\Models\Category;
use Illuminate\Pagination\LengthAwarePaginator;
use Inertia\Inertia;

class BlogController extends Controller
{
    public function index(?Category $category = null)
    {
        return Inertia::render('Blog/Index', [
            'category' => $category,
            'featuredPost' => $this->getFeaturedPost(),
            'posts' => $this->getPaginatedPosts($category),
            'postsPagination' => $this->getPaginatedPosts($category)?->toArray(),
        ]);
    }

    protected function getPaginatedPosts(?Category $category): ?LengthAwarePaginator
    {
        $currentPage = request()->input('page', 1);
        $perPage = request()->input('per_page', 12);

        $query = Post::query()
            ->with(['author', 'category'])
            ->published();

        if ($category) {
            $query->where('category_id', $category->id);
        }

        // Apply any additional filters
        if (request()->has('sort')) {
            $query->orderBy(request()->input('sort'), request()->input('direction', 'desc'));
        } else {
            $query->latest();
        }

        // Handle full page load vs. infinite scroll request
        if (!request()->header('X-Inertia')) {
            // Full page load - fetch all pages up to current
            $allResults = collect();

            for ($page = 1; $page paginate($perPage, ['*'], 'page', $page);
                $allResults = $allResults->concat($pageResults->items());
            }

            return new LengthAwarePaginator(
                $allResults,
                Post::query()
                    ->published()
                    ->when($category, fn($q) => $q->where('category_id', $category->id))
                    ->count(),
                $perPage,
                $currentPage
            );
        }

        return $query->paginate($perPage);
    }

    protected function getFeaturedPost()
    {
        return Post::query()
            ->with(['author', 'category'])
            ->published()
            ->featured()
            ->latest()
            ->first();
    }
}

주요 백엔드 기능

1. 페이지 매김 처리:

if (!request()->header('X-Inertia')) {
    // Full page load logic
} else {
    // Regular pagination for infinite scroll
}

1. 전체 페이지 로드: 사용자가 페이지를 새로 고치거나 직접 방문하면 올바른 스크롤 위치를 유지하기 위해 모든 이전 페이지를 가져옵니다.

for ($page = 1; $page paginate($perPage, ['*'], 'page', $page);
    $allResults = $allResults->concat($pageResults->items());
}

1. 효율적인 쿼리: 구현에는 관계 열망 로딩 및 범위가 지정된 쿼리가 포함됩니다.

$query = Post::query()
    ->with(['author', 'category'])
    ->published();

결론

Laravel 및 Inertia.js v2.0으로 무한 스크롤을 구현하면 우수한 성능과 SEO 관행을 유지하면서 원활한 사용자 경험을 제공합니다. Vue 3의 Composition API와 Inertia.js의 WhenVisible 구성 요소를 결합하면 구현 및 유지 관리가 쉬워집니다.

다음 사항을 기억하세요.

• 특히 극단적인 경우에 대해 구현을 철저히 테스트하세요
• 성과 지표 모니터링
• JavaScript가 비활성화된 사용자를 위한 대체 구현을 고려하세요
• 무한 스크롤 구현 시 접근성을 염두에 두세요

이 구현은 블로그 게시물 외에도 제품 목록, 이미지 갤러리 또는 무한 스크롤의 이점을 활용하는 기타 콘텐츠 등 다양한 사용 사례에 맞게 조정할 수 있습니다.

추가 리소스

• Inertia.js 문서
• 라라벨 문서
• Vue 3 문서
• 무한 스크롤에 대한 웹 접근성 지침