IT＆개발 정보 당신이 아마 알지 못했던 Blazor 기능 10가지
페이지 정보
작성자 GrapeCity
작성일 2021-08-11 13:36 조회 6,734회
댓글 0건
본문
관련링크
Blazor는 비교적 신생 기술이지만 2018년 출시 이후 놀라운 기세를 이어가고 있습니다. 원래 실험적인 프로젝트였던 Blazor가 이제는 .NET 5의 일부로 제공되며 많은 개발자들이 사용하고 있습니다.
.NET 개발자에게 가장 매력적인 점은 C#처럼 개발자가 선호하는 언어를 사용하여 단일 페이지 응용 프로그램을 작성하고 기존 .NET 라이브러리 및 프레임워크를 재사용할 수 있다는 점입니다. 대부분의 최신 웹 기술과 마찬가지로 Blazor도 빠르게 발전하고 있습니다. 개발자는 몇 개월마다 새로운 기능이 포함된 프리뷰를 공개합니다.
초기 버전의 Blazor를 사용했다면 지금은 존재하지 않는 문제와 제한 사항에 부딪혔을 수 있습니다. Blazor는 ASP.NET Core와 긴밀하게 통합되고 브라우저의 보안 샌드박스에 의해 제한되지 않는 모든 주요 .NET API를 지원하며 JavaScript와의 양방향 통합을 제공합니다. 이러한 기능을 통해 엔터프라이즈 웹 응용 프로그램을 빌드할 수 있습니다.
Blazor 사용에 대해 여전히 의구심이 든다면 계속 읽어보세요. 여기 당신이 원하는 Blazor의 10가지 주요 기능이 있습니다.
.NET 5 및 C# 9
Blazor는 .NET의 일부로 제공되며 모든 관련 API를 지원합니다. 파일 I/O와 같은 일부 API는 로컬 파일 시스템에 대한 액세스 제한으로 인해 브라우저 컨텍스트에서 사용할 수 없습니다.
Blazor는 최신 C# 언어 버전 9.0도 지원합니다. 최신 언어 생성자를 사용하면 코드의 간결성과 가독성이 향상될 뿐만 아니라 실제로 성능도 향상될 수 있습니다! 다음은 Blazor 응용 프로그램에서 사용할 수 있는 몇 가지 유용한 C# 9.0 기능에 대한 간략한 설명입니다.
간소화된 개체 초기화 기능으로 키 입력을 저장할 수 있다는 사실을 알고 계셨나요? 새 인스턴스를 만들 때 더 이상 클래스를 다시 선언할 필요가 없습니다.
다음 중복 코드를
Person person = new Person();
다음과 같이 단순화합니다.
Person person = new ();
새로운 switch 식을 사용하여 로직을 단순화하십시오.
다음과 같은 코드를,
public int DoMath(int a, int b, Operator op)
{
switch(op)
{
case Operator.Add:
return a + b;
case Operator.Sub:
return a - b;
case Operator.Mult:
return a * b;
default:
return a / b;
}
}이제 좀 더 간결하게 표현할 수 있습니다.
public int DoBetterMath(int a, int b, Operator op) =>
op switch
{
Operator.Add => a + b,
Operator.Sub => a - b,
Operator.Mult => a * b,
_ => a / b
};새로운 뿐만 아니라 배열 및 문자열 조작을 위해 빠른 SpanT를 사용할 수도 있음을 잊지 마십시오.
Markdown
Markdown은 HTML 대신 널리 사용되는 가벼운 웹 기반 문서를 작성합니다. 구문이 단순하기 때문에 중첩된 태그나 특수 컨트롤에 대한 걱정 없이 쉽게 작성할 수 있습니다.
GitHub와 같은 리포지토리와 대부분의 블로그 엔진 및 CMS(콘텐츠 관리 시스템)는 Markdown을 지원합니다. 브라우저에는 기본 Markdown 지원이 없으며 HTML로 렌더링된 후에만 표시할 수 있습니다. 다양한 오픈 소스 라이브러리 형식, 구문 분석, 유효성 검사 및 변환 markdown입니다.
Blazor에서 markdown 편집기를 빌드하는 것은 기존 .NET 라이브러리를 지원하기 때문에 매우 쉽습니다. 아래 그림은 몇 분이면 만들 수 있는 간단한 Blazor WebAssembly 마크다운 편집기입니다.
직접 확인하려면 새 Blazor WebAssembly 프로젝트를 만들어보세요.
잘 모르겠다면 을 확인하세요.
그런 다음 패키지에 대한 참조를 추가합니다. 다음 행을 포함하도록 인덱스 페이지를 업데이트합니다.
<div class="row">
<div class="col-6">
<textarea
@bind-value="@MarkdownText"
@bind-value:event="oninput"
rows="20"
cols="80">
</textarea>
</div>
<div class="col-6">
<textarea
@bind-value="@Html"
@bind-value:event="oninput"
rows="20"
cols="80">
</textarea>
</div>
</div>에서 다음과 같은 속성을 구현합니다.
private string markdown;
public string MarkdownText
{
get => markdown;
set
{
if (value != markdown)
{
markdown = value;
OnMarkdownChanged();
}
}
}
public string Html { get; set; }변환은 다음과 같이 간단합니다.
private void OnMarkdownChanged() => Html = Markdown.ToHtml(markdown);
이제 입력할 때 HTML을 새로 고치는 실시간 마크다운 편집기가 생겼습니다.
gRPC
널리 사용되는 새로운 gRPC 프레임워크는 끝점 간 고성능 통신을 제공합니다. 단일 연결을 통해 병렬 요청을 허용하는 최신 HTTP/2 프로토콜을 사용합니다. 페이로드는 압축 바이너리 형식이므로 일반적으로 기존의 REST나 WCF SOAP 기반 구현보다 네트워크 사용 공간이 훨씬 작습니다.
이 에 따르면 gRPC는 JSON 직렬화보다 최대 8배 빠르며 동급 REST 서비스보다 페이로드가 60~80% 더 작습니다. gRPC는 .NET Core 및 .NET Core(Kestrel)와 함께 제공되고 HTTP/2를 지원하는 기본 경량 웹 서버에 내장되어 있습니다.
브라우저 제한으로 인해 HTTP/2 통신을 제어하는 API가 없기 때문에 표준 gRPC 브라우저 클라이언트를 구현할 수 없습니다. 이라는 오픈 소스 프로젝트는 브라우저에서 작동하는 확장 프로그램을 제공하고 두 구현의 요청을 처리하는 프록시를 포함하므로 Blazor WebAssembly 응용 프로그램에서 gRPC를 사용할 수 있습니다.
필수 패키지를 설치하고 구성한 후 gRPC 호출이 REST 기반 요청과 거의 동일하게 표시됩니다. 다음은 호출의 예입니다.
forecasts = await WeatherForecastsClient.GetWeatherAsync(new WeatherForecast()).Forecasts;
gRPC를 사용하려면 모든 API에 사용자 정의 입력 및 사용자 정의 출력이 있어야 합니다. 위의 예에서 사용자 정의 입력 WeatherForecast는 예보에 대한 요청을 나타내고 응답에는 Forecast 속성 페이로드가 포함됩니다.
블로그 게시물 에서 전체 엔드 투 엔드 예제를 볼 수 있습니다.
오픈 소스 프로젝트는 인터페이스 집합에서 필요한 모든 gRPC 인프라를 생성합니다. 작동하는 "grWizard"를 보려면 를 확인하세요.
GraphQL
GraphQL은 최신 웹 응용 프로그램에서 기존의 REST를 빠르게 대체하는 또 다른 인기 프로토콜입니다. Facebook은 사용자 인터페이스 성능을 개선하기 위해 이를 만들었으며 특히 프론트엔드 클라이언트와의 통신을 간소화하기 위해 설계했습니다. Facebook은 gRPC와 같은 프로세스 간 통신을 의도하지 않았습니다.
GraphQL은 강력한 유형의 스키마, 간편한 검색 기능 및 단일 요청을 다중 백엔드에서 응답을 집계할 수 있는 것으로 유명합니다. 가장 많이 사용되는 기능을 통해 클라이언트는 특별히 필요한 데이터만 수신하도록 응답 형태를 정의하고 오버페치를 방지할 수 있습니다.
연락처 정보가 포함된 데이터 집합을 고려하십시오. 이름만 반환하는 자동 완성 검색 상자를 구현하려면 다음과 같이 요청할 수 있습니다.
{
contact(filter: 'likness') {
lastname,
firstname
}
}요청은 이름만 반환합니다. 다른 컴포넌트에서는 더 많은 데이터를 표시하고 다음과 같이 요청을 구체화할 수 있습니다.
{
contact(filter: 'likness') {
lastname,
phone,
address {
street,
zipCode
}
}
}.NET용으로 인기 있는 GraphQL 라이브러리에는 과 이 있습니다.
Blazor WebAssembly 응용 프로그램과 함께 작동하는 GraphQL을 보려면 가이드를 따르세요. HotChocolate(서버의 GraphQL)과 함께 제공되는 Strawberry Shake는 .NET GraphQL 클라이언트 프록시를 만들어 강력한 형식의 페이로드가 있는 끝점을 사용합니다.
EF Core 및 Azure Cosmos DB
(EF Core)는 개발자가 도메인 개체와 일관되고 강력한 형식의 데이터 액세스 API를 사용하여 데이터 지속성을 관리할 수 있도록 지원하는 개체-데이터베이스 매퍼입니다. SQL Server, MySQL, PostgreSQL, SQLite 및 Azure Cosmos DB를 포함한 다양한 데이터베이스를 지원합니다. EF Core는 크로스 플랫폼이고 .NET 5를 대상으로 하므로 Blazor 프로젝트와 완벽하게 호환됩니다.
주의 사항은 브라우저의 보안 샌드박스입니다. 대부분의 데이터베이스는 브라우저가 지원하지 않는 비표준 포트를 통해 비표준 프로토콜을 사용합니다. Azure Cosmos DB는 HTTPS를 통해 API에 직접 액세스할 수 있는 옵션을 제공하기 때문에 예외입니다.
는 브라우저에서 실행되는 클라이언트에서 직접 데이터베이스에 액세스할 수 있습니다. 그러나 여기에는 제약 조건이 있습니다. 클라이언트에 자격 증명, 심지어 암호화된 자격 증명을 저장하는 것은 나쁜 관행입니다. 클라이언트에 액세스 권한이 있고 정보가 데이터베이스를 활짝 열어둘 수 있다고 가정해야 합니다.
액세스를 보호하려면 와 같은 공급자를 통해 사용자 ID를 보호하세요. 그러면 비밀 키를 사용하는 대신 보안 제약 조건이 있는 Azure Cosmos DB 리소스 토큰을 요청할 수 있습니다.
자세한 내용은 를 참조하세요.
점진적 웹 응용 프로그램
모든 기기에서 작동하는 응용 프로그램을 제공하고 기본 환경을 제공하는 것은 어려운 일입니다. PWA(점진적 웹 응용 프로그램)는 "세계 최고"의 솔루션을 제공합니다.
서비스 워커라는 특수한 브라우저 기반 기능을 사용하여 PWA를 통해 웹 응용 프로그램을 연결이 끊어진 상태로 활성화 할 수 있습니다. 이러한 응용 프로그램을 휴대폰, 데스크톱 또는 태블릿에 일반 응용 프로그램과 똑같이 설치합니다. 이 코드는 활성 연결을 사용할 수 없을 때 로컬 저장소에서 페이지를 전달합니다. 또한 푸시 알림을 지원하므로 사용자는 중요한 이벤트를 놓치지 않습니다.
Blazor WebAssembly 응용 프로그램 템플릿에는 PWA를 활성화하는 체크박스가 있습니다. 명령줄에서 다음과 같이 --pwa 스위치를 사용하기만 하면 됩니다.
dotnet new blazorwasm --pwa -o pwa
새 프로젝트를 생성하면 wwwroot 아래에 특정 파일이 표시됩니다.
manifest.json은 응용 프로그램과 설치 시 사용할 다양한 아이콘의 위치를 설명하는 특수 구성 파일입니다.
여러 아이콘이 템플릿과 함께 제공됩니다.
service-worker.published.js 스크립트에는 오프라인 모드를 활성화하는 특수 코드가 포함되어 있습니다.
기본 PWA 응용 프로그램은 사용자가 사이트를 탐색할 때 페이지를 로컬 스토리지에 저장합니다. 필수 페이지를 사전 설치하고 브라우저의 페이지 가져오기 메커니즘을 인터셉트합니다. 인터셉션 코드는 사용자가 오프라인일 때 캐시에서 페이지를 로드하고 사용자가 온라인일 때 캐시를 새로 고칩니다. 응용 프로그램을 실행할 때 최신 브라우저는 설치 옵션을 제공합니다.
아래 그림은 Microsoft Edge의 아이콘과 작동을 보여줍니다.
PWA 응용 프로그램을 설치하면 응용 프로그램 추가되어 실행 아이콘이 표시되며, 아래 그림과 같은 chromeless 창에서 실행됩니다.
응용 프로그램에 이동 및 크기 조정이 가능한 자체적인 창이 있지만 이는 PWA 실행 전용 웹 브라우저 버전입니다.
CSS 분리
최신 Blazor 릴리스에는 CSS 분리 기능이 있습니다. Angular, React와 같은 단일 페이지 응용 프로그램 프레임워크는 이 강력한 기능을 많이 사용합니다.
전체 응용 프로그램에 대해 하나의 거대한 CSS 라이브러리를 관리하는 대신, CSS 분리를 통해 각 컴포넌트의 스타일을 개별적으로 지정할 수 있습니다. 각 컴포넌트 유형에 대해 고유한 이름을 지정할 필요가 없습니다. "컴포넌트 A"에 대한 제목 요소의 스타일을 지정하면 해당 컴포넌트에만 적용되고 "컴포넌트 B"와 충돌하지 않습니다.
기본 Blazor 프로젝트 템플릿은 CSS 분리의 예제를 생성합니다. 컴포넌트와 분리된 스타일시트를 만들려면 확장자가 .css인 컴포넌트와 동일한 이름의 파일을 생성하기만 하면 됩니다. 기본 Blazor 템플릿의 MainLayout.razor에는 MainLayout.razor.css.라는 관련 파일이 있습니다. 해당 파일에 정의된 스타일은 기본 레이아웃 컴포넌트에만 적용됩니다.
작동 방법을 확인하려면 응용 프로그램을 실행할 때 규칙이 appname.styles.css.인 파일을 참조합니다. 아래 그림은 "pwa"라는 응용 프로그램의 네트워크 호출을 검토한 결과를 보여줍니다.
파일을 열면 다음 코드 조각이 표시됩니다.
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-o6yozaou6y] {
position: relative;
display: flex;
flex-direction: column;
}
.main[b-o6yozaou6y] {
flex: 1;
}이제 스타일에는 다른 컴포넌트와의 충돌을 방지하기 위한 고유한 접미사가 있습니다. 전체 CSS 분리에 대한 세부정보는 를 보세요.
가상화
비즈니스 응용 프로그램은 일반적으로 대용량 데이터 목록을 처리합니다. 페이징이 항상 옵션이나 최적의 솔루션은 아니지만, 목록이 크면 목록 컴포넌트를 렌더링하는 오버헤드로 인해 성능이 저하될 수 있습니다. 반면 사용자는 주어진 시간에 데이터의 부분 집합만 사용합니다. 목록에 수십만 개의 요소가 포함되어 있더라도 응용 프로그램은 한 번에 수십 개의 요소만 표시합니다.
가상화는 이를 활용하여 눈에 보이는 컴포넌트만 렌더링합니다. 500,000개 요소 목록의 경우 응용 프로그램은 50개의 요소만 렌더링합니다. 사용자가 목록을 스크롤하고 다른 요소가 표시되면 응용 프로그램에서 이를 렌더링합니다. 전체 처리 시간은 동일하지만 항목이 스크롤될 때까지 렌더링을 지연하면 사용자가 향상된 성능을 느낄 수 있습니다.
Blazor 응용 프로그램에서는 가상화 구현이 매우 쉽습니다. 식품 항목 목록을 표시하는 FoodItem 컴포넌트를 고려해 보십시오. 일반적인 목록은 다음과 같이 렌더링될 수 있습니다(Blazor가 목록 항목을 추적하는 데 도움이 되는 @key 특성 사용 주의).
<div style="height:500px;overflow-y:scroll">
@foreach (var foodItem in foods)
{
<FoodItem @key="foodItem.Id" Item=”@foodItem” />
}
</div>이 컴포넌트를 가상화하여 응용 프로그램이 보기 항목만 렌더링하도록 하려면 Virtualize 컴포넌트에서 목록을 래핑하기만 하면 됩니다.
<div style="height:500px;overflow-y:scroll">
<Virtualize Items="@foods">
<FoodItem @key="context.Id" Item="@context" />
</Virtualize>
</div>일부 가상화 지침은 컴포넌트의 크기를 조정하는 방법과 관련이 있습니다. 스트리밍에 대한 항목을 제공할 대리인을 지정할 수도 있습니다. 가상화에 대해 자세히 알아보려면 를 읽어보세요.
서버 측 사전 렌더링
단일 페이지 응용 프로그램의 일반적인 문제는 웹 페이지 제공과 데이터 렌더링 사이의 지연입니다. 페이지 템플릿이 먼저 로드된 다음 데이터를 가져오고 렌더링하는 비동기 작업이 이어져야 합니다. 이로 인해 사용자 경험이 저하될 수 있습니다.
서버 측 사전 렌더링은 서버의 DOM(가상 문서 개체 모델)에서 페이지를 생성한 다음 이를 정적 콘텐츠로 전달하여 이 문제를 해결합니다. 그러면 클라이언트 응용 프로그램이 대신합니다. 이는 최종 사용자에게 원활한 경험을 제공합니다. 사전 렌더링은 검색 엔진이 인덱싱할 콘텐츠를 제공하여 웹 사이트의 SEO(검색 엔진 최적화)를 개선할 수도 있습니다.
사전 렌더링이 작동하려면 응용 프로그램이 호스트되어야 합니다. 정적 웹 사이트에는 사전 렌더링할 수 있는 서버 기능이 없습니다. ASP.NET Core 호스트된 응용 프로그램은 Blazor WebAssembly를 호스트하여 첫 번째 로드 시 구성요소의 첫 번째 페이지를 렌더링할 수 있습니다. 문서에 구성 단계가 자세히 설명되어 있습니다.
HTTP 요청에 대한 응답으로 런타임 시 사전 렌더링으로 설정할 필요가 없습니다. 응용 프로그램은 빌드 프로세스의 일부로 미리 렌더링하여 초기 웹 사이트 상태를 나타내는 정적 자산 집합을 제공할 수 있습니다. 이 접근 방식에 대한 자세한 정보는 를 읽어보세요.
Hot Reload
가장 인기 있는 새로운 Blazor 기능 중 하나는 Hot Reload입니다. 웹 개발은 반복적일 수 있으며, 생산성은 점진적인 변화의 결과를 최대한 빨리 확인하는 것에 달려 있습니다. .NET 팀은 이 기능을 구현했을 뿐만 아니라 매우 빠르게 만들었습니다. 이전 버전에서 Reload를 사용한 적이 있다면 업데이트된 Reload를 직접 확인해야만 하므로 기대를 하지 않는 것이 좋습니다.
새로운 Hot Reload 기능은 .NET 6 미리 보기 3에서 사용할 수 있습니다. 성능 향상을 위하여 해당 .NET 버전을 다운로드하여 설치하십시오.
.NET 5의 기능을 사용하려면 전체 응용 프로그램을 다시 컴파일하고 다시 로드해야 하므로 훨씬 느립니다. 사용:
dotnet --version
실행하면 다음이 표시됩니다.
6.0.100-preview.3.21202.5
Hot Reload가 작동하는 모습을 봅시다. HotReload라는 새 Blazor 프로젝트를 만들기:
dotnet new blazorwasm -o HotReload
디렉터리로 이동:
cd HotReload
VS(Visual Studio) 또는 Visual Studio Code 등의 즐겨 사용하는 편집기에서 프로젝트를 엽니다(Visual Studio를 사용하는 경우 v16.9 이상을 사용해야 합니다).
속성에서 launchSettings.json 파일을 찾아 엽니다.
선택한 웹 서버(기본값은 IIS Express 또는 응용 프로그램 이름)에서 blazorwasm 값을 사용하여 hotReloadProfile 속성을 추가합니다. 이는 다음과 같습니다.
{
"iisSettings": {
// cutting this out for brevity
},
"profiles": {
"IIS Express": {
// ignore this for now
},
"hotreload": {
"hotReloadProfile" : "blazorwasm",
"commandName": "Project",
"dotnetRunMessages": "true",
"launchBrowser": true,
// etc. etc.
}
}
}변경 사항을 저장합니다. 명령줄에서 새로운 watch 명령을 사용하여 실행한 다음 표준 실행 명령을 사용합니다.
dotnet watch -- run
올바르게 설정했다면 첫 번째 메시지에 Hot Reload가 활성화되어 있다는 내용이 표시되어야 합니다. 응용 프로그램이 실행되는 동안 선호하는 IDE(통합 개발 환경)에서 프로젝트를 열거나 메모장을 사용하여 페이지를 엽니다.
페이지로 이동한 다음 Index.razor로 이동하여 "Hello, world!"를 "Hello, live refresh!"로 변경하고 저장합니다. 응용 프로그램이 다시 시작되고 새 콘텐츠가 전달됩니다. 처음은 항상 느리므로 다음에는 끝에 "friend"를 추가하여 "Welcome to your new app" 텍스트를 편집합니다. 저장하면 거의 즉시 아래 그림과 유사한 결과를 볼 수 있습니다.
에서 이 기능에 대해 자세히 알아볼 수 있습니다.
Blazor는 오래되지는 않았지만 GrapeCity의 ComponentOne을 비롯하여 .NET의 강력한 지원을 받는 성숙한 프레임워크입니다. 이 10가지 기능은 Blazor 기능의 일부에 불과합니다. 이제 여러분은 Blazor의 기능을 알게 됐으므로 생각지도 못했던 기능으로 웹 응용 프로그램을 만들 수 있습니다.
은 처음부터 기본적으로 컨트롤을 빌드했습니다. 이러한 컨트롤은 Blazor 응용 프로그램에 원활하게 연결되어 스프레드시트, 그래프 및 텍스트 상자를 처음부터 프로그래밍하지 않고도 , 및 새로운 과 같은 강력한 컴포넌트를 추가할 수 있습니다. Blazor와 ComponentOne의 액세스 가능한 컴포넌트를 사용하여 다음에는 무엇을 빌드하시겠습니까?
Blazor와 ComponentOne을 결합하는 방법에 대해 자세히 알아보려면 을 탐색하거나
지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
