라이브와이어 Livewire free

2019-07-30

이번 콘에서 Vapor와 함께 또 하나 사람들의 관심을 끄는 프로젝트가 공개됐습니다. 바로 이브와이어인데요, 벨 팀이 주도하는 프로젝트는 아니고 칼렙 포르지오는 개발자가 진행하는 프로젝트입니다. 


이브와이어는 자바스크립트를 쓰지 않고 벨과 블레이드로 동적인 프론트 엔드를 만들어주는 꽤 신기한 도구입니다. 자바스크립트 진영이 약간 폭주(?)하면서 과도하게 복잡해진 것에 문제의을 갖고 만든 것 같습니다. 프로젝트 홈페이지의 첫 문단에서



요즘 자바스크립트는 미친거 같다. 모달이나 로딩 스피너 같이 간단한거 하나 추가 하는데도 여러 패키지를 가져다 써야하고, 복잡도가 늘어난다. 그렇게 되선 안된다…



2019-07-30-livewire-home.png


홈페이지의 예를 통해 이브와이어가 어떻게 동작하는지 간단히 살펴봅시다.


아래는 VueJS로 만든 카운터 컴포넌트 입니다.


<script>
export default {
data: {
count: 0
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
},
},
}
</script>

<template>
<div>
<button @click="increment">+</button>
<button @click="decrement">-</button>

<span>{{ count }}</span>
</div>
</template>

아래는 같은 기능을하는 이브와이어 코드 입니다.


// App\Http\Livewire\Counter.php

use Livewire\Component;

class Counter extends Component
{
public $count = 0;

public function increment()
{
$this->count++;
}

public function decrement()
{
$this->count--;
}

public function render()
{
return view('livewire.counter');
}
}
// resources/views/livewire/counter.blade.php
<div>
<button wire:click="increment">+</button>
<button wire:click="decrement">-</button>

<span>{{ $count }}</span>
</div>

이브와이어와 뷰는 거의 비슷하게 동작하지만 이브와이어가 PHP 코드이기 때문에 서버에 요청을 주고 받는 과정이 추가됩니다.


Vue



  1. @click=”increment” 클릭을 인하고

  2. increment 메서드를 호출

  3. 템플릿을 다시 렌더링하고 DOM을 업데이트


이브와이어



  1. 이브와이어가 wire:click=”increment” 클릭을 인

  2. 이브와이어가 PHP에 AJAX 리퀘스트 전송

  3. PHP가 increment 메서드 호출하고 $count를 업데이트

  4. PHP가 블레이드를 다시 렌더링하고 HTML을 되돌려줌

  5. 이브와이어가 응답을 받아서 DOM을 업데이트


매번 서버에 요청을 보내야하기 때문에 모든 Vue 컴포넌트를 대체하기 보다는, 서버와 통신할 이 있는 컴포넌트만 이브와이어로 대체하면 좋을 것이고 합니다. 어차피 프론트 엔드에서 조작 후 변화된 내용을 서버로 다시 보내야한다면 확실히 이브와이어를 쓰는게 프론트 엔드에 AJAX 콜을 추가하고 서버에 이를 처리할 로직을 작성하는 것보다는 편리할 것 같아요.


위의 예제만으로는 어디에 써먹을 수 있을지 잘 안떠오르실 수도 있을 것 같습니다. Fun Building A UI Component From Scratch With Livewire 는 글을 보면 제작자가 이브코딩으로 이브와이어를 이용해서 UI 컴포넌트를 만드는걸 첨부했는데(30분), 이를 보시면 이브와이어 사용방법, 특징, 장점이 확 와닿으실거에요. 영어에 익숙치 않더도 코드만으로 이해가 잘 되니 관심있으신 분들은 한 번 보시길 권합니다. 아주 흥미로운 영상이에요.


많은 사람들이 성능을 우려하고 있긴 합니다. 제작자의 이브 코딩 영상에서는 충분히 쓸만한 성능이 나오는데, 실전에 쓸만한지는 아직 모르겠어요. 인터넷이 느리거나, 핑이 느리면 확실히 자바스크립트를 쓰는 것보다 버벅 가능성은 있을 것 같습니다.


제가 생각하는 우려는 학습 비용입니다. 사용법을 배우기 어렵지 않아보이지만, Vue를 완전히 대체할 수 있는 것은 아니기 때문에 만약 어느 팀에서 이를 쓰겠다고 결정하면 벨, Vue(혹은 다른 프론트엔드 프레임워크)도 배우기 어려운데 추가로 이브와이어까지 배워야하는게 걸림돌이 될 수 있을 것 같습니다.

1 1
2019년 7월 30




유료 구독자 전용 레터입니다.

한 달 1만원으로 매일 라라벨 관련 메일 받아보시고 과거 메일도 열람하세요. 일반 구독으로 공개글만 받아보실 수도 있습니다.

구독하기 버튼을 눌러주시면 구독과 동시에 xly에도 가입됩니다.

이현석

바쁜 팀장님 대신 알려주는 신입 PHP 개발자 안내서를 쓰고, 클린 아키텍처 인 PHP를 번역했습니다. 2020년에 출간될 Laravel Up & Running 2nd Edition을 번역하고 있습니다.