Livewire는 특히 프론트엔드 개발을 목표로 하는 Laravel 생태계에서 가장 중요한 프로젝트 중 하나입니다. 최근 Livewire v3가 출시되었으니 Livewire가 무엇인지, 어떤 프로젝트가 해당 아키텍처에 적합한지 살펴보겠습니다.

Livewire의 특징은 전용 JavaScript 프레임워크를 사용할 필요 없이 "현대적인" 웹 애플리케이션을 개발할 수 있다는 것입니다.

Livewire를 사용하면 분리된 프런트엔드와 백엔드로 프로젝트의 복잡성을 관리할 필요 없이 Vue 또는 React에서 제공하는 것과 동일한 수준의 반응성을 제공하는 블레이드 구성 요소를 개발할 수 있습니다. Laravel 및 Blade 템플릿 범위 내에서 애플리케이션 개발을 계속할 수 있습니다.

라이브와이어 작동 방식

Livewire는 Laravel 프로젝트에 추가할 수 있는 Composer 패키지입니다. 그런 다음 적절한 블레이드 지시문을 사용하여 각 HTML 페이지(또는 단일 페이지 응용 프로그램을 생성하려는 경우 페이지)에서 활성화해야 합니다. Livewire 구성 요소는 특정 프런트엔드 구성 요소가 작동하고 렌더링되어야 하는 방식에 대한 논리를 포함하는 PHP 클래스와 블레이드 파일로 구성됩니다.

브라우저가 Livewire가 사용되는 페이지에 액세스하도록 요청하면 다음이 발생합니다.

• 페이지는 블레이드를 사용하여 생성된 페이지와 마찬가지로 구성 요소의 초기 상태로 렌더링됩니다.
• 구성 요소 UI가 상호 작용을 실행하면 Livewire 구성 요소와 발생한 상호 작용 및 구성 요소의 상태를 나타내는 적절한 경로에 대한 AJAX 호출이 이루어집니다.
• 데이터는 구성 요소의 PHP 부분에서 처리되며 상호 작용의 결과로 새로운 렌더링을 수행하고 이를 다시 브라우저로 보냅니다.
• 서버에서 받은 변경 사항에 따라 페이지의 DOM이 변경됩니다.

Vue 및 React의 기능과 매우 유사하지만 이 경우 상호 작용에 응답하는 반응성 로직은 자바스크립트 측이 아닌 백엔드에서 관리됩니다.

논리적 이해를 돕기 위해 아래에 비교 예를 보여드리겠습니다.

개발자 중심 회사를 구축하는 데 따른 어려움에 대해 자세히 알아보려면 Linkedin 또는 X에서 저를 팔로우하세요.

Laravel Livewire 설치 방법

Livewire 설치는 절대적으로 최소화됩니다. Laravel 프로젝트에 Composer 패키지를 설치하고 필요한 블레이드 지시어를 모든 페이지(또는 프로젝트의 모든 블레이드 템플릿이 파생되는 공통 레이아웃)에 추가하세요.

composer require livewire/livewire

    ...

    @livewireStyles


    ...

    @livewireScripts

Laravel Livewire 구성 요소를 생성하는 방법

Composer 패키지가 설치되면 새로운 Artisan make 하위 명령을 사용하여 새로운 Livewire 구성요소를 생성할 수 있습니다. 각 구성 요소는 PHP 클래스와 블레이드 보기로 만들어집니다.

블레이드의 클래스 기반 구성요소와 유사합니다.

php artisan make:livewire SpyInput    
COMPONENT CREATED ?

CLASS: app/Http/Livewire/SpyInput.php
VIEW: resources/views/livewire/spy-input.blade.php

이 예의 구성 요소는 JavaScript 코드를 작성할 필요 없이 HTML 입력 필드에 작성된 내용을 "감시"합니다.

그런 다음 구성 요소 클래스에 공용 속성을 삽입합니다.

// app/Http/Livewire/SpyInput.php

namespace App\Livewire;

use Livewire\Component;

class SpyInput extends Component
{
    public string $message;

    public function render()
    {
        return view('livewire.spy-input');
    }
}

다음과 같이 구성요소 뷰를 구현합니다.

// resources/views/livewire/spy-input.blade.php


    Type here:
    You typed: {{ $message }}

마지막으로 Livewire 구성 요소를 블레이드 보기에 배치합니다.

    @livewireStyles



    

    @livewireScripts

