Laravel Jetstream 시작하기

설치

composer require laravel/jetstream

 

제트스트림(Jetstream) 패키지를 설치한 후에는 jetstream:install 아티즌 명령을 실행할 수 있습니다. 이 명령은 선호하는 스택의 이름(livewire 또는 inertia)을 받습니다. 또한, --teams 스위치를 사용하여 팀 지원을 활성화할 수 있습니다.

jetstream:install 명령은 제트스트림이 제공하는 기능에 대한 테스트 커버리지를 제공하는 일련의 "feature" 테스트도 설치할 것입니다. Pest PHP를 테스트에 사용하고 싶다면, 기본 PHPUnit 테스트 스위트 대신 Pest 테스트 스위트를 설치하는 --pest 스위치를 사용할 수 있습니다.

 

Install Jetstream With Livewire

php artisan jetstream:install livewire
php artisan jetstream:install livewire --teams

Or, Install Jetstream With Inertia

php artisan jetstream:install inertia
php artisan jetstream:install inertia --teams

Inertia 스택은 SSR 지원과 함께 설치할 수도 있습니다:

php artisan jetstream:install inertia --ssr

Dark Mode

애플리케이션의 프론트엔드를 구조화할 때 "다크 모드" 지원을 포함하고 싶다면, `jetstream:install` 명령을 실행할 때 --dark 지시어를 제공하세요:

php artisan jetstream:install livewire --dark

Finalizing The Installation

제트스트림(Jetstream)을 설치한 후에는 NPM 의존성을 설치하고 빌드하며 데이터베이스를 마이그레이션해야 합니다:

npm install
npm run build
php artisan migrate

 

Application Logo

제트스트림(Jetstream)을 설치한 후, 제트스트림의 인증 페이지뿐만 아니라 애플리케이션의 상단 탐색 바에서 제트스트림 로고가 사용되고 있다는 것을 알아차렸을 수 있습니다. 몇 가지 제트스트림 컴포넌트를 수정하여 로고를 쉽게 사용자 정의할 수 있습니다.

Livewire

Livewire 스택을 사용하는 경우, 다음 Blade 컴포넌트에 위치한 SVG 파일들을 사용자 정의해야 합니다:

• resources/views/components/application-logo.blade.php
• resources/views/components/application-mark.blade.php
• resources/views/components/authentication-card-logo.blade.php

Inertia

Inertia 스택을 사용하는 경우, 다음 Vue 컴포넌트에 위치한 SVG 파일들을 사용자 정의해야 합니다:

• resources/js/Components/ApplicationLogo.vue
• resources/js/Components/ApplicationMark.vue
• resources/js/Components/AuthenticationCardLogo.vue

이 컴포넌트들을 사용자 정의한 후에는 애셋을 다시 빌드해야 합니다:

npm run build

Views/Pages

설치하는 동안, 제트스트림(Jetstream)은 다양한 뷰와 클래스를 애플리케이션에 발행할 것입니다. Livewire를 사용할 때, 뷰는 애플리케이션의 resources/views 디렉터리에 발행됩니다. Inertia를 사용할 때는 "Pages"가 resources/js/Pages 디렉터리에 발행됩니다.

제트스트림에 의해 발행된 뷰/페이지는 제트스트림이 지원하는 모든 기능을 포함하고 있으며, 필요에 따라 자유롭게 사용자 정의할 수 있습니다. 제트스트림을 애플리케이션의 출발점으로 생각하세요. 제트스트림을 설치한 후에는 원하는 것을 자유롭게 사용자 정의할 수 있습니다.

 

Layouts

애플리케이션 레이아웃
설치 후, 제트스트림 애플리케이션은 두 가지 "layouts"을 포함하게 됩니다. 첫째, 제트스트림은 애플리케이션의 대시보드와 같이 인증이 필요한 애플리케이션 페이지의 레이아웃을 정의하는 애플리케이션 레이아웃을 생성합니다. Livewire 스택을 사용할 때, 이 레이아웃은 resources/views/layouts/app.blade.php에서 정의되고 App\View\Components\AppLayout 클래스에 의해 렌더링됩니다. Inertia 스택을 사용할 때는 resources/js/Layouts/AppLayout.vue에서 정의됩니다.

