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

이번에, 부동산관련해서 알아보다보니... 계산기 사이트 만들면 좋겠다 싶어서 [https://finz.co.kr/](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](https://github.com/ryangjchandler/spruce) 를 사용한다고 했고, 추천했었다. store 전역으로 사용할 수 있게 해주는 거였는데.. 이번에 또 다른 것이 나왔다. [https://github.com/KevinBatdorf/alpine-magic-helpers](https://github.com/KevinBatdorf/alpine-magic-helpers) x-data 를 딱 한번만 사용할 수 있는 부분에서, 상위 x-data 에 접근할 수 있는것들을 지원한다.. (거의 store 전역 수준... 와우) 또한.. 가장 마음에 드는 부분은 $fetch Using 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로 처리해줌... (반응이 좀 늦는다는건 단점 아닌 단점.... 호옹이)

다른 글