성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] 제가 큰 실수를 했군요. ^^; Delegate를 통한 Bein...
[정성태] Working with Rust Libraries from C#...
[정성태] Detecting blocking calls using asyn...
[정성태] 아쉽게도, 커뮤니티는 아니고 개인 블로그입니다. ^^
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
[정성태] "props[i].GetValue(props[i])" 코드에서 ...
[정성태] 저렇게 조각 코드 말고, 실제로 재현이 되는 예제 프로젝트를 압...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>.NET Conf 2023 - Day 1 Blazor 개요 정리</h1> <p> 아래의 동영상에서,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > .NET Conf 2023 - Day 1 ; <a target='tab' href='https://youtu.be/xEFO1sQ2bUc?t=5853'>https://youtu.be/xEFO1sQ2bUc?t=5853</a> </pre> <br /> 본 내용을 개인적인 흥미로 간략하게 정리한 것입니다.<br /> <br /> <hr style='width: 50%' /><br /> <br /> .NET 8의 Blazor는 기존의 "Server", "WebAssembly" 모드에 이어 새롭게 "Static SSR" 모드를 지원한다고 합니다. 이 모드의 특징은,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > * Scale (WebSocket을 사용하지 않으므로.) * Presenting Information * Navigation (links) * Forms </pre> <br /> 등이 가능하고,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > x Rich interactivity (all events handlers) x Real-time updates </pre> <br /> 가 불가능합니다. 대신 위의 2가지 사항에 대해서는 부가적으로 기존의 Server, WebAssembly 모드를 섞어 해결할 수 있습니다.<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='net8_blazor_overview_1.png' src='/SysWebRes/bbs/net8_blazor_overview_1.png' /><br /> <br /> 설정도 단순히, @rendermode를 통해 가능합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > @rendermode InteractiveServer // by WebSocket @rendermode InteractiveWebAssembly @rendermode InteractiveAuto </pre> <br /> 그리고, 아래와 같은 특징의 "Streaming SSR" 모드를 지원하고,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Skip waiting for database/API calls * Fast initial UI render/update * Begin loading static resources in parallel ! Requires UI design to make sense * Use when data loading is likely to take multiple seconds </pre> <br /> 코드에서는 간략하게 "@attribute [StreamRendering]"를 추가하는 것으로 그 효과를 볼 수 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > @page "/timercounter" @attribute [StreamRendering] <p> The count is: @count </p> @code { int count; protected override async Task OnInitializedAsync() { for (var i = 0; i < 5; i ++) { await Task.Dealy(1000); count ++; StateHasChanged(); // Only needed to show intermediate states } } } </pre> <br /> <hr style='width: 50%' /><br /> <br /> "Enhanced navigation"과 함께,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Get SPA-like responsiveness without needing a SPA * Faster page loads with fewer HTTP requests * Retain most DOM elements * Enable/disable on any DOM subtree * On by default ! Consider disabling to reset JS state or navigating to non-Blazor pages </pre> <br /> "Static SSR Forms"도 추가되었고,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Accept and validate input on static SSR pages * All capabilities of <form> or EditForm * @onsubmit handlers * anti-forgery protection (CSRF) * server-side validation * Same APIs as for interactive components * Supports enhance and works with streaming SSR </pre> <br /> Interactive components도 제공합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Get full Blazor interactivity, arbitrary events, and real-time updates * Mark any page/components as Server/WebAssembly/both * Works with enhanced navigation / forms * Retain interactive state while navigating or refreshing static SSR content * Closes/reopens server circuit automatically ! Requires WebSocket connection or WebAssembly payload </pre> <br /> 마지막으로, 웹 소켓을 요구하는 "Server"와 "WebAssembly" 간에 고민을 해결할 수 있는 "Auto mode"가 나왔습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Use WebAssembly without the first-download cost * Uses Server while caching WebAssembly files * ... then uses WebAssembly on the next visit ! Components must support WebAssembly * Must be in Client project and use API endpoints for data </pre> <br /> <hr style='width: 50%' /><br /> <br /> 기존 응용 프로그램 방식을 Blazor로 옮기는 경우 다음과 같이 대응할 수 있습니다.<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='net8_blazor_overview_2.png' src='/SysWebRes/bbs/net8_blazor_overview_2.png' /><br /> <br /> 최종 기능 정리는 이렇게!<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='net8_blazor_overview_3.png' src='/SysWebRes/bbs/net8_blazor_overview_3.png' /><br /> <br /> 개인적으로, blazor를 거의 사용해 본 적이 없지만 처음 blazor를 접했던 2018년보다 확실히 많은 진전이 있음을 체감할 수 있었습니다.<br /> <br /> 흥미 있으신 분은 다음의 사이트에서. ^^<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Build beautiful web apps with Blazor ; <a target='tab' href='https://blazor.net'>https://blazor.net</a> </pre> </p><br /> <br /><hr /><span style='color: Maroon'>[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
1768
(왼쪽의 숫자를 입력해야 합니다.)