Livewire 게스트/인증 레이아웃
애플리케이션 레이아웃 외에도, 제트스트림은 애플리케이션의 로그인, 등록, 비밀번호 재설정 페이지 등 제트스트림의 인증 관련 페이지의 레이아웃을 정의하는 "guest" 레이아웃을 생성합니다. Livewire 스택을 사용할 때, 이 레이아웃은 resources/views/layouts/guest.blade.php에서 정의되고 App\View\Components\GuestLayout 클래스에 의해 렌더링됩니다.

 

Dashboard

애플리케이션의 "main" 뷰는 Livewire를 사용할 때 resources/views/dashboard.blade.php에, Inertia를 사용할 때는 resources/js/Pages/Dashboard.vue에 발행됩니다. 이를 애플리케이션의 주요 "dashboard"를 구축하기 위한 출발점으로 자유롭게 사용할 수 있습니다.

 

Tailwind

설치하는 동안, 제트스트림(Jetstream)은 애플리케이션의 Tailwind CSS 프레임워크와의 통합을 구조화할 것입니다. 구체적으로, postcss.config.js 파일과 tailwind.config.js 파일이 생성됩니다. 이 두 파일은 애플리케이션의 컴파일된 CSS 출력을 빌드하는 데 사용됩니다. 애플리케이션에 필요한 대로 이 파일들을 수정할 수 있습니다.

또한, tailwind.config.js 파일은 제트스트림 스택 선택에 따라 관련 디렉터리가 적절하게 지정된 PurgeCSS를 지원하도록 사전 구성되어 있습니다.

애플리케이션의 package.json 파일은 애셋을 컴파일하는 데 사용할 수 있는 NPM 명령으로 이미 구조화되어 있습니다. 애플리케이션의 애셋을 컴파일하는 데 대한 자세한 정보는 Vite 문서를 참조하세요.

 

# Compile your CSS / JavaScript for development and recompile on change...
npm run dev

# Compile your CSS / JavaScript for production...
npm run build

 

Application Dashboard

애플리케이션에 인증 후, /dashboard 경로로 리디렉션됩니다. 이 경로는 애플리케이션의 home/dashboard 화면입니다. Livewire 스택을 사용하는 경우, 이 페이지는 resources/views/dashboard.blade.php Blade 템플릿에 의해 렌더링됩니다. Inertia 스택을 사용하는 경우, 화면은 resources/js/Pages/Dashboard.vue 컴포넌트를 사용하여 렌더링됩니다.

애플리케이션의 대시보드 템플릿/컴포넌트를 열어보면, 애플리케이션의 주요 "layout" 컴포넌트를 확장한다는 것을 볼 수 있습니다. 이 레이아웃은 애플리케이션 내부의 전반적인 모양과 느낌을 정의합니다. Livewire를 사용하는 경우, 이 레이아웃은 resources/views/layouts/app.blade.php 템플릿에 의해 정의되고 App\View\Components\AppLayout 컴포넌트 클래스를 통해 렌더링됩니다. Inertia를 사용하는 경우, 애플리케이션 레이아웃은 resources/js/Layouts/AppLayout.vue 컴포넌트에 의해 정의됩니다.

대시보드와 애플리케이션 레이아웃 템플릿에 익숙해지면, 이를 편집하기 시작해도 좋습니다. 예를 들어, 애플리케이션 대시보드에 렌더링되는 "welcome" 컴포넌트를 제거하고 싶을 수 있습니다. 그렇게 하려면 대시보드 템플릿에서 삭제하면 됩니다. 다음으로, 애플리케이션을 구축하기 위해 필요한 HTML을 자유롭게 작성하십시오. 제트스트림은 강력한 Tailwind CSS 프레임워크를 사용하므로 Tailwind 문서를 참조하여 Tailwind에 대해 더 알아보세요.

Adding Additional Pages

기본적으로, 제트스트림의 상단 탐색 메뉴에는 애플리케이션 대시보드로의 링크가 포함되어 있습니다. 물론, 이 탐색 메뉴를 편집하여 애플리케이션 내에서 사용할 수 있는 다른 페이지로의 링크를 추가할 수 있습니다. Livewire를 사용하는 경우, 탐색 메뉴는 resources/views/navigation-menu.blade.php Blade 템플릿에 의해 정의됩니다. Inertia를 사용하는 경우, 탐색 메뉴는 resources/js/Layouts/AppLayout.vue 컴포넌트 내에 정의됩니다.

