ASP.NET Core Blazor 소개Introduction to ASP.NET Core Blazor

Blazor에 오신 것을 환영합니다!Welcome to Blazor!

Blazor는 .NET을 사용하여 대화형 클라이언트 쪽 웹 UI를 빌드하기 위한 프레임워크입니다.Blazor is a framework for building interactive client-side web UI with .NET:

  • JavaScript 대신 C#을 사용하여 풍부한 대화형 UI를 만듭니다.Create rich interactive UIs using C# instead of JavaScript.
  • .NET에서 작성된 서버 쪽 및 클라이언트 쪽 앱 논리를 공유합니다.Share server-side and client-side app logic written in .NET.
  • 모바일 브라우저를 포함한 광범위한 브라우저 지원을 위해 UI를 HTML 및 CSS로 렌더링합니다.Render the UI as HTML and CSS for wide browser support, including mobile browsers.
  • Docker와 같은 최신 호스트 플랫폼과 통합합니다.Integrate with modern hosting platforms, such as Docker.

클라이언트 쪽 웹 개발에 .NET을 사용하면 다음과 같은 이점이 있습니다.Using .NET for client-side web development offers the following advantages:

  • JavaScript 대신 C#으로 코드를 작성합니다.Write code in C# instead of JavaScript.
  • .NET 라이브러리의 기존 .NET 에코시스템을 활용합니다.Leverage the existing .NET ecosystem of .NET libraries.
  • 서버 및 클라이언트에서 앱 논리를 공유합니다.Share app logic across server and client.
  • .NET의 성능, 안정성 및 보안을 활용합니다.Benefit from .NET's performance, reliability, and security.
  • Windows, Linux 및 macOS에서 Visual Studio를 사용하여 생산성을 유지합니다.Stay productive with Visual Studio on Windows, Linux, and macOS.
  • 안정적이고, 기능이 풍부하고, 사용하기 쉬운 공통 언어, 프레임워크 및 도구 세트를 기반으로 빌드합니다.Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

구성 요소Components

Blazor 앱은 구성 요소 를 기반으로 합니다.Blazor apps are based on components. Blazor의 구성 요소는 페이지, 대화 상자 또는 데이터 입력 양식과 같은 UI의 요소입니다.A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

구성 요소는 .NET 어셈블리에 기본 제공되는 .NET C# 클래스이며 다음을 수행합니다.Components are .NET C# classes built into .NET assemblies that:

구성 요소 클래스는 일반적으로 .razor 파일 확장자를 가진 Razor 태그 페이지 형식으로 작성됩니다.The component class is usually written in the form of a Razor markup page with a .razor file extension. Blazor의 구성 요소는 공식적으로 Razor 구성 요소 라고 합니다.Components in Blazor are formally referred to as Razor components. Razor는 개발자 생산성을 위해 설계된 HTML 태그와 C# 코드를 결합하는 구문입니다.Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor를 사용하면 Visual Studio의 IntelliSense 프로그래밍 지원을 통해 동일한 파일에서 HTML 태그와 C# 간에 전환할 수 있습니다.Razor allows you to switch between HTML markup and C# in the same file with IntelliSense programming support in Visual Studio. Razor Pages 및 MVC도 Razor를 사용합니다.Razor Pages and MVC also use Razor. 요청/응답 모델을 중심으로 빌드된 Razor Pages 및 MVC와는 달리, 구성 요소는 특별히 클라이언트 쪽 UI 논리 및 컴퍼지션에 사용됩니다.Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Blazor는 UI 컴퍼지션에 자연스러운 HTML 태그를 사용합니다.Blazor uses natural HTML tags for UI composition. 다음 Razor 태그는 사용자가 단추를 선택할 때 대화 상자를 표시하고 이벤트를 처리하는 구성 요소(Dialog.razor)를 보여줍니다.The following Razor markup demonstrates a component (Dialog.razor) that displays a dialog and processes an event when the user selects a button:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

앞의 예제에서 OnYes는 단추의 onclick 이벤트를 통해 트리거되는 C# 메서드입니다.In the preceding example, OnYes is a C# method triggered by the button's onclick event. 대화 상자의 텍스트(ChildContent) 및 제목(Title)은 해당 UI에서 이 구성 요소를 사용하는 다음 구성 요소에서 제공합니다.The dialog's text (ChildContent) and title (Title) are provided by the following component that uses this component in its UI.

