라라벨 라이브와이어(Livewire)란 무엇인가?

이제부터 라라벨^Laravel과 라이브와이어^Livewire를 사용해서 웹사이트를 만들어보려고 한다.

오늘의 포스트는 Livewire에 대해서 간단하게 설명하고, 개발 환경 구축만 하고 끝내려고 한다.

Livewire란?

라이브와이어는 라라벨에서 공식 지원하는 풀스택 프레임워크다.

복잡한 자바스크립트 프론트엔드 프레임워크(React, Vue 등)의 도움 없이 오직 php와 라라벨 블레이드^Blade 템플릿만으로 SPA(싱글 페이지 애플리케이션)처럼 동적이고 실시간 상호작용이 가능한 화면을 만들 수 있게 해주는 기술이다.

Livewire | Laravel Livewire

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

livewire.laravel.com

Livewire 웹사이트의 링크다.

검색사이트에서 검색하면 다른 URL의 예전 사이트도 나오는데, 이쪽이 현재도 업데이트되고 있는 진짜 Livewire 사이트다.

이렇게 다크 테마로 꾸며진 사이트가 진짜 Livewire 웹사이트다.

다음 포스트를 위한 준비

다음 포스트부터 Livewire도 같이 사용하면서 웹사이트를 만들어볼 건데, 그전에 준비해야 할 것이 있다.

1. 라라벨 설치

docker로 php + NGiNX + MariaDB의 Laravel 개발 환경 구축 1편

Docker Compose를 이용해 php, NGiNX, MariaDB 기반의 Laravel 개발 환경을 구축하는 연재의 1편입니다. php 컨테이너 생성과 볼륨 마운트 설정, 그리고 개발 시 발생하는 파일 권한 문제(EACCES) 해결 방법을 상세히 정리했습니다.

먼저 이 포스트에서 연속으로 이어지는 6개의 포스트들을 보고 라라벨을 설치하고 Makefile을 만드는 등, 개발 환경을 구축한다.

2. 라라벨 브리즈 (Livewire) 설치

라라벨 13에 Laravel Breeze 설치하기 (Could not resolve './bootstrap' in resources/js/app.js 에러 해결 방법)

라라벨 13에서 Breeze를 설치할 때 발생하는 Could not resolve './bootstrap' in resources/js/app.js 에러 해결 방법을 공유하고, 각 스택(Blade, Livewire, React/Vue)별 차이점도 정리했습니다.

그리고 라라벨 브리즈^{Laravel Breeze}를 설치한다.

스택^Stack은 Livewire (Volt Class API) with Alpine을 선택할 거다. (Volt를 사용하지 않는다면 뭘 선택해도 상관없다.)

라라벨 볼트^Volt는 라라벨 라이브와이어^Livewire 환경에서 백엔드 php 로직과 프론트엔드 HTML 템플릿을 분리하지 않고, 단 하나의 .blade.php 파일 안에 프론트엔드와 백엔드의 모든 코드를 넣어서 개발하는 '싱글 파일 컴포넌트(SFC)' 라이브러리다.

Vue.js의 .vue 파일이나 Svelte의 개발 방식처럼, 파일 하나만 열면 그 안에서 데이터 조회(php)와 화면 구성(HTML)을 한 방에 끝낼 수 있게 해주는 기술이다.

Laravel Breeze의 Livewire 스택 설치 시 제공되는 Volt Class API와 Volt Functional API 두 가지 선택지의 의미는 Breeze가 자동으로 깔아주는 로그인・회원가입 등 기본 파일들을 Class API 형태의 Volt로 만들어 줄까, Functional API 형태의 Volt로 만들어 줄까를 결정하는 템플릿 선택일 뿐이다.

코드를 직접 타이핑하기 전에는 Class API나 Functional API의 차이가 뭔지 감도 안오고 낯설게 느껴질 수도 있다.

두 스택의 세부적인 코드 형태의 차이점은 이 유튜브 영상을 통해서 확인하자.

그런데 어차피 앞으로 진행될 포스트에서 직접 Volt 컴포넌트를 만들거나 하지는 않을 거다.

대중적이고 직관적인 전통적인 라이브와이어 방식으로 웹사이트를 만들어 나갈 예정이다.

다음 포스트

라라벨 touch(): Utime failed: Operation not permitted 에러 해결 방법

라라벨 브리즈 및 디버그바 초기 세팅 중 발생하는 touch(): Utime failed: Operation not permitted 에러 해결 방법입니다. 도커 환경에서 뷰 파일과 캐시 권한 오작동 문제를 해결하기 위해 캐시를 청소하는 법을 공유합니다.