Blazor는 .NET을 사용하여 인터랙티브 클라이언트 웹 UI를 구축하는 프레임워크입니다:
- 자바스크립트 대신 C#을 사용해 풍부하고 상호작용적인 UI를 만드세요.
- .NET으로 작성된 서버 측과 클라이언트 측 애플리케이션 로직을 공유하세요.
- UI를 HTML과 CSS로 렌더링하여 모바일 브라우저를 포함한 다양한 브라우저를 지원합니다.
블레이저는 WebAssembly 기반 .NET 런타임(블레이저 WebAssembly)에서 브라우저에서 클라이언트 사이드로 실행되도록 설계된 웹 프레임워크입니다. 또는 ASP.NET 코어의 서버 사이드(블레이저 서버)에서 실행되도록 설계되었습니다. 어떤 관리형 모델이든 앱과 컴포넌트 모델은 동일합니다.
블레이저 서버
Blazor 서버 호스팅 모델을 사용해 Core 앱에서 앱을 실행 ASP.NET.UI 업데이트, 이벤트 처리, JavaScript 호출은 다음과 같이 수행됩니다시그널R프로세스와의 연결。
Blazor 서버 호스팅 모델은 다음과 같은 이점을 제공합니다:
- 다운로드 용량은 Blazor WebAssembly 앱보다 훨씬 작고, 앱도 훨씬 빠르게 로드됩니다.
- 앱은 .NET Core 호환 API를 포함한 서버 기능을 최대한 활용할 수 있습니다.
- 서버의 .NET Core가 앱을 실행하는 데 사용되기 때문에, 기존의 .NET 도구인 디버깅도 정상적으로 작동합니다.
- 씬 클라이언트도 지원합니다. 예를 들어, Blazor 서버 앱은 WebAssembly를 지원하지 않는 브라우저와 자원이 제한된 기기에 적합합니다.
- 앱의 컴포넌트 코드를 포함하는 .NET/C# 코드베이스는 클라이언트에서 작동하지 않습니다.
블레이저 서버 호스팅에는 다음과 같은 단점이 있습니다:
지연 시간은 보통 더 높습니다. 모든 사용자 상호작용에는 네트워크 홉이 포함됩니다.
오프라인 작업은 지원되지 않습니다. 클라이언트 연결이 실패하면 앱이 작동을 멈춥니다.
여러 사용자가 있다면 앱 확장성에 어려움이 있습니다. 서버는 여러 클라이언트 연결을 관리하고 클라이언트 상태를 처리해야 합니다.
ASP.NET 코어 서버는 애플리케이션을 지원하기 위해 필요합니다. 서버리스 배포 시나리오는 현실적이지 않습니다(예: CDN을 통한 애플리케이션 서비스 등).
튜토리얼 시작:
1. 먼저, 아래와 같이 vs2019를 사용하여 새로운 Blazor App 프로젝트를 생성하세요:
2. 다음 코드로 새로운 Razor 컴포넌트를 생성합니다:
base64 캡차를 생성하고 nuget으로 설치하려면 SkiaSharp 패키지가 필요합니다:
3. 프로젝트 시작, 방문:하이퍼링크 로그인이 보입니다.
생성된 html 코드는 다음과 같습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<메타 이름="viewport" 콘텐츠="width=device-width, initial-scale=1.0" />
<title>블레이저 앱1</title>
<기본 href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<!--Blazor:{"sequence":0,"type":server","prerenderId":"19210eabb9054fe79ea7cc3e6f501df5","descriptor": "CfDJ8G8mpuBWCflCst2FMatPfBxQE\u002Br1dzwAAKPTr0QFhEikdvN38F\u002BP7DcVOKo\u002BPF9p1ZAgdir\u002BYdhFqRpzbwsqEap4xG3gpcMVtLX2yGCGhOnh596O6KcFICrjAZGk82Q2lVu\ u002B94jRo6qJ9JgxrjzuAOxLvrXBlFoGwTssxsHOI2qoQHGwlv\u002BA\u002BGsyaTjfxZ8DAgqAuiwaHynCg0J18d/VUh8brr9FrMe91kKCVw0OLUVRjCXK0FXGvXPYKjEIuE9FY5w3EvO17tJJ/ 9LpOKmqEeYpk6FlOPeuviBB1LhHBrzycchpZAb8eNGY51tN5Gjcqf/uNOMHZYLXoxjj6bmug/62JJvaQ62OrFNqIJw6S730"}-->
<div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> 홈
</a>
</li>
<li class="nav-item px-3">
<a href="counter" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> 카운터
</a>
</li>
<li class="nav-item px-3">
<A href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<div class="Content PX-4">
<h3>검증</h3>
<p>
(블레이저) 인증 코드를 보여주고 검증하는 방법에 대한 샘플입니다.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>갱신</button>
<hr>
<div>이미지에 숫자를 입력하세요</div>
<form>
<입력 유형="text" style="padding:5px" />
<button>체크</button>
</form>
<hr>
<button>테스트클릭</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
처리되지 않은 예외가 발생했습니다. 자세한 내용은 브라우저 개발 도구를 참조하세요.
<a href="" class="reload">Reload</a>
</div>
<스크립트 src="_framework/blazor.server.js"></script>
</body>
</html>
버튼을 클릭해 보세요. 버튼 이벤트 트리거는 SignalR을 통해 전달되며, 이는 웹소켓, 폴링 등을 기반으로 하며, 아래 그림에서 확인할 수 있습니다:
참고 링크:
하이퍼링크 로그인이 보입니다.
|
게시됨 2020. 4. 7. 오전 11:15:36
|
|
|
|
집주인|
게시됨 2020. 4. 7. 오전 11:45:47
|
게시됨 2022. 11. 15. 오전 10:51:42
|