Dialog 구성 요소는 HTML 태그를 사용하여 다른 구성 요소 내에 중첩됩니다.The Dialog component is nested within another component using an HTML tag. 다음 예제에서는 Index 구성 요소(Pages/Index.razor)가 이전 Dialog 구성 요소를 사용합니다.In the following example, the Index component (Pages/Index.razor) uses the preceding Dialog component. 태그의 Title 특성은 제목 값을 Dialog 구성 요소의 Title 속성에 전달합니다.The tag's Title attribute passes a value for the title to the Dialog component's Title property. Dialog 구성 요소의 텍스트(ChildContent)는 <Dialog> 요소의 콘텐츠에 의해 설정됩니다.The Dialog component's text (ChildContent) are set by the content of the <Dialog> element. Dialog 구성 요소가 Index 구성 요소에 추가되면 Visual Studio의 IntelliSense는 구문 및 매개 변수 완성을 통해 개발 속도를 높입니다.When the Dialog component is added to the Index component, IntelliSense in Visual Studio speeds development with syntax and parameter completion.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

대화 상자는 브라우저에서 Index 구성 요소가 액세스될 때 렌더링됩니다.The dialog is rendered when the Index component is accessed in a browser. 사용자가 단추를 선택하면 브라우저의 개발자 도구 콘솔에 OnYes 메서드로 작성된 메시지가 표시됩니다.When the button is selected by the user, the browser's developer tools console shows the message written by the OnYes method:

인덱스 구성 요소 내에 중첩된 브라우저에서 렌더링되는 대화 상자 구성 요소입니다.

구성 요소는 유연하고 효율적인 방법으로 UI를 업데이트하는 데 사용되는 렌더링 트리 라는 브라우저 DOM(문서 개체 모델)의 메모리 내 표시로 렌더링됩니다.Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.

Blazor WebAssembly

Blazor WebAssembly는 .NET을 사용하여 대화형 클라이언트 쪽 웹앱을 빌드하기 위한 SPA(단일 페이지 앱) 프레임워크입니다.Blazor WebAssembly is a single-page app (SPA) framework for building interactive client-side web apps with .NET. Blazor WebAssembly는 플러그 인 또는 다른 언어로 코드를 다시 컴파일하지 않고 개방형 웹 표준을 사용합니다.Blazor WebAssembly uses open web standards without plugins or recompiling code into other languages. Blazor WebAssembly는 모바일 브라우저를 비롯한 모든 최신 웹 브라우저에서 작동합니다.Blazor WebAssembly works in all modern web browsers, including mobile browsers.

웹 브라우저 내에서 .NET 코드를 실행하는 것은 WebAssembly(약식 wasm)를 통해 가능합니다.Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly는 빠른 다운로드와 최대 실행 속도를 위해 최적화된 압축 바이트 코드 형식입니다.WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly는 개방형 웹 표준이고 플러그 인 없이 웹 브라우저에서 지원됩니다.WebAssembly is an open web standard and supported in web browsers without plugins.

WebAssembly 코드는 JavaScript 상호 운용성(종종 JavaScript interop 또는 JS interop 로 단축됨)이라고 하는 JavaScript를 통해 브라우저의 전체 기능에 액세스할 수 있습니다.WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability, often shortened to JavaScript interop or JS interop. 브라우저에서 WebAssembly를 통해 실행된 .NET 코드는 브라우저의 JavaScript 샌드박스에서 클라이언트 컴퓨터의 악의적 활동에 대해 제공하는 보호를 사용하여 실행됩니다..NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

Blazor WebAssembly에서는 WebAssembly와 함께 브라우저에서 .NET 코드를 실행합니다.

Blazor WebAssembly 앱이 빌드되고 브라우저에서 실행되는 경우:When a Blazor WebAssembly app is built and run in a browser:

  • C# 코드 파일과 Razor 파일은 .NET 어셈블리로 컴파일됩니다.C# code files and Razor files are compiled into .NET assemblies.
  • 어셈블리와 .NET 런타임이 브라우저에 다운로드됩니다.The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor WebAssembly는 .NET 런타임을 부트스트랩하고 앱의 어셈블리를 로드하도록 런타임을 구성합니다.Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. Blazor WebAssembly 런타임은 JavaScript interop을 사용하여 DOM 조작 및 브라우저 API 호출을 처리합니다.The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

