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

📤 정보 공유
1

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

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

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

6 Likes
2

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

1 Like
3

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

Comparisons | Hydro (usehydro.dev)

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

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

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

3 Likes
4

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과 비교해보게 되네요.

3 Likes
5

hydro로 웹앱을 처리중인데, 생각보다 편리(?)하고 좋은 것 같습니다. 일단, 클라이언트부분에서 자바스크립트를 사용하지 않아도 되어서 좋네요. 물론, 그 부분에 눈에 보이지 않게 alpinejs가 사용됩니다.

그리고, 전에는 Model등을 Header로 전송했는데 Header에는 제약사항이 있으니 Body로 전송하면 좋겠다고 이슈등록했더니 개발자분께서 빠르게 업데이트 해주시네요.

hydro를 이용한 샘플앱중 GitHub - hydrostack/hydro-sales 이 여러가지 기능을 살펴볼 가장 좋은 샘플인것 같습니다. 웹앱 구현에 참조할 부분도 많았습니다.

hydro-sales앱에 https://taghelperpack.net/ 을 이용되는데 좋은 것 같아 링크 남겨봅니다. 아래 링크가 taghelperpack을 이용한 템플릿부분입니다.

4 Likes