Laravel Jetstream Inertia

Jetstream이 제공하는 Inertia 스택은 Vue.js를 템플릿 언어로 사용합니다. Inertia 애플리케이션을 구축하는 것은 일반적인 Vue 애플리케이션을 구축하는 것과 많이 비슷하지만, Vue 라우터 대신 Laravel의 라우터를 사용하게 됩니다. Inertia는 Laravel 백엔드에서 단일 파일 Vue 컴포넌트를 렌더링할 수 있게 해주는 작은 라이브러리로, 컴포넌트의 이름과 해당 컴포넌트의 "props"로 채워질 데이터를 제공함으로써 작동합니다.

다시 말해, 이 스택은 클라이언트 측 라우팅의 복잡성 없이 Vue.js의 전체 기능을 제공합니다. Inertia 스택은 Vue.js를 템플릿 언어로 사용하는 것에 익숙하고 즐기는 경우에 좋은 선택입니다. Inertia를 사용할 때, 애플리케이션의 라우트는 Inertia "페이지"를 렌더링하면서 응답하게 됩니다. 이는 Laravel Blade 뷰를 반환하는 것과 매우 유사하게 보입니다:

 

use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;

/**
 * Show the general profile settings screen.
 */
public function show(Request $request): Response
{
    return Inertia::render('Profile/Show', [
        'sessions' => $this->sessions($request)->all(),
    ]);
}

 

Inertia 스택을 사용할 때, Jetstream은 몇 가지 독특한 기능을 가지고 있는데, 이에 대해 알아야 합니다. 아래에서 이러한 기능들에 대해 각각 논의하겠습니다.

 

Components

Jetstream Inertia 스택을 만들 때, UI의 일관성과 사용의 용이성을 돕기 위해 다양한 Vue 컴포넌트(버튼, 패널, 입력창, 모달 등)가 생성되었습니다. 이러한 컴포넌트들을 사용할지 여부는 자유롭게 결정할 수 있습니다. 이 모든 컴포넌트들은 애플리케이션의 resources/js/Components 디렉토리 안에 위치해 있습니다.

애플리케이션의 resources/js/Pages 디렉토리 안에 있는 Jetstream의 기존 페이지들에서 이러한 컴포넌트들이 어떻게 사용되고 있는지 검토함으로써 이러한 컴포넌트들을 사용하는 방법에 대한 통찰을 얻을 수 있습니다.

 

Customizing Jetstream's Page Rendering

Jetstream의 일부 Inertia 페이지들, 예를 들어 Teams/Show 와 Profile/Show는 Jetstream 자체 내에서 렌더링됩니다. 그러나 애플리케이션을 구축하는 동안 이러한 페이지들에 추가 데이터를 전달해야 할 수도 있습니다. 따라서, Jetstream은 Jetstream::inertia()->whenRendering 메소드를 사용하여 이러한 페이지들에 전달되는 데이터/props를 사용자 정의할 수 있게 해줍니다.

이 메소드는 사용자 정의하고 싶은 페이지의 이름과 클로저를 받아들입니다. 클로저는 들어오는 HTTP 요청과 일반적으로 페이지에 전송되는 기본 데이터의 배열을 받게 됩니다. 필요에 따라 데이터에 새로운 배열 요소를 사용자 정의하거나 추가할 수 있습니다. 일반적으로, 이 메소드는 App\Providers\JetstreamServiceProvider 클래스의 boot 메소드 내에서 호출해야 합니다:

 

use Illuminate\Http\Request;
use Laravel\Jetstream\Jetstream;

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    // ...

    Jetstream::inertia()->whenRendering(
        'Profile/Show',
        function (Request $request, array $data) {
            return array_merge($data, [
                // Custom data...
            ]);
        }
    );
}

 

Jetstream의 로그인, 등록, 비밀번호 재설정과 같은 인증 관련 라우트에 의해 렌더링되는 Inertia 페이지들을 사용자 정의하는 방법을 알아보려면 인증 문서를 확인하세요.

Modals

Jetstream의 Inertia 스택에는 DialogModal과 ConfirmationModal 두 가지 모달 컴포넌트가 포함되어 있습니다. ConfirmationModal은 리소스의 삭제와 같은 파괴적인 행동을 확인할 때 사용될 수 있고, DialogModal은 더 일반적인 모달 창으로 언제든지 사용될 수 있습니다.

모달 사용을 예시하자면, 다음과 같은 모달은 사용자가 자신의 계정을 삭제하고 싶다는 것을 확인하는 데 사용될 수 있습니다:

 

<ConfirmationModal :show="confirmingUserDeletion" @close="confirmingUserDeletion = false">
    <template #title>
        Delete Account
    </template>

    <template #content>
        Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted.
    </template>

    <template #footer>
        <SecondaryButton @click.native="confirmingUserDeletion = false">
            Nevermind
        </SecondaryButton>

        <DangerButton class="ml-2" @click.native="deleteUser" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
            Delete Account
        </DangerButton>
    </template>
</ConfirmationModal>

 

보시다시피, 모달의 열기/닫기 상태는 컴포넌트에 선언된 show 속성에 의해 결정됩니다. 모달의 내용은 title, content, footer 세 가지 슬롯을 채워 넣음으로써 지정될 수 있습니다.

Routes

Jetstream의 Inertia 스택에는 Laravel route() 헬퍼의 자바스크립트 대안으로 Tighten의 Ziggy 라이브러리가 포함되어 있습니다. 이 라이브러리의 사용법에 대한 완전한 가이드는 Ziggy 사용 문서를 참조할 수 있지만, 일반적인 예제들은 Jetstream 자체의 Vue 파일들, Layouts/AppLayout.vue를 포함하여 찾아볼 수 있습니다:

<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
    Dashboard
</NavLink>