Laravel 프론트엔드

Frontend

프론트엔드

• https://laravel.com/docs/11.x/frontend

1 소개

Laravel은 라우팅, 유효성 검사, 캐싱, 큐, 파일 스토리지 등 현대적인 웹 애플리케이션을 구축하는 데 필요한 모든 기능을 제공하는 백엔드 프레임워크입니다. 그러나 우리는 개발자들에게 애플리케이션의 프론트엔드를 구축하는 강력한 접근방식을 포함한 아름다운 풀스택 경험을 제공하는 것이 중요하다고 믿습니다.

Laravel로 애플리케이션을 구축할 때 프론트엔드 개발에 접근하는 주요한 두 가지 방법이 있으며, 어떤 접근방식을 선택할지, PHP를 활용하여 프론트엔드를 구축할지, 아니면 Vue와 React와 같은 JavaScript 프레임워크를 사용할지에 따라 결정됩니다. 아래에서는 이 두 가지 옵션에 대해 논의하여 애플리케이션의 프론트엔드 개발을 위한 최적의 접근방식을 결정할 수 있도록 도와드리겠습니다.

2 PHP 사용하기

2.1 PHP와 Blade

과거에 대부분의 PHP 애플리케이션은 데이터베이스에서 요청 중에 검색된 데이터를 렌더링하는 PHP echo 문이 혼합된 간단한 HTML 템플릿을 사용하여 브라우저에 HTML을 렌더링했습니다.

<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>

Laravel에서는 이러한 HTML 렌더링 접근방식을 뷰와 Blade를 사용하여 여전히 구현할 수 있습니다. Blade는 데이터를 표시하고 데이터를 반복하는 등의 작업을 위해 편리하고 간결한 구문을 제공하는 매우 가벼운 템플릿 언어입니다.

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>

이러한 방식으로 애플리케이션을 구축할 때, 양식 제출 및 기타 페이지 상호작용은 서버로부터 전체적으로 새로운 HTML 문서를 수신하고 브라우저가 전체 페이지를 다시 렌더링하게 됩니다. 오늘날에도 많은 애플리케이션이 단순한 Blade 템플릿을 사용하여 프론트엔드를 구성하는 것이 매우 적합할 수 있습니다.

기대치 증가

그러나 웹 애플리케이션에 대한 사용자 기대치가 성숙해짐에 따라, 많은 개발자들은 보다 세련된 느낌의 상호작용을 제공하는 더 동적인 프론트엔드를 구축해야 할 필요성을 느끼고 있습니다. 이에 따라 일부 개발자들은 Vue 및 React와 같은 JavaScript 프레임워크를 사용하여 애플리케이션의 프론트엔드를 구축하기 시작했습니다.

다른 개발자들은 자신이 익숙한 백엔드 언어를 고수하면서도 현대적인 웹 애플리케이션 UI를 구축할 수 있는 솔루션을 개발해왔습니다. 예를 들어, Rails 생태계에서는 Turbo Hotwire와 Stimulus와 같은 라이브러리의 생성으로 이어졌습니다.

Laravel 생태계 내에서, 주로 PHP를 사용하여 현대적이고 동적인 프론트엔드를 만들 필요성으로 인해 Laravel Livewire와 Alpine.js가 탄생했습니다.

2.2 Livewire

Laravel Livewire는 Vue와 React 같은 최신 JavaScript 프레임워크로 구축된 프론트엔드처럼 동적이고 현대적이며 생동감 있는 Laravel 기반 프론트엔드를 구축하기 위한 프레임워크입니다.

Livewire를 사용할 때, UI의 독립적인 부분을 렌더링하고 애플리케이션의 프론트엔드에서 호출하고 상호작용할 수 있는 메서드와 데이터를 노출하는 Livewire "컴포넌트"를 생성하게 됩니다. 예를 들어, 간단한 "Counter" 컴포넌트는 다음과 같이 생겼을 것입니다:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $count = 0;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

그리고, 카운터에 해당하는 템플릿은 다음과 같이 작성됩니다:

<div>
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

Livewire를 사용하면 wire:cliick과 같은 새로운 HTML 속성을 작성하여 Laravel 애플리케이션의 프론트엔드와 백엔드를 연결할 수 있습니다. 또한, 간단한 Blade 표현식을 사용하여 컴포넌트의 현재 상태를 렌더링할 수 있습니다.

많은 개발자에게 Livewire는 Laravel로 프론트엔드 개발을 혁신적으로 변화시켜 주었으며, 이로 인해 Laravel을 벗어나지 않고도 현대적이고 동적인 웹 애플리케이션을 구축할 수 있게 되었습니다. 보통 Livewire를 사용하는 개발자들은 다이얼로그 창을 렌더링하는 것과 같이 프론트엔드에 JavaScript를 필요한 부분에만 "뿌려주기" 위해 Alpine.js도 함께 사용합니다.

Laravel을 처음 접하신다면, 뷰와 Blade의 기본 사용법을 익히는 것을 권장합니다. 그런 다음, 공식 Laravel Livewire 문서를 참조하여 상호작용하는 Livewire 컴포넌트를 사용하여 애플리케이션을 한 단계 업그레이드하는 방법을 배우세요.

2.3 스타터 키트

프론트엔드를 PHP와 Livewire를 사용하여 구축하려면, Breeze 또는 Jetstream 스타터 키트를 활용하여 애플리케이션 개발을 빠르게 시작할 수 있습니다. 이 두 스타터 키트는 Blade와 Tailwind를 사용하여 애플리케이션의 백엔드와 프론트엔드 인증 흐름을 스캐폴딩하므로, 곧바로 큰 아이디어를 구현하는 일에 착수할 수 있습니다.

3 Vue / React 사용하기

