개발

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

2020년 8월 24일 · < 1 minutes

1979

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

이렇게 만들면서 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 전역 수준… 와우)

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

$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로 처리해줌… (반응이 좀 늦는다는건 단점 아닌 단점…. 호옹이)

답글 남기기 응답 취소

6 thoughts on “Livewire을 이용하여 사이트 만든 후기”

GGAMI
· 2020년 10월 11일 at 4:32 오후

불편한 부분들이 있는것은 사실이지만, 조금씩 개선되어가는게 보이네요… 작은 프로젝트는 livewire 를 사용해서 작업해도 좋을것 같아요,,, 아직 많이 부족하지만, 칭찬해주셔서 감사합니다 ^^

Reply
뗄감개발자
· 2021년 10월 17일 at 2:03 오전

방식이 넘 뗄감스러워요 에엥~!

Reply
- GGAMI
  · 2021년 10월 17일 at 4:44 오전
  
  네 반갑습니다 🙂 livewire 좋아요 !
  
  Reply
이너프
· 2021년 11월 11일 at 2:28 오전

님, livewire 문서에 다 있는데, wire:model.defer 로 하면 실시간 업데이트 하지 않고 submit을 기다립니다.

Reply
- GGAMI
  · 2021년 11월 12일 at 2:18 오후
  
  아 네 🙂 맞습니다, defer를 사용하면 되지요. 하지만 제가 개발했을때 당시는 v1이였고, v1에는 해당 기능이 없었습니다 ㅠㅠ 그래서, v1때는 product에는 사용하면 안되겠단 생각을 했고요,
  하지만, v2로 넘어오고 defer와 더불어 alpinejs 와 사용하기 수월하게 업데이트되었고,
  실제로 turbolinks 까지 지원하면서. 아주 좋아졌습니다.
  
  하지만, 현재 alpinejs v3에서 hotwire/turbo의 경우 문제가 있고. alpinejs의 경우 메모리 누수의 문제도 있다고 github에서 이야기하는것 같습니다. ㅠㅠ
  
  아무쪼록 livewire v2 2.6.5오면서 model binding 또한 더 deep 하게 기능을 지원합니다 🙂
  
  실제로 전 livewire로 만들어진 서비스를 실제 운영중에 있으며, 아직까지 큰 문제를 발견하지 못했습니다. (turbo를 현재 사용 못하는것을 제외하고는 없음)
  
  Reply
- GGAMI
  · 2022년 3월 4일 at 12:43 오전
  
  https://github.com/alpinejs/alpine/releases/tag/v3.9.1
  이제 드디어, 발견된 메모리 누수는 모두 고쳐진것같습니다.
  이렇게 된다면, hotwire/turbo와 같이 사용해도 될 것 같습니다 🙂
  
  Reply

GGAMI.NET