나는 네가 브라조를 잘 알기 때문에 매우 흥분된다.본고에서 저는 Blazor가 무엇인지, 그리고 왜 그것이 당신의 미래 프로젝트에 유용한 기술 선택이 될 수 있는지 설명할 것입니다.
본고는 비교적 높은 차원에서 Blazor가 무엇인지, 그리고 Blazor 응용 프로그램이 응용 프로그램에 대한 외관을 개술하고자 한다.NET 개발자.
만약 네가 이 상세한 문장을 읽는 것이 아니라 동영상을 보는 것을 좋아한다면, 나는 너를 평가하지 않을 것이다.
본고의 목표는 Blazor에 대해 기본적인 이해를 하게 하는 것입니다.우리는 그것이 어떻게 작동하는지, 그리고 어떤 기존 기술을 사용하여 이 모든 것을 실현했는지 볼 것이다.

Blazor가 뭐예요?

마이크로소프트는 상호작용 클라이언트 웹 사용자 인터페이스를 구축하는 데 사용되는 프레임워크인 Blazor를 개발했다.순액허락합니다.NET 개발자가 현대 웹 응용 프로그램을 구축합니다.
Blazor를 사용하면 JavaScript 대신 C를 사용하여 대화식 웹 UI를 작성할 수 있습니다.Blazor에는 C#, HTML, CSS를 사용하여 사용자 인터페이스를 구축하는 React 또는 Angular와 유사한 구성 요소 모델이 있습니다.
Blazor의 첫 번째 재미있는 점은 서버와 클라이언트에서 C#를 작성하기 때문에 코드와 라이브러리를 공유할 수 있다는 것이다.
Blazor는 ASP 꼭대기에 앉아 있습니다.NET 커널과 액세스할 수 있는 모든 새로운 기능이 있습니다.NET 플랫폼.

Blazor는 개방형 웹 표준을 사용합니다.

Blazor는 오픈 웹 표준 위에 구축되어 있습니다.Flash나 Silverlight와 달리 Blazor 응용 프로그램을 실행하려면 브라우저의 플러그인이 필요하지 않습니다.Blazor는 데스크톱과 모바일 장치의 모든 현대 브라우저에 적용됩니다.

Blazor에서 코드 공유 허용

당신은 기존의 것을 사용할 수 있습니다.NET 표준 라이브러리.에서 코드를 작성합니다.NET 표준 라이브러리는 Xamarin, ASP를 포함한 모든 항목에서 사용할 수 있습니다.NET WebApi, Blazor, WPF를 사용하는 데스크톱 응용 프로그램 등.

JavaScript는 여전히 선택 사항입니다.

자바스크립트 웹 프레임워크를 사용한 경험이 있거나, 자바스크립트 라이브러리의 풍부한 생태계를 잘 알고 있을 수도 있습니다.좋은 소식은 Blazor는 자바스크립트가 필요하지 않지만 필요하면 사용할 수 있다는 것이다.
Blazor는 필요한 곳에서 JavaScript API 및 라이브러리를 호출할 수 있도록 합니다.

Blazor는 최고의 IDE 지원을 제공합니다.

Microsoft IDE, Visual Studio, Visual Studio 코드는 Windows뿐만 아니라 Linux와 macOS에서도 뛰어난 Blazor 개발 체험을 제공합니다.다른 IDE 또는 편집기를 사용하여 Blazor 응용 프로그램을 작성할 수 있는 명령줄 도구도 있습니다.

Blazor의 생태계 성분은 풍부하다

우리는 바쁜 개발자이기 때문에 처음부터 사용자 인터페이스를 구축하고 싶지 않다.다행히도 시간이 아직 이르지만 여러 개의 유명한 제3자 구성 요소 라이브러리가 사용되거나 본문을 읽을 때 개발되고 있다.

Blazor는 오픈한 거예요.

내부 작업 원리를 알고 싶으면 GitHub 에서 코드를 찾을 수 있습니다.Blazor는 개원된 것으로 그 핵심 프로젝트에는 이미 많은 공헌자가 있다.
공식 사이트Blazor product page에서 Blazor의 기능에 대해 더 많이 알 수 있습니다.

