프론트엔드

소개
PHP 사용
Vue / React 사용
- Inertia
- Starter Kits
애셋 번들링

소개

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

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

PHP 사용

PHP와 Blade

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

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

Laravel에서는 views와 Blade를 사용하여 HTML 렌더링에 대한 이러한 접근 방식을 여전히 달성할 수 있습니다. 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가 만들어졌습니다.

Livewire

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

Livewire를 사용할 때 UI의 개별 부분을 렌더링하고 애플리케이션의 프런트엔드에서 호출하고 상호 작용할 수 있는 메서드와 데이터를 노출하는 Livewire "컴포넌트"를 만듭니다. 예를 들어, 간단한 "카운터" 컴포넌트는 다음과 같을 수 있습니다.

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    // 카운트 값을 저장하는 속성입니다. 초기값은 0입니다.
    public $count = 0;
 
    // 카운트 값을 1 증가시키는 함수입니다.
    public function increment()
    {
        $this->count++;
    }
 
    // Livewire 컴포넌트를 렌더링하는 함수입니다. 'livewire.counter' 뷰를 반환합니다.
    public function render()
    {
        return view('livewire.counter');
    }
}

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

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

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

많은 사람들에게 Livewire는 Laravel을 이용한 프런트엔드 개발에 혁명을 일으켜 현대적이고 동적인 웹 애플리케이션을 구축하는 동안 Laravel의 편안함 속에 머물 수 있게 해주었습니다. 일반적으로 Livewire를 사용하는 개발자는 대화 상자를 렌더링하는 것과 같이 필요한 곳에만 JavaScript를 프런트엔드에 "뿌리기" 위해 Alpine.js를 함께 활용합니다.

Laravel을 처음 접하는 경우 views와 Blade의 기본 사용법에 익숙해지는 것이 좋습니다. 그런 다음 공식 Laravel Livewire 문서를 참조하여 대화형 Livewire 컴포넌트를 사용하여 애플리케이션을 한 단계 더 발전시키는 방법을 알아보세요.

스타터 키트

PHP와 Livewire를 사용하여 프런트엔드를 구축하고 싶다면 Breeze 또는 Jetstream 스타터 키트를 활용하여 애플리케이션 개발을 빠르게 시작할 수 있습니다. 이 두 스타터 키트 모두 Blade 및 Tailwind를 사용하여 애플리케이션의 백엔드 및 프런트엔드 인증 흐름을 구성하므로 다음 큰 아이디어를 바로 구축하기 시작할 수 있습니다.

Vue / React 사용

Laravel 및 Livewire를 사용하여 최신 프런트엔드를 구축할 수 있지만 많은 개발자는 여전히 Vue 또는 React와 같은 JavaScript 프레임워크의 기능을 활용하는 것을 선호합니다. 이를 통해 개발자는 NPM을 통해 사용할 수 있는 풍부한 JavaScript 패키지 및 도구 생태계를 활용할 수 있습니다.

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

또한 개발자는 종종 두 개의 별도 코드 저장소를 유지 관리해야 하며 두 저장소 모두에서 유지 관리, 릴리스 및 배포를 조정해야 합니다. 이러한 문제가 극복할 수 없는 것은 아니지만, 우리는 이것이 애플리케이션을 개발하는 생산적이거나 즐거운 방법이라고 생각하지 않습니다.

Inertia

다행히 Laravel은 양쪽의 장점을 모두 제공합니다. Inertia는 Laravel 애플리케이션과 최신 Vue 또는 React 프런트엔드 사이의 격차를 해소하여 단일 코드 저장소 내에서 라우팅, 데이터 하이드레이션 및 인증에 Laravel 경로 및 컨트롤러를 활용하면서 Vue 또는 React를 사용하여 완전한 기능을 갖춘 최신 프런트엔드를 구축할 수 있도록 합니다. 이 접근 방식을 사용하면 어느 도구의 기능도 손상시키지 않고 Laravel과 Vue/React 모두의 모든 기능을 누릴 수 있습니다.

Laravel 애플리케이션에 Inertia를 설치한 후에는 평소처럼 경로와 컨트롤러를 작성합니다. 그러나 컨트롤러에서 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
{
    /**
     * Show the profile for a given user.
     */
    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를 사용하면 Laravel 기반 백엔드와 JavaScript 기반 프론트엔드 간에 가벼운 브릿지를 제공하면서 프론트엔드를 구축할 때 Vue 또는 React의 모든 기능을 활용할 수 있습니다.

서버 측 렌더링

애플리케이션에 서버 측 렌더링이 필요하여 Inertia를 사용하는 것이 걱정되시더라도 염려하지 마십시오. Inertia는 서버 측 렌더링 지원을 제공합니다. 또한 Laravel Forge를 통해 애플리케이션을 배포할 때 Inertia의 서버 측 렌더링 프로세스가 항상 실행되도록 하는 것은 매우 쉽습니다.

스타터 키트

Inertia 및 Vue / React를 사용하여 프론트엔드를 구축하려는 경우, Breeze 또는 Jetstream 스타터 키트를 활용하여 애플리케이션 개발을 빠르게 시작할 수 있습니다. 이 두 스타터 키트 모두 Inertia, Vue / React, Tailwind 및 Vite를 사용하여 애플리케이션의 백엔드 및 프론트엔드 인증 흐름을 스캐폴딩하므로 다음 큰 아이디어를 바로 구축하기 시작할 수 있습니다.

번들링 자산

Blade 및 Livewire 또는 Vue / React 및 Inertia를 사용하여 프론트엔드를 개발하는지 여부에 관계없이 애플리케이션의 CSS를 프로덕션용 자산으로 번들링해야 할 가능성이 높습니다. 물론 Vue 또는 React로 애플리케이션의 프론트엔드를 구축하기로 선택한 경우 구성 요소를 브라우저에서 사용할 수 있는 JavaScript 자산으로 번들링해야 합니다.

기본적으로 Laravel은 Vite를 사용하여 자산을 번들링합니다. Vite는 로컬 개발 중 번개처럼 빠른 빌드 시간과 거의 즉각적인 HMR(Hot Module Replacement)을 제공합니다. 스타터 키트를 사용하는 것을 포함하여 모든 새로운 Laravel 애플리케이션에서 Laravel 애플리케이션에서 Vite를 쉽게 사용할 수 있게 해주는 가벼운 Laravel Vite 플러그인을 로드하는 vite.config.js 파일을 찾을 수 있습니다.

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

Laravel에서 Vite를 사용하는 방법에 대한 자세한 내용은 자산 번들링 및 컴파일에 대한 전용 문서를 참조하십시오.