Laravel Livewire 시작하기
Laravel
PHP 웹 개발을 하면서 아무런 프레임워크도 사용하지도 않았는데, 어느 한 시점에서 PHP 프레임워크로 인기인 Laravel을 발견하였다. 내가 이 프레임워크를 잘 사용할 수 있을까도 고민했지만, PHP 개발을 어느정도 할 수 있는 수준이라면, Laravel만의 문법만 익히면 바로 사용할 수 있다.
Laravel Livewire
'Laravel Livewire'라는 프레임워크도 찾았는데 Livewire은 JavaScript를 사용하지 않고 Laravel과 Laravel에서 프론트 단을 맡고 있는 Blade만으로 동적 페이지 생성을 도와주는 도구이다. 즉, Laravel 용 풀스택 프레임워크라고 할 수 있는 것이다.
시작하기
아래 사진은 Laravel Livewire의 공식 홈페이지의 Docs 페이지이다. Docs에 나와있는 그대로 진행하면 쉽게 Laravel Livewire을 사용할 수 있을 것 같다.
Docs의 Quickstart를 과정을 진행하면 Counter(수 세기)을 만들 수 있다. Livewire은 Laravel에 종속되는 프로그램이기에 Laravel 프로젝트를 먼저 생성해야한다. 필자의 경우에는 Laravel 7 버전이 아직까진 익숙하기 때문에 Laravel 7 버전으로 이 글을 작성 및 진행하기로 결정하였다. Laravel 프로젝트를 생성하는 명령어는 다음과 같다.
composer create-project --prefer-dist laravel/laravel:^7.0 counter
'counter' 의 이름을 가진 Laravel 프로젝트를 생성하고, Laravel Livewire 설치 과정을 진행한다. 위 사진과 같이 프로젝트 생성이 완료되었다면 터미널에서 아래 명령어를 입력한다.
cd counter
터미널에서 'counter' 폴더에 들어갔다면, 아래 명령어를 입력하여 Laravel Livewire을 설치한다.
composer require livewire/livewire
Laravel Livewire은 동적 웹 페이지 생성을 도와주기 때문에 Laravel 프로젝트의 프론트 단에 Laravel Livewire을 불러올 수 있는 코드를 추가해야한다. 필자의 경우에는 Visual Studio Code를 주로 이용하기 때문에 VS Code로 작업을 진행한다. VS Code에서 아까 전 생성한 Laravel Project를 불러오고, 'resources/views/welcome.blade.php' 파일을 열고, 아래 코드와 사진과 같이 코드를 추가한다.
...
@livewireStyles
</head>
<body>
@livewireScripts
...
위 과정까지 모두 진행했다면, Laravel Livewire의 컴포넌트를 추가할 차례이다. 아래 명령어를 입력하여 Laravel Livewire의 컴포넌트를 설치한다.
php artisan make:livewire counter
위 명령어를 입력하여 컴포넌트를 설치하면, 'app/Http/Livewire/Counter.php'와 'resources/views/livewire/counter.blade.php/' 파일이 추가된다. 다시, 'resources/views/welcome.blade.php' 파일을 열고, 아래 사진과 같이 코드를 추가한다.
...
<body>
<livewire:counter />
...
현재 진행하고 있는 Laravel Livewire Quickstart Docs는 Counter(수 세기) 프로젝트를 만드는 방법에 대해서 기술하고 있기 때문에 Counter 컴포넌트 Class를 생성해야한다. 'app/Http/Livewire/Counter.php' 파일을 열고 아래 사진과 같이 코드를 추가한다.
...
public $count = 0;
public function increment()
{
$this->count++;
}
...
코드를 추가했다면, 'resources/views/livewire/counter.blade.php' 파일을 열고, 아래와 같이 코드를 추가한다.
<div style="text-align: center">
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
</div>
이제 Laravel Livewire의 Counter 프로젝트 만들기가 모두 끝났다. 아래 명령어를 입력하여 내부 개발 서버를 열고, 프로젝트가 잘 생성되었는지 확인한다.
php artisan serve
위와 같이, + 버튼을 누르면 수가 증가하는 것을 확인했다면 성공. 필자의 계획은 Laravel Livewire를 게시판 등 Database를 활용한 프로젝트에 실제로 적용해보며 얼마나 편한지 프로젝트를 개발하며 알아보고 싶다.
참고
Author And Source
이 문제에 관하여(Laravel Livewire 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yunh03/Laravel-Livewire-시작하기-lfzc7ygw저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)