게시된 앱의 크기인 해당 ‘페이로드 크기’는 앱의 유용성에 중요한 성능 요소입니다.The size of the published app, its payload size, is a critical performance factor for an app's usability. 대규모 앱은 브라우저에 다운로드되는 데 비교적 오랜 시간이 걸리므로 사용자 환경이 감소됩니다.A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly는 페이로드 크기를 최적화하여 다운로드 시간을 줄입니다.Blazor WebAssembly optimizes payload size to reduce download times:

  • IL(중간 언어) 트리머에서 게시하면 사용되지 않는 코드가 앱에서 제거됩니다.Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Trimmer.
  • HTTP 응답이 압축됩니다.HTTP responses are compressed.
  • .NET 런타임 및 어셈블리가 브라우저에 캐시됩니다.The .NET runtime and assemblies are cached in the browser.
  • IL(중간 언어) 링커에서 게시하면 사용되지 않는 코드가 앱에서 제거됩니다.Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • HTTP 응답이 압축됩니다.HTTP responses are compressed.
  • .NET 런타임 및 어셈블리가 브라우저에 캐시됩니다.The .NET runtime and assemblies are cached in the browser.

Blazor Server

Blazor는 UI 업데이트 적용 방법에서 구성 요소 렌더링 논리를 분리합니다.Blazor decouples component rendering logic from how UI updates are applied. Blazor Server 에서는 ASP.NET Core 앱의 서버에서 Razor 구성 요소를 호스팅할 수 있도록 지원합니다.Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. UI 업데이트는 SignalR 연결을 통해 처리됩니다.UI updates are handled over a SignalR connection.

런타임은 서버에 유지되고 다음을 처리합니다.The runtime stays on the server and handles:

  • 앱의 C# 코드를 실행합니다.Executing the app's C# code.
  • 브라우저에서 서버로 UI 이벤트를 보냅니다.Sending UI events from the browser to the server.
  • 서버에서 다시 보낸 렌더링된 구성 요소에 UI 업데이트를 적용합니다.Applying UI updates to the rendered component that are sent back by the server.

Blazor Server에서 브라우저와 통신하기 위해 사용하는 연결은 JavaScript interop 호출을 처리하는 데도 사용됩니다.The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

Blazor Server에서 서버의 .NET 코드를 실행하고 SignalR 연결을 통해 클라이언트의 문서 개체 모델과 상호 작용합니다.

JavaScript interopJavaScript interop

타사 JavaScript 라이브러리 및 브라우저 API에 대한 액세스를 필요로 하는 앱의 경우 구성 요소는 JavaScript와 상호 운용됩니다.For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. 구성 요소는 JavaScript가 사용할 수 있는 모든 라이브러리 또는 API를 사용할 수 있습니다.Components are capable of using any library or API that JavaScript is able to use. C# 코드는 JavaScript 코드로 호출할 수 있으며, JavaScript 코드는 C# 코드로 호출할 수 있습니다.C# code can call into JavaScript code, and JavaScript code can call into C# code.

코드 공유 및 .NET StandardCode sharing and .NET Standard

Blazor는 Blazor 프로젝트에서 .NET Standard 사양을 준수하는 라이브러리를 참조할 수 있도록 하는 .NET Standard를 구현합니다.Blazor implements the .NET Standard, which enables Blazor projects to reference libraries that conform to .NET Standard specifications. .NET Standard는 .NET 구현에서 공통적인 .NET API의 공식 사양입니다..NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET Standard 클래스 라이브러리는 Blazor, .NET Framework, .NET Core, Xamarin, Mono, Unity 등 다양한 .NET 플랫폼 간에 공유할 수 있습니다..NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.

웹 브라우저 내에서 적용되지 않는 API(예: 파일 시스템 액세스, 소켓 열기 및 스레딩)에서 PlatformNotSupportedException을 throw합니다.APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.

추가 자료Additional resources