라라벨 Livewire 4 컴포넌트의 web.php 라우팅 설정

이번 포스트에서는 지난 시간에 새로 생성해 본 Livewire 4 컴포넌트를 routes/web.php에 라우팅 하고, 실제 웹사이트 메뉴에 연결하는 방법을 알아보겠다.

이전 포스트

Livewire 버전 4에서 컴포넌트 생성하기 (pages::articles.list 컴포넌트 생성)

라라벨 Livewire 버전 4에서 컴포넌트를 생성하는 방법을 다룹니다. 일반 컴포넌트와 pages:: 플래그를 활용한 페이지 컴포넌트의 차이점, 단일 파일 방식과 --mfc 옵션을 통한 프론트엔드・백엔드 분리 구조까지 알기 쉽게 비교 정리했습니다.

LIVEWIRE pages::articles.list 컴포넌트 Route 및 메뉴(내비게이션)에 Articles 추가 · 4th-avenue/laravel13-livewire@8fcf17b · GitHub

설명 없음

github.com

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

routes/web.php에서 라우팅 설정하기

Route::livewire('articles', 'pages::articles.list')
    ->name('articles.index');

반드시 정해진 위치가 있는 건 아니지만, 가장 아랫줄에 있는 require __DIR__.'/auth.php';의 윗부분에 이 코드를 추가했다.

• Route::livewire('articles', ...): 브라우저 주소창에 입력하는 HTTP URL 패스(Path)다. http://localhost/articles 에 접근했을 때 이 라우트가 동작하게 된다.
• 'pages::articles.list': 이 부분이 Livewire 4 라우팅의 핵심이다. 이전 버전처럼 임포트^Import를 할 필요가 없다. pages::는 Livewire에게 이 컴포넌트는 components/가 아니라 pages/ 폴더 아래에 있는 풀 페이지 컴포넌트라고 알려주는 식별자다. articles.list는 articles/ 디렉토리 안의 list 컴포넌트를 의미한다.
• ->name('articles.index');: 라라벨의 기본 라우트 이름 지정 기능과 동일하다.

라라벨 web.php 라우팅 설정 및 CSRF 토큰을 활용한 글 작성 페이지 만들기

라라벨에서 Route::resource를 활용해 특정 메서드만 제한적으로 라우팅하고, PostController와 블레이드 뷰를 연동하여 글 작성 페이지를 구현합니다. csrf 보안 토큰의 역할과 navigation.blade.php에 링크를 추가하는 팁을 정리합니다.

Livewire를 사용하지 않고 컨트롤러를 사용했었을 때, web.php 파일에 라우팅 설정을 하는 방법을 올렸던 포스트의 링크다.

resources/views/pages/articles/list.blade.php 파일에서 주석 처리되어 있었던 텍스트의 주석을 풀고, 브라우저에서 http://localhost/articles 에 접근해 보자.

이렇게 텍스트가 보이면 라우팅 설정을 성공적으로 끝낸 거다.

개인적으로 articles/list.blade.php 파일에 텍스트만 있는게 썰렁해보여서 대시보드 페이지와 똑같은 디자인으로 수정했다.

코드는 여기에는 굳이 올리지 않겠다.

layouts/navigation.blade.php에서 메뉴에 링크 달기

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
        {{ __('Dashboard') }}
    </x-nav-link>
    <x-nav-link :href="route('articles.index')" :active="request()->routeIs('articles.*')">
        {{ __('Articles') }}
    </x-nav-link>
</div>

{{-- 생략 --}}

<div class="pt-2 pb-3 space-y-1">
    <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
        {{ __('Dashboard') }}
    </x-responsive-nav-link>
    <x-responsive-nav-link :href="route('articles.index')" :active="request()->routeIs('articles.*')">
        {{ __('Articles') }}
    </x-responsive-nav-link>
</div>

각각 PC와 모바일 화면용 내비게이션 메뉴에 Articles로 이동하는 링크를 추가했다.

이제는 이렇게 내비게이션 메뉴에 Articles가 추가되었고, 클릭하면 Articles 페이지로 이동하게 된다.

원래 list.blade.php 화면은 작성된 게시글 목록을 보여주는 페이지지만, 현재는 DB에 저장된 데이터가 없는 상태다.

그러니 글목록을 표시하기 위해서는 글 저장 기능을 먼저 구축해야 한다.

다음 포스트에서는 글을 저장하는 역할을 하는 컴포넌트를 만들어 보겠다.

다음 포스트

Laravel 라우트 그룹 설정 (articles.new 컴포넌트 생성 및 글 작성 폼 만들기)

라라벨에서 Route::middleware('auth')->group 구조를 활용해 인증된 사용자만 접근 가능한 라우트 그룹을 설정하는 방법을 다룹니다. 라이브와이어 pages::articles.new 컴포넌트 생성부터 글 작성 폼 UI 구성도 정리했습니다.