Hydro는 ASP.NET Core MVC 및 Razor 페이지의 확장으로 View 구성 요소를 확장하여 페이지를 다시 로딩하지 않고도 반응적이고 상태를 유지하도록 만듭니다.
아래 링크를 통해 동작성을 확인할 수 있습니다.
GitHub - hydrostack/hydro-sales / https://salesapp.usehydro.dev/
GitHub - hydrostack/hydro-todo
Hydro는 ASP.NET Core MVC 및 Razor 페이지의 확장으로 View 구성 요소를 확장하여 페이지를 다시 로딩하지 않고도 반응적이고 상태를 유지하도록 만듭니다.
아래 링크를 통해 동작성을 확인할 수 있습니다.
GitHub - hydrostack/hydro-sales / https://salesapp.usehydro.dev/
GitHub - hydrostack/hydro-todo
오… 닷넷 전용 상태관리라니…
웹앱에 한정한다면, 블레이저의 단점들을 많이 커버할 것 같습니다.
Comparisons | Hydro (usehydro.dev)
보안 처리마저 간단하다면, 안 쓸 이유가 없을 것 같습니다.
근데, 이미 블레이저의 호스팅 모델의 꿀 맛을 본지라, 살짝 고민이 되긴 합니다.
추가
생각해보니, Hydor 는 미들웨어 베이스니까 당연히 다른 미들웨어, 특히 보안 미들웨어와 충돌이 없을 것 같기는 하네요.
Asp.Net Core 의 미들웨어의 유연성에 다시 한번 감탄합니다.
누가 설계했는지 참…
alpinejs로 이렇게도 가능하군요.
테스트해보니 ViewComponent를 확장하여 HydroComponent를 만들어 사용합니다.
<!-- ~/Pages/Components/Counter.cshtml -->
@model Counter
<div>
Count: <strong>@Model.Count</strong>
<button hydro-on:click="@(() => Model.Add())">
Add
</button>
</div>
// ~/Pages/Components/Counter.cshtml.cs
public class Counter : HydroComponent
{
public int Count { get; set; }
public void Add()
{
Count++;
}
}
해당 파일을 만들어 구동하면
http://localhost:5001/Hydro/Counter
http://localhost:5001/Hydro/Counter/Add
라는 라우팅 생기게 되며 샘플로 Index.cshtml에 아래 코드를 삽입하면
<hydro name="Counter"/>
Hydro ViewComponent를 사용하여
<div id="W1D1DB1378839A47438FE8802599F641F" hydro-name="Counter" x-data="hydro" hydro="" data-has-alpine-state="true">
Count: <strong>0</strong>
<button x-on:click="invoke($event, {"name":"Add"})" data-loading-disable="" hydro-operation-id="7519defd-9144-4ea1-b62e-e219475ef038">
Add
</button>
<script type="text/hydro" data-id="W1D1DB1378839A47438FE8802599F641F">CfDJ8O7eov3goItGnjoV6SYmgA867nkiYDrJ4Q1UeMnXwvEa5crvc6MilfsGGRamH2_nBPWEil8Mj97bsnF6RJlX6uPy8Zm7YWCnx91gfY04gs_VtGh2tUfJ9XjHcAhreC_p1elbT1G1zDGrtaNyo5_TDbSSOQ33_8ufIcaN6ZFgjnJdgNc1j7nz1nHQnBEBH5YdaQ</script><script key="R068a133fd96f45f2afb109048c690b61" type="text/hydro" hydro-event="true" x-data="" x-on-hydro-event="{"name":"HydroBind","path":"/hydro/counter/event"}"></script></div>
html코드가 만들어 집니다.
x-on:click='invoke($event, {"name":"Add"})'
이 코드가 클릭되면 임베디드된 hydro.js를 통해 fetch로
https://localhost:5001/hydro/Counter/Add
주소를 post로 호출합니다.
요청해더에는 다음 값이 전송됩니다.
Hydro-All-Ids:[“W1D1DB1378839A47438FE8802599F641F”]
Hydro-Client-Event-Name:click
Hydro-Model:CfDJ8O7eov3goItGnjoV6SYmgA9pDh9rfIwWis5NTqI7Dqp1xYmxCs8eOgAiZNzGRLf-VZU4QcB8YFtv1UENANtLvgw2TUWIZIfNgCzFh7NiVty_SJ830fTbmLEgdmEYLHBG7arBqDSpNDWnqzrDx3NY2HNPKjGofUt7fslHXBUdPCEQaPBXDZw2_GoM5B2_h9bsYA
Hydro-Operation-Id:48c21825-9061-482b-862e-ecea9f7cf43c
Hydro-Parameters:{}
Hydro-Request:true
응답값은 다음과 같습니다.
<div id="W1D1DB1378839A47438FE8802599F641F" hydro-name="Counter" x-data="hydro" hydro>
Count: <strong>1</strong>
<button x-on:click='invoke($event, {"name":"Add"})' data-loading-disable="">Add
</button>
<script type="text/hydro" data-id="W1D1DB1378839A47438FE8802599F641F">
CfDJ8O7eov3goItGnjoV6SYmgA9lDfgmjwvQTNz9DqEbkGL19_j-A9TUZThnUI8B64Diq_Friilbplx5Se09TH9dVS9VSt5NcJhw5SnsagrQhcY1uUBaJf8uHsqHDGICcvbNqO9JSbrZ9P_zLXlRE4lsf18GHP8YMxqJHIeOFmWa3_BOfM8B7-qXiUehVcSRj1tz4Q
</script>
<script key="Rc6cb5ef0a9404a56ae5ac63287261075" type="text/hydro" hydro-event="true" x-data="" x-on-hydro-event="{"name":"HydroBind","path":"/hydro/counter/event"}"></script>
</div>
Jquery Unobtrusive AJAX과 비교해보게 되네요.
hydro로 웹앱을 처리중인데, 생각보다 편리(?)하고 좋은 것 같습니다. 일단, 클라이언트부분에서 자바스크립트를 사용하지 않아도 되어서 좋네요. 물론, 그 부분에 눈에 보이지 않게 alpinejs가 사용됩니다.
그리고, 전에는 Model등을 Header로 전송했는데 Header에는 제약사항이 있으니 Body로 전송하면 좋겠다고 이슈등록했더니 개발자분께서 빠르게 업데이트 해주시네요.
hydro를 이용한 샘플앱중 GitHub - hydrostack/hydro-sales 이 여러가지 기능을 살펴볼 가장 좋은 샘플인것 같습니다. 웹앱 구현에 참조할 부분도 많았습니다.
hydro-sales앱에 https://taghelperpack.net/ 을 이용되는데 좋은 것 같아 링크 남겨봅니다. 아래 링크가 taghelperpack을 이용한 템플릿부분입니다.