현대적인 프론트엔드를 Laravel과 Livewire를 사용하여 구축하는 것은 가능하지만, 많은 개발자들은 여전히 Vue나 React와 같은 JavaScript 프레임워크의 강력함을 활용하는 것을 선호합니다. 이는 NPM을 통해 제공되는 JavaScript 패키지 및 도구의 풍부한 생태계를 활용할 수 있기 때문입니다.

그러나 추가적인 도구가 없이는 Laravel을 Vue 또는 React와 함께 사용하는 경우 클라이언트 측 라우팅, 데이터 하이드레이션, 인증과 같은 다양한 복잡한 문제를 해결해야 합니다. 클라이언트 측 라우팅은 종종 Nuxt와 Next와 같은 의견이 반영된 Vue/React 프레임워크를 사용하여 간소화되지만, 데이터 하이드레이션 및 인증은 Laravel과 이러한 프론트엔드 프레임워크를 결합할 때 여전히 복잡하고 번거로운 문제로 남아 있습니다.

게다가 개발자들은 두 개의 별도 코드 저장소를 유지해야 하며, 종종 두 저장소의 유지보수, 릴리스, 배포를 조정해야 합니다. 이러한 문제들이 극복 불가능한 것은 아니지만, 이는 생산적이거나 즐거운 애플리케이션 개발 방식이라고는 할 수 없습니다.

3.1 Inertia

다행히도 Laravel은 양쪽의 장점을 모두 제공합니다. Inertia는 Laravel 애플리케이션과 현대적인 Vue 또는 React 프론트엔드 간의 간극을 메우며, 하나의 코드 저장소 내에서 Laravel의 라우트 및 컨트롤러를 활용하여 라우팅, 데이터 수화 및 인증을 처리하면서도 Vue 또는 React를 사용하여 완전한 현대적 프론트엔드를 구축할 수 있게 해줍니다. 이러한 접근방식으로 Laravel과 Vue / React의 강력한 기능을 최대한 활용할 수 있습니다.

Inertia를 Laravel 애플리케이션에 설치한 후에는 기존과 같이 라우트와 컨트롤러를 작성합니다. 그러나 컨트롤러에서 Blade 템플릿을 반환하는 대신, Inertia 페이지를 반환하게 됩니다.

<?php
 
namespace App\Http\Controllers;
 
use App\Http\Controllers\Controller;
use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;
 
class UserController extends Controller
{
    /**
     * 해당 사용자의 프로필을 보여준다.
     */
    public function show(string $id): Response
    {
        return Inertia::render('Users/Profile', [
            'user' => User::findOrFail($id)
        ]);
    }
}

Inertia 페이지는 일반적으로 애플리케이션의 resources/js/Pages 디렉토리에 저장된 Vue 또는 React 컴포넌트에 해당합니다. Inertia::render 메소드를 통해 페이지에 제공되는 데이터는 페이지 컴포넌트의 "props"를 초기화하는 데 사용됩니다.

<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/vue3';
 
const props = defineProps(['user']);
</script>
 
<template>
    <Head title="User Profile" />
 
    <Layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Profile
            </h2>
        </template>
 
        <div class="py-12">
            Hello, {{ user.name }}
        </div>
    </Layout>
</template>

Inertia를 사용하면 프론트엔드를 구축할 때 Vue나 React의 모든 기능을 활용할 수 있으며, Laravel 기반 백엔드와 JavaScript 기반 프론트엔드 사이에 가벼운 브리지를 제공합니다.

서버 사이드 렌더링

서버 사이드 렌더링이 필요한 애플리케이션 때문에 Inertia 사용이 걱정된다면 안심하십시오. Inertia는 서버 사이드 렌더링을 지원합니다. 또한 Laravel Forge를 통해 애플리케이션을 배포할 때, Inertia의 서버 사이드 렌더링 프로세스가 항상 실행되도록 설정하는 것이 매우 간단합니다.

3.2 스타터 키트

프론트엔드를 Inertia와 Vue/React를 사용하여 구축하고 싶다면, Breeze 또는 Jetstream 스타터 키트를 활용하여 애플리케이션 개발을 신속하게 시작할 수 있습니다. 이 두 스타터 키트는 Inertia, Vue/React, Tailwind, Vite를 사용하여 애플리케이션의 백엔드와 프론트엔드 인증 흐름을 스캐폴딩하므로, 곧바로 큰 아이디어를 구현하는 일에 착수할 수 있습니다.

4 애셋 번들링

Blade와 Livewire로 개발하든 Vue / React와 Inertia로 개발하든 애플리케이션의 CSS를 프로덕션 준비가 된 애셋으로 번들링하는 것이 필요하게 될 겁니다. 물론 Vue나 React로 애플리케이션의 프론트엔드를 구축하는 경우, 컴포넌트를 브라우저에서 준비된 JavaScript 애셋으로 번들링해야 합니다.

기본적으로 Laravel은 Vite를 사용하여 애셋을 번들링합니다. Vite는 번개처럼 빠른 빌드 시간과 로컬 개발 중 거의 즉각적인 Hot Module Replacement (HMR)를 제공합니다. 새로운 Laravel 애플리케이션, 특히 우리의 스타터 키트를 사용하는 애플리케이션에서는 Vite를 Laravel 애플리케이션과 함께 사용하기 즐겁게 만드는 경량의 Laravel Vite 플러그인을 로드하는 vite.config.js 파일을 찾을 수 있습니다.

Laravel과 Vite를 시작하는 가장 빠른 방법은 가장 간단한 스타터 키트인 Laravel Breeze를 사용하여 애플리케이션 개발을 시작하는 것입니다. Laravel Breeze는 프론트엔드 및 백엔드 인증 스캐폴딩을 제공하여 애플리케이션을 신속하게 시작할 수 있게 도와줍니다.