첫 번째 Blazor 응용 프로그램 만들기

우선, 최신 버전의 Visual Studio 2019를 실행하고 있는지 확인하십시오. 가장 성능이 좋은 도구를 사용해서 작업을 끝내고 싶다면 좋은 생각입니다.우리는 아직 있어야 한다.NET Core SDK 3.0 또는 업데이트 버전이 설치되어 있습니다.
Visual Studio 2019를 시작하고 새 프로젝트를 만듭니다.프로젝트 템플릿 선택 화면에서 Blazor App을 선택합니다.

여기에서 Blazor를 보지 못하면 Visual Studio 설치 프로그램에 웹 개발 작업 부하를 설치해야 할 수도 있습니다.만약 이것이 당신에게 문제라면, 아래의 평론에서 저에게 간단명료한 동영상이나 그것에 관한 문장을 만들 것이라고 알려주세요.
다음 화면에서 항목 이름을 선택하고 항목의 위치를 설정한 다음 만들기 단추를 누르십시오.
그런 다음 새 Blazor 응용 프로그램 만들기 화면이 나타납니다.Blazor 소개를 위해 Blazor 서버 응용 프로그램을 만들기로 했습니다.나는 이 블로그의 다른 글에서 Blazor WebAssembly 응용 프로그램을 소개할 것이다.

Blazor WebAssembly 응용 프로그램 옵션이 없으면 템플릿을 설치할 수 있습니다.Blazor WebAssembly가 현재 미리 보기 상태입니다.따라서 이 템플릿은 Visual Studio 설치 프로그램을 사용하여 설치된 웹 개발 부하에 포함되지 않습니다.
첫 번째 Blazor 서버 응용 프로그램을 만들려면 만들기 단추를 누르십시오.

Blazor 서버 어플리케이션의 첫인상

우선, 브라우저에서 Blazor 프로그램의 첫인상을 얻기 위해 프로그램을 컴파일하고 실행합시다.

우리는 왼쪽은 네비게이션이고 오른쪽은 내용이라는 고전적인 단일 응용 프로그램을 보았다.
카운터 메뉴를 눌러서 카운터 보기를 엽니다.[나 클릭] 버튼을 클릭하면 카운터가 1 증가합니다.
서버에서 데이터를 불러와 격자에 표시하려면 데이터 가져오기 메뉴 옵션을 누르십시오.

이것은 결코 가장 사람들의 주목을 끄는 응용 프로그램은 아니지만, 이것은 우리로 하여금 Blazor 서버 응용 프로그램의 작업 원리를 깊이 있게 이해하게 한다.프로그램을 멈추고 프로젝트의 원본 코드를 봅시다.

Blazor 서버 프로젝트 구조

우리 프로젝트의 해결 방안 자원 관리자에서 우리는 세 개의 폴더 데이터, 페이지, 공유와 일부 최고급 파일을 보았다.

이 소개문에서 우리는 Blazor 서버 응용 프로그램의 시작이나 설정을 이해하지 못했다.반대로 우리는 Blazor가 응용 프로그램 개발자를 어떻게 찾는지 알고 싶다.

카운터 구성 요소

Pages 폴더를 열고 카운터를 두 번 클릭합니다.편집기에서 열 수 있도록 razor 파일입니다.이 Blazor 구성 요소는 Razor 구문을 사용합니다. 이것은 HTML 템플릿을 가지고 필요한 곳에 C 논리를 추가할 수 있도록 합니다.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

이 구성 요소에currentCount 변수가 있습니다. 다섯 번째 줄에 표시하고 싶습니다.C 코드는 @code 명령에 포장됩니다.우리는 한 반을 정의하는 것과 같은 의식을 많이 필요로 하지 않는다.반대로, 우리는 필요한 변수를 만들고, 그 값을 증가시키는 방법을 실현한다.
7행에서는 버튼을 클릭할 때 IncrementCount 방법을 정의합니다.
첫 번째 줄에서 @page 명령이 있습니다. Blazor 공유기 구성 요소가 어느 URL에서 사용할 수 있는지 알려 줍니다.

