Laravel 페이지네이션, 글이 없는 페이지로 이동할 경우에는 404 에러 페이지 반환하기

이전 포스트에서는 라라벨 Livewire 환경에서 SPA 방식의 페이지네이션을 구현했다.

하지만 아직은 이 페이지네이션 기능에 아주 작은 문제가 하나 남아있다.

오늘의 포스트는 이 문제를 소개하고, 해결하는 방법까지 정리해 보겠다.

이전 포스트

라라벨 Livewire, 글 목록 페이지네이션 기능 구현 및 디자인 변경

라라벨 Livewire 환경에서 WithPagination 트레이트를 활용해 SPA 방식의 글 목록 페이지네이션을 구현하는 방법입니다. Tailwind 뷰 파일을 추출하여 어색한 번역 문구를 제거하고 디자인을 커스텀하는 실전 팁까지 정리했습니다.

글이 없는 페이지로 이동할 경우에는 404 에러 페이지 반환하기 · 4th-avenue/laravel13-livewire@639ef4f · GitHub

설명 없음

github.com

전체적인 코드 수정은 이 깃허브 링크를 통해서 확인할 수 있다.

글이 없는 페이지로도 이동이 가능한 문제가 있다

캡처한 이미지는 페이지네이션 버튼으로 글 목록의 가장 마지막 페이지로 이동한 모습을 캡처한 것이다.

일반적인 사용자들은 이렇게 페이지네이션 버튼만을 사용해서 페이지 이동을 할 것이다.

하지만 URL의 구조를 이해하고 있는 사용자는 가끔 직접 URL을 수정해서 페이지 이동을 하려고 할 수도 있다.

예를 들면 이렇게 말이다.

URL에 직접 이동하고 싶은 페이지 번호를 넣는 사용자가 있을 수 있다.

그런데 마지막 페이지 번호보다 더 큰 번호를 입력했는데도 페이지가 이동했다.

당연히 해당 페이지에는 글이 하나도 없다.

이런 UI는 확실히 정상적은 아니다.

글이 없는 페이지로 이동을 시도할 경우 404 에러 페이지가 뜨게 하는 것이 좋다.

글이 없는 페이지로 이동할 경우에는 404 에러 페이지 반환

resources/views/pages/articles/⚡list.blade.php

#[Computed]
public function articles()
{
    $articles = Article::with('user:id,nickname')
        ->select('id', 'title', 'user_id', 'created_at')
        ->latest()
        ->paginate(3);

    if ($articles->currentPage() > 1 && $articles->isEmpty()) {
        abort(404);
    }

    return $articles;
}

articles 메서드를 수정했다.

전체적인 변화를 설명하자면, 수정 전에는 사용자가 존재하지 않는 페이지 번호(예: ?page=99)로 접근해도 빈 목록을 보여줬었다.

하지만 이제는 2페이지 이상이면서 글(데이터)이 없을 경우 라라벨의 HTTP 404 예외(abort(404))를 발생시켜 에러 페이지를 반환하도록 개선되었다.

먼저 수정 전에는 return으로 글 목록을 즉시 반환했었는데, 지금은 $articles 변수에 받아 검사 로직을 거친 후 반환하도록 변경되었다.

검사 로직(if문)에 대한 설명은 다음과 같다.

• $articles->currentPage() > 1: 현재 요청한 페이지 번호가 1보다 큰지 확인한다. 1페이지가 빈 상태(전체 게시글이 0개)일 때는 404를 띄우지 않고 정상적인 빈 목록 화면을 보여주기 위한 안전장치다.
• $articles->isEmpty(): 해당 페이지 번호에 해당하는 데이터 항목이 0개인지 확인한다.
• &&(AND 연산): '1페이지가 아닌 동시에 데이터도 없는 경우'라는 두 조건이 모두 충족될 때만 블록 내부 구문을 실행한다.

if문 안의 abort(404)는 라라벨의 예외 처리 헬퍼로, 조건이 참일 경우 즉시 실행을 중단하고 404 Not Found HTTP 응답을 클라이언트에 전달한다.

수정 후에는 이렇게 글이 없는 페이지로 이동할 경우에는 404 에러 페이지를 반환한다.

성공이다! 👍🏻

하지만 디자인이 좀 그렇다.

그런데 이 에러 페이지는 직접 만들어서 디자인을 수정할 수 있다.

404 에러 페이지 디자인 수정

여기서는 일단 404 에러 페이지의 디자인을 직접 수정하지는 않고, 수정하는 방법을 안내하는 영상만 올리도록 하겠다.

resources/views 디렉터리에서 errors 디렉터리를 만들고, 그 안에 404.blade.php 파일을 만들면 그 파일이 404 에러 페이지의 파일이 된다.

지금까지 라라벨 페이지네이션 환경에서 존재하지 않는 페이지 접근 시 404 예외를 반환하고, 커스텀 에러 페이지를 설정하는 방법까지 알아보았다.

차근차근 적용해 보면서 웹 서비스의 UI를 한층 더 견고하게 만들어보자.

다음 포스트

Laravel, 비로그인 사용자 내비게이션 에러 해결 및 첫 화면 상단 메뉴 설정

라라벨 비로그인 사용자가 내비게이션에 접근할 때 발생하는 null 닉네임 에러를 Blade @auth 디렉티브로 해결합니다. 대시보드 메뉴 분기 처리 및 welcome 페이지 상단 내비게이션 적용법도 확인해 보세요.