Laravel Livewire 시작하기

5743 단어 Laravel LivewirelaravelLaravel 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를 활용한 프로젝트에 실제로 적용해보며 얼마나 편한지 프로젝트를 개발하며 알아보고 싶다.

참고

DataList의 데이터 행 수를 사용자 정의하는 방법
PHP5의 객체 할당 메커니즘 소개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage