Microsoft MVP성태의 닷넷 이야기
닷넷: 2161. .NET Conf 2023 - Day 1 Blazor 개요 정리 [링크 복사], [링크+제목 복사],
조회: 2994
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일
 

(시리즈 글이 5개 있습니다.)
닷넷: 2161. .NET Conf 2023 - Day 1 Blazor 개요 정리
; https://www.sysnet.pe.kr/2/0/13446

닷넷: 2163. .NET 8 - Dynamic PGO를 결합한 성능 향상
; https://www.sysnet.pe.kr/2/0/13448

닷넷: 2178. C# - .NET 8부터 COM Interop에 대한 자동 소스 코드 생성 도입
; https://www.sysnet.pe.kr/2/0/13470

닷넷: 2180. .NET 8 - 함수 포인터에 대한 Reflection 정보 조회
; https://www.sysnet.pe.kr/2/0/13475

닷넷: 2181. C# - .NET 8 JsonStringEnumConverter의 AOT를 위한 개선
; https://www.sysnet.pe.kr/2/0/13476




.NET Conf 2023 - Day 1 Blazor 개요 정리

아래의 동영상에서,

.NET Conf 2023 - Day 1
; https://youtu.be/xEFO1sQ2bUc?t=5853

본 내용을 개인적인 흥미로 간략하게 정리한 것입니다.




.NET 8의 Blazor는 기존의 "Server", "WebAssembly" 모드에 이어 새롭게 "Static SSR" 모드를 지원한다고 합니다. 이 모드의 특징은,

* Scale (WebSocket을 사용하지 않으므로.)
* Presenting Information
* Navigation (links)
* Forms

등이 가능하고,

x Rich interactivity (all events handlers)
x Real-time updates

가 불가능합니다. 대신 위의 2가지 사항에 대해서는 부가적으로 기존의 Server, WebAssembly 모드를 섞어 해결할 수 있습니다.

net8_blazor_overview_1.png

설정도 단순히, @rendermode를 통해 가능합니다.

@rendermode InteractiveServer // by WebSocket
@rendermode InteractiveWebAssembly
@rendermode InteractiveAuto

그리고, 아래와 같은 특징의 "Streaming SSR" 모드를 지원하고,

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

코드에서는 간략하게 "@attribute [StreamRendering]"를 추가하는 것으로 그 효과를 볼 수 있습니다.

@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
        }
    }
}




"Enhanced navigation"과 함께,

 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

"Static SSR Forms"도 추가되었고,

Accept and validate input on static SSR pages

* All capabilities of  or EditForm
   * @onsubmit handlers
   * anti-forgery protection (CSRF)
   * server-side validation

* Same APIs as for interactive components
* Supports enhance and works with streaming SSR

Interactive components도 제공합니다.

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

마지막으로, 웹 소켓을 요구하는 "Server"와 "WebAssembly" 간에 고민을 해결할 수 있는 "Auto mode"가 나왔습니다.

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




기존 응용 프로그램 방식을 Blazor로 옮기는 경우 다음과 같이 대응할 수 있습니다.

net8_blazor_overview_2.png

최종 기능 정리는 이렇게!

net8_blazor_overview_3.png

개인적으로, blazor를 거의 사용해 본 적이 없지만 처음 blazor를 접했던 2018년보다 확실히 많은 진전이 있음을 체감할 수 있었습니다.

흥미 있으신 분은 다음의 사이트에서. ^^

Build beautiful web apps with Blazor
; https://blazor.net




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]







[최초 등록일: ]
[최종 수정일: 11/16/2023]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 




... 31  32  33  34  35  36  37  38  [39]  40  41  42  43  44  45  ...
NoWriterDateCnt.TitleFile(s)
12674정성태6/15/20218767VC++: 142. DEFINE_GUID 사용법
12673정성태6/15/20219894Java: 19. IntelliJ - 자바(Java)로 만드는 Web App을 Tomcat에서 실행하는 방법
12672정성태6/15/202111026오류 유형: 725. IntelliJ에서 Java webapp 실행 시 "Address localhost:1099 is already in use" 오류
12671정성태6/15/202117825오류 유형: 724. Tomcat 실행 시 Failed to initialize connector [Connector[HTTP/1.1-8080]] 오류
12670정성태6/13/20219245.NET Framework: 1071. DLL Surrogate를 이용한 Out-of-process COM 개체에서의 CoInitializeSecurity 문제파일 다운로드1
12669정성태6/11/20219314.NET Framework: 1070. 사용자 정의 GetHashCode 메서드 구현은 C# 9.0의 record 또는 리팩터링에 맡기세요.
12668정성태6/11/202111000.NET Framework: 1069. C# - DLL Surrogate를 이용한 Out-of-process COM 개체 제작파일 다운로드2
12667정성태6/10/20219630.NET Framework: 1068. COM+ 서버 응용 프로그램을 이용해 CoInitializeSecurity 제약 해결파일 다운로드1
12666정성태6/10/20218184.NET Framework: 1067. 별도 DLL에 포함된 타입을 STAThread Main 메서드에서 사용하는 경우 CoInitializeSecurity 자동 호출파일 다운로드1
12665정성태6/9/20219511.NET Framework: 1066. Wslhub.Sdk 사용으로 알아보는 CoInitializeSecurity 사용 제약파일 다운로드1
12664정성태6/9/20217914오류 유형: 723. COM+ PIA 참조 시 "This operation failed because the QueryInterface call on the COM component" 오류
12663정성태6/9/20219487.NET Framework: 1065. Windows Forms - 속성 창의 디자인 설정 지원: 문자열 목록 내에서 항목을 선택하는 TypeConverter 제작파일 다운로드1
12662정성태6/8/20218510.NET Framework: 1064. C# COM 개체를 PIA(Primary Interop Assembly)로써 "Embed Interop Types" 참조하는 방법파일 다운로드1
12661정성태6/4/202119233.NET Framework: 1063. C# - MQTT를 이용한 클라이언트/서버(Broker) 통신 예제 [4]파일 다운로드1
12660정성태6/3/202110280.NET Framework: 1062. Windows Forms - 폼 내에서 발생하는 마우스 이벤트를 자식 컨트롤 영역에 상관없이 수신하는 방법 [1]파일 다운로드1
12659정성태6/2/202111487Linux: 40. 우분투 설치 후 MBR 디스크 드라이브 여유 공간이 인식되지 않은 경우 - Logical Volume Management
12658정성태6/2/20218914Windows: 194. Microsoft Store에 있는 구글의 공식 Youtube App
12657정성태6/2/202110230Windows: 193. 윈도우 패키지 관리자 - winget 설치
12656정성태6/1/20218492.NET Framework: 1061. 서버 유형의 COM+에 적용할 수 없는 Server GC
12655정성태6/1/20217942오류 유형: 722. windbg/sos - savemodule - Fail to read memory
12654정성태5/31/20217936오류 유형: 721. Hyper-V - Saved 상태의 VM을 시작 시 오류 발생
12653정성태5/31/202110635.NET Framework: 1060. 닷넷 GC에 새롭게 구현되는 DPAD(Dynamic Promotion And Demotion for GC)
12652정성태5/31/20218753VS.NET IDE: 164. Visual Studio - Web Deploy로 Publish 시 암호창이 매번 뜨는 문제
12651정성태5/31/20218969오류 유형: 720. PostgreSQL - ERROR: 22P02: malformed array literal: "..."
12650정성태5/17/20218284기타: 82. OpenTabletDriver의 버튼에 더블 클릭을 매핑 및 게임에서의 지원 방법
12649정성태5/16/20219622.NET Framework: 1059. 세대 별 GC(Garbage Collection) 방식에서 Card table의 사용 의미 [1]
... 31  32  33  34  35  36  37  38  [39]  40  41  42  43  44  45  ...