Hydro - JavaScript를 작성하지 않고도 상태 저장 및 반응형 구성 요소를 ASP.NET Core에서 가능

Hydro는 ASP.NET Core MVC 및 Razor 페이지의 확장으로 View 구성 요소를 확장하여 페이지를 다시 로딩하지 않고도 반응적이고 상태를 유지하도록 만듭니다.

아래 링크를 통해 동작성을 확인할 수 있습니다.

GitHub - hydrostack/hydro-sales / https://salesapp.usehydro.dev/
GitHub - hydrostack/hydro-todo


4 Likes

오… 닷넷 전용 상태관리라니…

웹앱에 한정한다면, 블레이저의 단점들을 많이 커버할 것 같습니다.

Comparisons | Hydro (usehydro.dev)

보안 처리마저 간단하다면, 안 쓸 이유가 없을 것 같습니다.

근데, 이미 블레이저의 호스팅 모델의 꿀 맛을 본지라, 살짝 고민이 되긴 합니다.

추가
생각해보니, Hydor 는 미들웨어 베이스니까 당연히 다른 미들웨어, 특히 보안 미들웨어와 충돌이 없을 것 같기는 하네요.
Asp.Net Core 의 미들웨어의 유연성에 다시 한번 감탄합니다.
누가 설계했는지 참…

2 Likes

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, {&quot;name&quot;:&quot;Add&quot;})" 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="{&quot;name&quot;:&quot;HydroBind&quot;,&quot;path&quot;:&quot;/hydro/counter/event&quot;}"></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="{&quot;name&quot;:&quot;HydroBind&quot;,&quot;path&quot;:&quot;/hydro/counter/event&quot;}"></script>
</div>

Jquery Unobtrusive AJAX과 비교해보게 되네요.

2 Likes