일반 블레이드 구성 요소에서는 구성 요소 클래스의 모든 공개 속성이 블레이드 템플릿에 표시됩니다. 따라서 {{ $message }}에서 $message 속성의 값이 자동으로 표시됩니다. 그러나 일반 클래스 기반 구성 요소에서는 첫 번째 구성 요소 렌더링에서만 이러한 현상이 발생합니다. 입력 필드에 무언가를 입력하면 스팬 태그에는 아무 변화도 없습니다.

그러나 Livewire 구성 요소에서는 필드에 wire:model="message" 속성을 사용했습니다. 이 속성은 입력 필드의 값이 PHP 클래스의 $message 속성에 연결되도록 합니다. 입력 필드에 새 값을 쓰면 서버로 전송되며, 서버는 $message 값을 업데이트하고 새 렌더링을 수행한 다음 프런트엔드로 다시 보낸 다음 {{ $의 텍스트를 업데이트합니다. 메시지 }}.

브라우저 개발 도구의 네트워크 탭을 열면 키보드의 각 키를 누를 때마다 아래 경로로 서버를 호출하는 것을 확인할 수 있습니다.

/livewire/message/

각 호출에 대한 응답에는 구성 요소에 대해 새로 렌더링된 HTML이 포함되어 있으며, Livewire는 이전 페이지 대신 페이지에 삽입합니다. 다양한 사용자 정의 와이어 속성을 사용할 수 있습니다. 예를 들어 버튼을 클릭하면 구성 요소 클래스의 공개 메서드를 실행할 수 있습니다. 다음은 이 입찰의 예입니다.

Click Here

class SpyInput extends Component
{
    public function doSomething()
    {
        // Your code here…
    }
}

여기서 doSomething는 Livewire 구성 요소 PHP 클래스의 공개 메서드입니다.

다른 Laravel 기능과 통합

구성 요소에 연결된 PHP 클래스는 Laravel 프로젝트의 다른 PHP 클래스처럼 동작합니다. 유일한 차이점은 클래스의 공용 속성을 초기화하기 위해 고전적인 __construct 클래스 생성자 대신 mount 메서드를 사용한다는 것입니다.

{{-- Initial assignment of the the $book property in the ShowBook class --}}


class ShowBook extends Component
{
    public $title;
    public $excerpt;

    // "mount" instead of "__constuct"
    public function mount(Book $book = null)
    {
        $this->title = $book->title;
        $this->excerpt = $book->excerpt;
    }
}

보호된 속성 $rules를 사용하여 프런트엔드에서 백엔드로 전송되는 데이터에 대한 유효성 검사 제한을 구성할 수도 있습니다. 데이터의 유효성을 검사하려면 verify() 메서드를 호출해야 합니다.

class BookForm extends Component
{
    public $title;
    public $excerpt;
    public $isbn;

    protected $rules = [
        'title' => ['required', 'max:200'],
        'isbn' => ['required', 'unique:books', 'size:17'],
        'excerpt' => 'max:500'
    ];

    public function saveBook()
    {
        $validated = $this->validate($this->rules);

        Book::create($validated);

        return redirect()->to('/books);
    }
}

또는 PHP 속성을 사용하여 클래스 속성에 대해 원하는 유효성 검사 규칙을 선언할 수 있습니다.

class BookForm extends Component
{
    #[Validate('required|max:200')]
    public $title;

    #[Validate('required|unique:books|size:17')]
    public $isbn;

    #[Validate('max:500')]
    public $excerpt;

    public function saveBook()
    {
        $this->validate();

        Book::create([
            'title' => $this->title,
            'isbn' => $this->isbn,
            'excerpt' => $this->excerpt,
        ]);

        return redirect()->to('/books);
    }
}

일반적으로 각 Livewire 구성 요소는 Laravel 개발자가 Laravel 프로젝트 내의 PHP 클래스에서 기대하는 방식으로 작동합니다. 따라서 Laravel과 Vue/React 간의 개발 프로젝트를 분리할 필요 없이 반응형 웹 인터페이스를 생성할 수 있습니다.

Laravel 애플리케이션을 무료로 모니터링하세요

Inspector는 소프트웨어 개발자를 위해 특별히 설계된 코드 실행 모니터링 도구입니다. 서버 수준에서는 아무것도 설치할 필요가 없습니다. Laravel 패키지만 설치하면 바로 사용할 수 있습니다.

HTTP 모니터링, 데이터베이스 쿼리 통찰력, 경고 및 알림을 선호하는 메시징 환경으로 전달하는 기능을 찾고 있다면 Inspector를 무료로 사용해 보세요. 계정을 등록하세요.

또는 웹사이트에서 자세한 내용을 알아보세요: https://inspector.dev