라라벨 프로젝트에서 Livewire를 버전 4로 업그레이드

이전 포스트에서 예고한 대로 이번에는 filament를 5 버전으로 설치하려고 했었다.

그런데 그전에 먼저 해야 할 것이 생겼다.

바로 Livewire의 버전을 4로 업그레이드하는 것이다.

이전 포스트

라라벨 프로젝트에서 tailwindcss 버전 4로 업그레이드 및 에러 해결법

라라벨 프로젝트에서 tailwindcss 버전을 3에서 4로 업그레이드하는 방법입니다. 자동 마이그레이션 명령어 사용법과 vite.config.js 플러그인 추가 순서를 설명합니다. 노드 모듈 캐시 청소 및 패키지 재설치를 통해 에러를 해결하는 팁도 공유합니다.

Livewire 4로 업그레이드 · 4th-avenue/laravel13-livewire@4f52a6f · GitHub

설명 없음

github.com

전체적인 코드 수정은 이 깃허브 링크를 통해서 확인할 수 있다.

현재 Livewire의 버전은 3.x

composer.json 파일을 확인해 보니, 라라벨 브리즈를 설치할 때 함께 설치된 Livewire의 버전이 3.6.4다.

tailwindcss도 그러더니, 왜 자꾸 스스로 업그레이드를 해야 하는 상황이 오는 것인지.. 🙄

아마도 라라벨에서 이젠 브리즈를 신경 쓰지 않는 것 같다.

라라벨.. 이대로 괜찮은 건지 걱정이 되는 부분이다.

어쨌든 수동으로 직접 업그레이드해 보자.

Upgrade Guide | Laravel Livewire

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

livewire.laravel.com

이 문서를 살펴보면서 업그레이드를 진행하면 된다.

그런데 이전 포스트의 tailwindcss를 4로 업그레이드할 때처럼 간단하지가 않다.

업그레이드 명령어를 입력하면 업그레이드도 진행되면서 기존의 파일들도 자동으로 수정을 해줬던 tailwindcss의 업그레이드와는 달리 기존의 파일들을 직접 다 수정해야 한다.

아직 Livewire로 뭔가 만든 것이 없는 지금 업그레이드를 하는 것이 좋을 것 같다.

Livewire 업그레이드

make app #컨테이너 안으로 들어간다.
composer require livewire/livewire:^4.0

VSCode의 터미널에서 이 명령어들을 차례대로 실행한다.

php artisan optimize:clear

설치가 완료되면 링크한 공식 문서에 나온 것처럼 이 명령어로 라라벨의 모든 임시 최적화 캐시 파일을 삭제하자.

livewire.php 파일 생성

현재는 config 디렉터리에 livewire.php 파일이 없다.

exit #컨테이너 밖으로 나간다.
make bash #다시 컨테이너 안으로 들어간다.
php artisan livewire:publish --config
exit

또 VSCode의 터미널에서 이 명령어들을 차례대로 실행한다.

이번에는 make app이 아니라 make bash로 컨테이너 안으로 들어가서 만들었다.

그 차이는 아래의 포스트를 참고하자.

Permission Denied 에러 해결 및 생성 파일 권한 자동 설정하기

Docker 환경에서 Permission Denied 에러가 발생하는 이유(컨테이너의 root 소유권)를 설명하고, chown 명령어를 이용한 수동 해결 방법과 Makefile을 이용하여 컨테이너 내에서 생성되는 파일의 소유권을 자동으로 설정하는 방법을 알려드립니다.

Volt 관련 코드나 파일을 삭제

이제 Livewire v4는 볼트 클래스 기반 구성 요소와 동일한 구문을 사용하는 단일 파일 구성 요소를 지원합니다.
즉, 볼트에서 Livewire의 내장된 단일 파일 구성 요소로 마이그레이션할 수 있습니다.

링크한 공식 문서에 이런 내용과 함께 Volt의 흔적을 지우는 방법들이 나와있다.

어떤 파일의 어느 부분을 수정해야 할지 모르겠다면 깃허브 링크를 참고하자.

흐름은 다음과 같다.

• Volt 컴포넌트들 상단에 use Livewire\Volt\Component;라고 임포트^Import 되어있는 것을 전부 use Livewire\Component;로 수정
• routes/auth.php 파일은 use Livewire\Volt\Component;를 삭제하고, Volt::route를 Route::livewire로 수정
• app/Providers/VoltServiceProvider.php 파일을 삭제
• bootstrap/providers.php에서는 App\Providers\VoltServiceProvider::class,를 삭제
• 그리고 마지막으로 VSCode의 터미널에서 php 컨테이너 안에 들어가서 composer remove livewire/volt를 실행한다.

첫 화면에서 에러가 발생

이제 거의 마지막이다.

첫 화면에서 에러가 발생한다.

이건 resources/views/welcome.blade.php 파일에서 <livewire:welcome.navigation /> 이 코드를 <x-welcome.navigation /> 이렇게 바꾸면 된다.

Livewire 컴포넌트를 호출하던 코드를 일반 블레이드 컴포넌트를 호출하는 코드로 바꾼 것이다.

첫 화면은 제대로 표시가 돼서 로그인을 했더니, 이젠 대시보드 화면에서 이런 에러가 떴다.

php artisan optimize:clear

이 경우에는 아까 위에서 한번 실행했었던, 라라벨의 모든 임시 최적화 캐시 파일을 삭제하는 이 명령어를 다시 실행해 보자.

여기까지 진행하면 Livewire 업그레이드도 성공적으로 끝나고, 현재까지의 모든 페이지들도 에러가 발생하지 않고 잘 표시된다.