User Profile

제트스트림(Jetstream) 애플리케이션을 구축할 때는 사용자 프로필 관리 화면에 자신만의 양식과 패널을 추가해야 할 가능성이 높습니다. 기본적으로 사용자의 프로필 화면에는 사용자의 연락처 정보, 비밀번호 업데이트, 이중 인증 설정 관리 등의 패널이 포함되어 있습니다. 그러나 이 페이지에 자신만의 추가 패널을 자유롭게 추가할 수 있습니다. 그렇게 하려면, 페이지를 정의하는 템플릿을 단순히 편집하면 됩니다.

Livewire를 사용하는 경우, 사용자의 프로필 관리 화면은 resources/views/profile/show.blade.php Blade 템플릿에 의해 정의됩니다. Inertia를 사용하는 경우, 이 화면은 resources/js/Pages/Profile/Show.vue 컴포넌트에 의해 렌더링됩니다. 사용자 프로필에 추가 패널이나 양식을 추가하려면, 이 템플릿들을 애플리케이션에 필요한 대로 편집하면 됩니다.

 

Team Management

제트스트림(Jetstream)에 의해 렌더링된 팀 관리 화면에 추가적인 양식과 패널을 추가해야 할 수도 있습니다. 이러한 화면에는 기존 팀을 관리하는 "team settings" 화면과 사용자가 새 팀을 생성할 때 렌더링되는 "create team" 화면이 포함됩니다.

 

Create Team Screen

팀 지원이 활성화되면, 제트스트림(Jetstream)은 사용자가 새 팀을 생성할 수 있는 화면을 포함합니다. 이 화면 내에 포함된 양식에 추가적인 폼 필드를 자유롭게 추가할 수 있습니다. 추가하는 모든 폼 필드는 $input 인자를 통해 제트스트림의 App\Actions\Jetstream\CreateTeam 액션으로 전달될 것입니다.

Livewire를 사용할 때, 팀 생성 화면은 resources/views/teams/create.blade.php Blade 템플릿에 의해 정의됩니다. Inertia를 사용할 때는 이 화면이 resources/js/Pages/Teams/Create.vue 컴포넌트에 의해 렌더링됩니다.

 

Team Settings Screen

팀 지원이 활성화되면, 제트스트림(Jetstream)은 사용자가 기존 팀의 설정을 관리할 수 있는 화면을 포함합니다. 여기에는 팀 이름 변경이나 추가 팀원 초대와 같은 작업이 포함됩니다. 이러한 페이지에 자체 추가 패널을 자유롭게 추가할 수 있습니다. 그렇게 하려면, 페이지를 정의하는 템플릿을 단순히 편집하면 됩니다.

Livewire를 사용할 때, 팀 설정 화면은 resources/views/teams/show.blade.php Blade 템플릿에 의해 정의됩니다. Inertia를 사용할 때는 이 화면이 resources/js/Pages/Teams/Show.vue 컴포넌트에 의해 렌더링됩니다.

 

Banner Alerts

제트스트림(Jetstream)에는 애플리케이션 사용자 인터페이스의 상단에 표시할 수 있는 알림 배너가 포함되어 있습니다.

Livewire 스택을 사용하는 경우, 애플리케이션에는 resources/views/components/banner.blade.php에 배너 컴포넌트가 포함됩니다. Inertia 스택을 사용하는 경우, 배너 컴포넌트는 resources/js/Components/Banner.vue Vue 컴포넌트 내에 포함됩니다.

제트스트림에 배너를 표시하도록 지시하려면, 세션에 flash.banner 메시지를 플래시해야 합니다. 배너 메시지 외에도, 제트스트림에 성공 스타일이나 위험 스타일로 배너를 표시하도록 지시할 수 있습니다.

$request->session()->flash('flash.banner', 'Yay it works!');
$request->session()->flash('flash.bannerStyle', 'success');

return redirect('/');

 

또한 리디렉션 응답 인스턴스에 banner 또는 dangerBanner 메소드를 호출하여 제트스트림에 배너를 표시하도록 지시할 수도 있습니다:

 

return redirect()->route('subscriptions')->banner('Subscription created successfully.');

return redirect()->route('subscriptions')->dangerBanner('Subscription cancellation failed.');