Microsoft MVP성태의 닷넷 이야기
닷넷: 2161. .NET Conf 2023 - Day 1 Blazor 개요 정리 [링크 복사], [링크+제목 복사],
조회: 10791
글쓴 사람
정성태 (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

비밀번호

댓글 작성자
 




... 121  122  123  124  125  126  127  128  129  130  131  [132]  133  134  135  ...
NoWriterDateCnt.TitleFile(s)
1755정성태9/22/201434197오류 유형: 241. Unity Web Player를 설치해도 여전히 설치하라는 화면이 나오는 경우 [4]
1754정성태9/22/201424527VC++: 80. 내 컴퓨터에서 C++ AMP 코드가 실행이 될까요? [1]
1753정성태9/22/201420544오류 유형: 240. Lync로 세미나 참여 시 소리만 들리지 않는 경우 [1]
1752정성태9/21/201440999Windows: 100. 윈도우 8 - RDP 연결을 이용해 VNC처럼 사용자 로그온 화면을 공유하는 방법 [5]
1751정성태9/20/201438891.NET Framework: 464. 프로세스 간 통신 시 소켓 필요 없이 간단하게 Pipe를 열어 통신하는 방법 [1]파일 다운로드1
1750정성태9/20/201423807.NET Framework: 463. PInvoke 호출을 이용한 비동기 파일 작업파일 다운로드1
1749정성태9/20/201423718.NET Framework: 462. 커널 객체를 위한 null DACL 생성 방법파일 다운로드1
1748정성태9/19/201425357개발 환경 구성: 238. [Synergy] 여러 컴퓨터에서 키보드, 마우스 공유
1747정성태9/19/201428362오류 유형: 239. psexec 실행 오류 - The system cannot find the file specified.
1746정성태9/18/201426005.NET Framework: 461. .NET EXE 파일을 닷넷 프레임워크 버전에 상관없이 실행할 수 있을까요? - 두 번째 이야기 [6]파일 다운로드1
1745정성태9/17/201422965개발 환경 구성: 237. 리눅스 Integration Services 버전 업그레이드 하는 방법 [1]
1744정성태9/17/201430980.NET Framework: 460. GetTickCount / GetTickCount64와 0x7FFE0000 주솟값 [4]파일 다운로드1
1743정성태9/16/201420937오류 유형: 238. 설치 오류 - Failed to get size of pseudo bundle
1742정성태8/27/201426918개발 환경 구성: 236. Hyper-V에 설치한 리눅스 VM의 VHD 크기 늘리는 방법 [2]
1741정성태8/26/201421296.NET Framework: 459. GetModuleHandleEx로 알아보는 .NET 메서드의 DLL 모듈 관계파일 다운로드1
1740정성태8/25/201432464.NET Framework: 458. 닷넷 GC가 순환 참조를 해제할 수 있을까요? [2]파일 다운로드1
1739정성태8/24/201426467.NET Framework: 457. 교착상태(Dead-lock) 해결 방법 - Lock Leveling [2]파일 다운로드1
1738정성태8/23/201422000.NET Framework: 456. C# - CAS를 이용한 Lock 래퍼 클래스파일 다운로드1
1737정성태8/20/201419690VS.NET IDE: 93. Visual Studio 2013 동기화 문제
1736정성태8/19/201425536VC++: 79. [부연] CAS Lock 알고리즘은 과연 빠른가? [2]파일 다운로드1
1735정성태8/19/201418130.NET Framework: 455. 닷넷 사용자 정의 예외 클래스의 최소 구현 코드 - 두 번째 이야기
1734정성태8/13/201419780오류 유형: 237. Windows Media Player cannot access the file. The file might be in use, you might not have access to the computer where the file is stored, or your proxy settings might not be correct.
1733정성태8/13/201426259.NET Framework: 454. EmptyWorkingSet Win32 API를 사용하는 C# 예제파일 다운로드1
1732정성태8/13/201434395Windows: 99. INetCache 폴더가 다르게 보이는 이유
1731정성태8/11/201426973개발 환경 구성: 235. 점(.)으로 시작하는 파일명을 탐색기에서 만드는 방법
1730정성태8/11/201422077개발 환경 구성: 234. Royal TS의 터미널(Terminal) 연결에서 한글이 깨지는 현상 해결 방법
... 121  122  123  124  125  126  127  128  129  130  131  [132]  133  134  135  ...