Livewire을 이용하여 사이트 만든 후기

Updated on

이번에, 부동산관련해서 알아보다보니… 계산기 사이트 만들면 좋겠다 싶어서

https://finz.co.kr/ 을 만들었다…

이렇게 만들면서 Laravel + Livewire + Alpine.js 을 이용했다.
(아 물론, 이거말고 다른 사이트에도 적용해서 사용한적이 있다)

만들면서 느낀점은… 생각보다 굉장히 불편하다…
무언가 설정을 하는 페이지에 있어서는, 해당 select 를 수정할때마다, 해당 html dom을 새로 받아와서 교체할 수 있는건 엄청 큰 장점으로 볼 수 있다고 생각한다.

하지만, 그것 외인… input에서는 생각보다 딜레이가 많이 걸린다..

wire:model.debounce.500ms
wire:model.lazy

기타 옵션을 사용할 수는 있지만, 이게 생각보다 조금 불편하다고 느껴진다…

그렇다고, Laravel blade를 사용하자니, modal 이라던가 ajax라던가, 여러가지를 직접 작업해야하는게 더 노가다 같기도하다… 몇몇 wire:model을 submit 할때에 또는 이벤트 할때에만 데이터를 전송하게 할 수는 없는걸까…? 매번 wire:model이 수정될때마다 request 하는게 조금…. 아쉽다

예전에 alpine.js 를 사용하면서, https://github.com/ryangjchandler/spruce 를 사용한다고 했고, 추천했었다. store 전역으로 사용할 수 있게 해주는 거였는데..

이번에 또 다른 것이 나왔다.

https://github.com/KevinBatdorf/alpine-magic-helpers

x-data 를 딱 한번만 사용할 수 있는 부분에서, 상위 x-data 에 접근할 수 있는것들을 지원한다.. (거의 store 전역 수준… 와우)

또한.. 가장 마음에 드는 부분은

$fetchUsing Axios, fetch JSON from an external source.

위 기능이다. Axios를 통해서, 간편하게 데이터를 받아와서 x-data에 설정할 수 있다…
이 기능을 사용한다면, laravel blade + alpine.js 단 두가지 만으로, 엄청 빠르고 다양한 기능을 구현할 수 있을 것이라고 생각한다…

그래서 다음 작업물에서는 laravel blade + alpine.js + alpine-magic-helpers 만으로 작업해봐야겠다… (모달이라든가,, 데이터를 실시간으로 fetch로 받아와서, 적용시켜주고 할것이다… 거기에 라라벨8 에서는 컴포넌트 부분에 있어서 @once @endonce 를 추가한다고 하니까… 더욱 더 활용성이 좋아질 거라고 생각된다)

지금 계속해서… 계산기 추가중이긴한데, 장점이라고 한다면, frontend 에서 식 계산을 하지 않아도 된다는 점은 장점이다… 계산기의 계산 식을 전부 backend php로 처리해줌… (반응이 좀 늦는다는건 단점 아닌 단점…. 호옹이)