Laravel의 프론트 스택 - Livewire

라라벨 기반으로 만들어진 Jetstream 이라는 스타터킷이 있습니다.

하나의 블로그 웹애플리케이션에 필요한 기본적인 기능들이 미리 만들어져 있는 기본 틀 같은거죠.

composer를 이용해 해당 스타터킷을 설치할 때 프론트 스택을 Livewire + Blade를 사용할 것인지 아니면 Inertia + Veujs를 사용할 것인지 선택사항이 나옵니다.

이 두가지가 라라벨에서 사용하는 가장 트렌드한 프론트 기술스택이라는 얘기겠죠.

오늘은 Livewire 에 대해서 알아보겠습니다.

 

Livewire는 라라벨에서 사용하는 일종의 모듈인데요.

작가가 "요즘 프론트엔드 기술스택들이 너무 나댄다, 너무 건방지다" 이런 말을 하면서 만들었다고 합니다.

React 나 Vue 와 같은 프론트 기술들을 겨냥해서 한 말인데요.

기존의 서버사이드에서 모든 걸 처리하는 웹방식과 달리 React나 Vue 와 같은 기술스택들이 데이터 렌더링이나 심지어 페이지 라우팅까지 가져가는 걸 보고 한 얘기가 아닌가 싶습니다.

공식적으로는 React 나 Vue 가 강력하지만 풀스택 개발자한테는 워크플로우에 복잡성을 추가해 주기에 그런 것들을 간단하게 해결해주는 풀스택 프레임워크라고 합니다.

이게 뭔소리인지 의아해 하실 수도 있는데요.

하나씩 설명해 보도록 하겠습니다.

 

풀스택 개발자, 혹은 프론트엔드 로직까지 담당하는 백엔드 개발자 입장에서는 데이터 랜더링이나, 리액티브 웹페이지까지 많은 작업을 해야 합니다.

예를 들어 웹페이지에서 일부 영역에 데이터만 변경하고 싶을 때 우리는 서버와 ajax통신을 해서 데이터를 가져와 일부 영역만 업데이트 해줘야 합니다.

이 과정에서 개발자가 하는 작업을 아래와 같이 정리할 수 있습니다.

 

1. 해당 영역 데이터에 필요한 정보를 수집한다.

2. 서버로 ajax 요청을 보내는 작업을 한다.

3. 서버사이드에서 수신기(라우트)를 만든다.

4. 요청을 처리하기 위한 함수를 만든다.

5. 처리된 데이터를 클라이언트로 반환한다.

6. 클라이언트에서 반환받은 데이터를 타겟 영역에 렌더링한다.

 

적어도 우리가 jQuery 기반의 개발을 했을 때에는 이러한 과정들을 다 일일이 작업해야 했습니다.

하지만 자주 해야 되는 작업일 수록 생산성이 떨어지기 마련이죠.

React 나 Vue 같은 경우에는 이 과정에서 1,2,6 즉 프론트에 해당되는 부분을 쉽게 처리하도록 해주었습니다.

 

Vue3 예제:

<template>
  <div>{{ name }}</div>
  <button @click="getName">이름 변경</button>
</template>

<script setup>
import {ref} from 'vue';
const name = ref('');

async function getName() {
    const response = await fetch('/api/name')
    const name.value = await response.text()
}
</script>

 

이런 Reactive 웹앱을 만드는 프레임워크들은 기본적으로 템플릿과 스크립트에 사용되는 변수들이 서로 바인딩 되어 해당 변수의 값이 변경될 때마다 자동으로 감지해서 템플릿을 다시 렌더링 해주는 기능을 갖고 있습니다.

우리가 해야할 것은 단지 어떤 변수를 변경할 지 , 어디로 요청을 보낼 지만 결정하면 됩니다.

 

하지만 아무리 편하게 작업할 수 있다한들 어디까지나 프론트영역만의 일이고

풀스택 개발자 입장에서는 프론트엔드와 벡엔드를 각각 작업해야 하고 둘 사이를 이어주는 작업도 해야 하는 번거로움은 여전하다는거죠.

그래서 등장한게 Livewire 입니다.

 

일단 Livewire 는 라라벨 컴포넌트의 일종으로 존재합니다.

아래와 같이 Livewire 컴포넌트를 상속받으며 클래스를 작성합니다.

use Livewire\Component;
class NameTest extends Component
{
    public $name = '이름모름';
    
    public function getName()
    {
    	return "이너프";
    }
    
    public function render()
    {
        return view('nameTest');
    }
}

 

보시면 public으로 선언된 맴버변수 name, 맴버메서드 getName 이 있습니다.

그리고 마지막 render 함수에 보시면 view 함수에 입력된 인자값이 blade 템플릿 파일명이 되겠습니다.

그럼 이제 템플릿 파일을 살펴보죠.

 

nameTest.blade.php

<div>
  <div>{{ $name }}</div>
  <button wire:click="getName">이름 변경</button>
</div>

 

이게 끝입니다.

감이 오시나요?

이제 ajax통신 코드도 작성할 필요가 없습니다.

Livewire 가 다 알아서 해줍니다.

그리고 더 놀라운 것은 위에서 설명한 vue코드에서 템플릿과 javascript 사이에 상태값을 바인딩한다고 했다면,

Livewire 는 프론트의 영역을 뛰어넘어 아예 백엔드에 있는 상태값까지 바인딩한다는 것입니다.

버튼을 클릭하면 서버로 통신을 보내서 Livewire 컴포넌트에 지정된 함수를 실행한 후 변경된 상태값을 기반으로 다시 템플릿을 랜더링하여 클라이언트로 보냅니다. 클라이언트에서는 반환받은 템플릿을 현재의 템플릿과 비교하여 변경된 부분만 업데이트 해줍니다.

데이터 랜더링, 서버와의 통신, 지정된 함수실행, 반환데이터를 템플릿에 다시 렌더링까지 모든 걸 자동으로 완수해주죠.

 

우리는 단지 백엔드에서 템플릿에 어떤 변수를 사용할 건지, 템플릿에서는 어떠한 동작에 어떠한 백엔드 함수를 실행할 건지 이런 것만 결정하면 됩니다.

코딩에 소모되는 시간을 대폭 줄이고 비지니스 로직에 더 집중할 수 있게 해주는거죠.

 

하지만 react 나 vue에 비해 단점인 부분도 존재하는데요.

바로 라우팅 같은 경우 아무래도 서버사이드에서 처리되어야 하는 부분이다보니 react 나 vue로 만든 프론트 웹앱처럼 부드러운 페이지넘김을 구현할 수는 없습니다.

즉 SPA를 구현할 수는 없다는 겁니다.

그리고 어떠한 프레임워크도 그러했 듯이 편리할 수록 그만큼 무겁다는 리스크는 항상 존재해왔기에 앞으로 대형 프로젝트에서 사용될 시 어떠한 모습을 보여줄 지는 시간의 점검이 더 필요할 듯 싶습니다.

 

Livewire 에 대한 소개는 여기까지 하겠습니다.

구체적인 사용법은 공식사이트 https://laravel-livewire.com 에서 찾아보실 수 있습니다.

감사합니다.