FetchData 구성 요소

이제 FetchData 구성 요소를 살펴보겠습니다.이 구성 요소의 구조는 우리가 이전에 연구한 구성 요소와 큰 차이가 없다.

@page "/fetchdata"

@using BlazorApp3.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.TemperatureF</td>
                <td>@forecast.Summary</td>
            </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

네 번째 줄에서 우리는 의존 주입을 사용하여 Weather Forecast 서비스 클래스의 실례를 얻었다.우리는 26줄의 for-each 문장을 집합된 항목으로 HTML 템플릿을 반복하는 약간 복잡한 레이아웃 정의를 가지고 있다.
44줄에서, 우리는 비동기 호출을 실행하고, 주입된 Weather Forecast 서비스 실례를 사용하여 서버에서 데이터를 검색하는 방법이 있다.

Blazor 로드맵

신기술을 배울 때 중요한 것은 시간과 정력을 들여 신기술을 배울 가치가 있는지를 결정하는 것이다.예를 들어 몇 달 또는 몇 년 후에 이 기술의 발전 방향을 이해하는 것은 매우 가치가 있다.Blazor 팀은 잘했다. 그들의 노선도를 발표하고 여러 차례 토론했다.

비록 우리는 Blazor 서버의 발표를 받았지만.NET Core 3.0은 2019년 9월에 발표될 것이며, 우리는 곧 2020년 5월에 Blazor WebAssembly를 발표할 것이다.비디오 시작 부분에서 설명한 바와 같이, Blazor WebAssembly는 서버에서 논리를 실행하지 않고 브라우저에서 웹 응용 프로그램을 실행할 수 있도록 합니다.
다음 단계에서 Blazor는 PWA(점진적 웹 응용 프로그램)를 제공할 수 있습니다.PWA는 호스트의 알림 시스템과 통합하고 메인 화면에 응용 프로그램 아이콘을 만들 수 있도록 오프라인 지원을 제공합니다.
또한 Blazor는 전자 케이스 내에서 응용 프로그램을 실행할 수 있도록 혼합 모델을 지원합니다.Blazor를 사용하여 모든 기능을 갖춘 데스크톱 응용 프로그램을 만들 수 있습니다.
Blazor Native가 있으면 Blazor를 사용하여 데스크톱과 모바일 시스템을 위한 기본 응용 프로그램을 만들 수 있습니다(전자 케이스 없음).
Blazor 활성화부터 시작합니다.NET 개발자는 최신을 사용합니다.NET 핵심 플랫폼.다음은 응용 프로그램이 데스크톱이나 모바일 응용 프로그램으로도 실행될 수 있도록 더 많은 옵션을 얻을 것입니다.
만약 우리가 Blazor 구성 요소의 작업 원리를 이해한다면, 우리는 다시 사용할 수 있는 구성 요소와 서비스를 만들 수 있을 것이다. 이 구성 요소와 서비스는 모든 플랫폼에서 사용할 수 있으며, 웹에서 휴대전화나 데스크톱에 있는 본 컴퓨터 응용 프로그램까지 사용할 수 있다.

결론

나는 네가 나처럼 Blazor 개발 프로그램을 흥분해서 사용할 수 있기를 바란다.본고는 Blazor에 대해 고위층 소개와 개술을 진행하였다.다음 글은 더 많은 기술을 소개하고 첫 번째 Blazor 응용 프로그램에 코드를 작성하는 방법을 배울 것입니다.
올해 4월에 나는 Creating Web Applications with Blazor에 관한 온라인 과정을 발표할 것이다.온라인 과정은 기초 지식을 습득하는 것부터 Blazor를 사용하여 복잡한 응용 프로그램을 구축하는 것까지 안내합니다.보기course page, 이메일 목록에 가입하면 대량의 할인과 사전 액세스를 받을 수 있습니다.
다음 댓글에서 Blazor에 대한 의견을 알려주시겠어요?너는 지금까지 본 것을 좋아하니?당신은 이미 Blazor로 응용 프로그램을 구축하기 시작했습니까?
본고는 최초로 2020년 1월 21일claudiobernasconi.ch에 발표되었다.