@Title

43 | @BodyContent 44 | 45 |

` section to the file: 42 | 43 | ```text 44 | 45 | 46 | 47 | ``` 48 | 49 | Set the app base path in the Blazor app's _index.html_ file to the IIS alias used when configuring the sub-app in IIS. For more information, see [App base path](https://blazor.net/docs/host-and-deploy/index.html#app-base-path). 50 | 51 | ### Server-side hosting model 52 | 53 | In the server-side hosting model, Blazor is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection. 54 | 55 | ![Blazor server-side](https://user-images.githubusercontent.com/1874516/43042867-eaa8bb76-8d3b-11e8-8f1d-60768f86f710.png) 56 | 57 | To create a Blazor app using the server-side hosting model, use the **Blazor \(Server-side on ASP.NET Core\)** template \(`blazorserver` when using [dotnet new](https://blazor.net/dotnet/core/tools/dotnet-new) at a command prompt\). An ASP.NET Core app hosts the Blazor server-side app and sets up the SignalR endpoint where clients connect. The ASP.NET Core app references the Blazor `Startup` class to both add the server-side Blazor services and to add the Blazor app to the request handling pipeline: 58 | 59 | ```text 60 | public class Startup 61 | { 62 | public void ConfigureServices(IServiceCollection services) 63 | { 64 | ... 65 | services.AddServerSideBlazor(); 66 | } 67 | 68 | public void Configure(IApplicationBuilder app, IHostingEnvironment env) 69 | { 70 | ... 71 | app.UseServerSideBlazor(); 72 | } 73 | } 74 | ``` 75 | 76 | The _blazor.server.js_ script establishes the client connection. It's the app's responsibility to persist and restore app state as needed \(for example, in the event of a lost network connection\). 77 | 78 | The benefits of the server-side hosting model are: 79 | 80 | * You can still write your entire app with .NET and C\# using the Blazor component model. 81 | * Your app still has a rich interactive feel and avoids unnecessary page refreshes. 82 | * Your app download size is significantly smaller, and the initial app load time is much faster. 83 | * Your Blazor component logic can take full advantage of server capabilities, including using any .NET Core compatible APIs. 84 | * Because you're running on .NET Core on the server, existing .NET tooling, such as debugging, works as expected. 85 | * Server-side hosting works with thin clients \(for example, browsers that don't support WebAssembly and resource constrained devices\). 86 | 87 | The downsides of the server-side hosting model are: 88 | 89 | * Latency: every user interaction now involves a network hop. 90 | * No offline support: if the client connection goes down, the app stops working. 91 | * Scalability: the server must manage multiple client connections and handle client state. 92 | 93 | -------------------------------------------------------------------------------- /routing.md: -------------------------------------------------------------------------------- 1 | # 라우팅 2 | 3 | `노트: Blazor는 아직 기술 지원이 제공되지 않는 실험용 웹 프레임워크로, 실무 개발에 사용되어서는 안됩니다.` 4 | 5 | Learn how to route requests in a client-side Blazor app and about the NavLink component. 6 | 7 | [View or download sample code](https://github.com/aspnet/Blazor.Docs/tree/master/docs/common/samples/) \([how to download](https://blazor.net/docs/index.html#view-and-download-samples)\). See the [Get started](https://blazor.net/docs/get-started.html) topic for prerequisites. 8 | 9 | ### Route templates 10 | 11 | The `` component enables routing, and a route template is provided to each accessible component. The `` component appears in the _App.cshtml_ file: 12 | 13 | ```text 14 | 15 | ``` 16 | 17 | When a _\*.cshtml_ file with an `@page` directive is compiled, the generated class is given a [RouteAttribute](https://docs.microsoft.com/dotnet/api/microsoft.aspnetcore.mvc.routeattribute) specifying the route template. At runtime, the router looks for component classes with a `RouteAttribute` and renders whichever component has a route template that matches the requested URL. 18 | 19 | Multiple route templates can be applied to a component. In the [sample app](https://github.com/aspnet/Blazor.Docs/tree/master/docs/common/samples/), the following component responds to requests for `/BlazorRoute` and `/DifferentBlazorRoute`. 20 | 21 | _Pages/BlazorRoute.cshtml_: 22 | 23 | ```text 24 | @page "/BlazorRoute" 25 | @page "/DifferentBlazorRoute" 26 | 27 |

Blazor routing

28 | ``` 29 | 30 | **IMPORTANT** 31 | 32 | To generate routes properly, the app must include a `` tag in its _wwwroot/index.html_ file with the app base path specified in the `href` attribute \(``\). For more information, see [Host and deploy: App base path](https://blazor.net/docs/host-and-deploy/index.html#app-base-path). 33 | 34 | ### Route parameters 35 | 36 | The Blazor client-side router uses route parameters to populate the corresponding component parameters with the same name \(case insensitive\). 37 | 38 | _Pages/RouteParameter.cshtml_: 39 | 40 | ```text 41 | @page "/RouteParameter" 42 | @page "/RouteParameter/{text}" 43 | 44 |

Blazor is @Text!

45 | 46 | @functions { 47 | [Parameter] 48 | private string Text { get; set; } = "fantastic"; 49 | ``` 50 | 51 | Optional parameters aren't supported yet, so two `@page` directives are applied in the example above. The first permits navigation to the component without a parameter. The second `@page`directive takes the `{text}` route parameter and assigns the value to the `Text` property. 52 | 53 | ### Route constraints 54 | 55 | A route constraint enforces type matching on a route segment to a Blazor component. 56 | 57 | In the following example, the route to the Users component only matches if: 58 | 59 | * An `Id` route segment is present on the request URL. 60 | * The `Id` segment is an integer \(`int`\). 61 | 62 | ```text 63 | @page "/Users/{Id:int}" 64 | 65 |

The user Id is @Id!

66 | 67 | @functions { 68 | [Parameter] 69 | private int Id { get; set; } 70 | } 71 | ``` 72 | 73 | The route constraints shown in the following table are available for use. For the route constraints that match with the invariant culture, see the warning below the table for more information. 74 | 75 | | Constraint | Example | Example Matches | Invariant culture matching | 76 | | :--- | :--- | :--- | :--- | 77 | | `bool` | `{active:bool}` | `true`, `FALSE` | No | 78 | | `datetime` | `{dob:datetime}` | `2016-12-31`, `2016-12-31 7:32pm` | Yes | 79 | | `decimal` | `{price:decimal}` | `49.99`, `-1,000.01` | Yes | 80 | | `double` | `{weight:double}` | `1.234`, `-1,001.01e8` | Yes | 81 | | `float` | `{weight:float}` | `1.234`, `-1,001.01e8` | Yes | 82 | | `guid` | `{id:guid}` | `CD2C1638-1638-72D5-1638-DEADBEEF1638`, `{CD2C1638-1638-72D5-1638-DEADBEEF1638}` | No | 83 | | `int` | `{id:int}` | `123456789`, `-123456789` | Yes | 84 | | `long` | `{ticks:long}` | `123456789`, `-123456789` | Yes | 85 | 86 | **WARNING** 87 | 88 | Route constraints that verify the URL and are converted to a CLR type \(such as `int` or `DateTime`\) always use the invariant culture. These constraints assume that the URL is non-localizable. 89 | 90 | ### NavLink component 91 | 92 | Use a NavLink component in place of HTML **<a>** elements when creating navigation links. A NavLink component behaves like an **<a>** element, except it toggles an `active` CSS class based on whether its `href` matches the current URL. The `active` class helps a user understand which page is the active page among the navigation links displayed. 93 | 94 | The NavMenu component in the [sample app](https://github.com/aspnet/Blazor.Docs/tree/master/docs/common/samples/) creates a [Bootstrap](https://getbootstrap.com/docs/) nav bar that demonstrates how to use NavLink components. The following markup shows the first two NavLinks in the _Shared/NavMenu.cshtml_ file. 95 | 96 | ```text 97 |

98 |

100 | 101 | Home 102 | 103 |
105 | 106 | Blazor Route 107 | 108 |

(); 33 | } 34 | ``` 35 | 36 | 서비스는 다음과 같이 생명 주기를 설정할 수 있습니다: 37 | 38 | | 생명 주기 | 설명 | 39 | | :--- | :--- | 40 | | [Singleton](https://docs.microsoft.com/dotnet/api/microsoft.extensions.dependencyinjection.servicedescriptor.singleton#Microsoft_Extensions_DependencyInjection_ServiceDescriptor_Singleton__1_System_Func_System_IServiceProvider___0__) | 의존성 주입에 의하여 서비스의 _싱글턴 인스턴스_ 가 생성됩니다. 이렇게 정의된 서비스를 필요로 하는 컴포넌트에 인스턴스가 전달됩니다. | 41 | | [Transient](https://docs.microsoft.com/dotnet/api/microsoft.extensions.dependencyinjection.servicedescriptor.transient) | 서비스에서 컴포넌트를 필요로 할 때 마다, 서비스의 _새로운 인스턴스_ 를 생성하여 전달합니다. | 42 | | [Scoped](https://docs.microsoft.com/dotnet/api/microsoft.extensions.dependencyinjection.servicedescriptor.scoped) | Blazor는 현재 의존성 주입의 범위를 지정하는 기능을 제공하지 않습니다. `Scoped`는 `Singleton`처럼 작동하므로, `Scoped` 대신 `Singleton`을 사용하는 것이 좋습니다. | 43 | 44 | Blazor의 의존성 주입 시스템은 ASP.NET Core의 의존성 주입 시스템을 기반으로 합니다. 더 자세한 정보는, [ASP.NET Core의 의존성 주입](https://docs.microsoft.com/aspnet/core/fundamentals/dependency-injection)을 참고하십시오. 45 | 46 | ### 기본 서비스 47 | 48 | Blazor는 앱의 서비스 컬렉션에 자동으로 기본 서비스들을 추가하여 제공합니다. 다음의 표에서는 현재 Blazor의 [BrowserServiceProvider](https://blazor.net/api/Microsoft.AspNetCore.Blazor.Browser.Services.BrowserServiceProvider.html)에 의하여 제공되는 기본 서비스들을 나타내고 있습니다. 49 | 50 | | 서비스 | 설명 | 51 | | :--- | :--- | 52 | | [IUriHelper](https://blazor.net/api/Microsoft.AspNetCore.Blazor.Services.IUriHelper.html) | URI와 탐색 상태를 제어하는 도우미 서비스입니다. \(싱글턴\). | 53 | | [HttpClient](https://docs.microsoft.com/dotnet/api/system.net.http.httpclient) | URI로 식별되는 리소스에 대해 HTTP 요청을 보내거나 HTTP 응답을 받을 수 있는 수단을 제공합니다. \(싱글턴\) 참고할 것은, `HttpClient` 형식의 인스턴스는 브라우저를 사용하여 HTTP 요청을 백그라운드에서 처리합니다. [HttpClient.BaseAddress](https://docs.microsoft.com/dotnet/api/system.net.http.httpclient.baseaddress) 속성은 자동으로 앱의 기본 URI로 설정됩니다. | 54 | 55 | 커스텀 서비스 공급자를 `BrowserServiceProvider` 대신 사용하는 것도 가능합니다. 커스텀 서비스 공급자를 사용하면 앞의 표에서 제공되는 서비스가 포함되지 않기 때문에, 직접 해당 서비스들을 명시적으로 제공해야 합니다. 56 | 57 | ### 컴포넌트에서 서비스 요청하기 58 | 59 | 서비스 컬렉션에 서비스가 추가되면, 컴포넌트의 Razor 템플릿에 `@inject` Razor 지시자를 사용하여 주입할 수 있습니다. `@inject`는 두 개의 매개 변수를 받습니다: 60 | 61 | * 형식 이름: 주입하려는 서비스의 형식입니다. 62 | * 프로퍼티 이름: 주입되는 앱 서비스를 받을 속성의 이름을 지정합니다. 프로퍼티를 직접 만들 필요는 없고, 컴파일러가 대신 속성을 새로 정의합니다. 63 | 64 | 여러 개의 `@inject` 문을 사용하여 여러 달느 서비스들을 주입할 수도 있습니다. 65 | 66 | 다음의 예제에서는 `@inject`를 어떻게 사용하는지 보여줍니다. `Services.IDataAccess`를 구현하는 서비스를 컴포넌트의 `DataRepository` 속성에 주입합니다. 여기서 코드는 `IDataAccess`가 제공하는 추상화된 부분만을 사용한다는 것에 주목합니다: 67 | 68 | ```text 69 | @page "/customer-list" 70 | @using Services 71 | @inject IDataAccess DataRepository 72 | 73 |

@customer.FirstName @customer.LastName

82 | 83 | @functions { 84 | private IReadOnlyList Customers; 85 | 86 | protected override async Task OnInitAsync() 87 | { 88 | // The property DataRepository received an implementation 89 | // of IDataAccess through dependency injection. Use 90 | // DataRepository to obtain data from the server. 91 | Customers = await DataRepository.GetAllCustomersAsync(); 92 | } 93 | } 94 | ``` 95 | 96 | 내부적으로, 생성된 프로퍼티 \(`DataRepository`\)는 [InjectAttribute](https://blazor.net/api/Microsoft.AspNetCore.Blazor.Components.InjectAttribute.html) 어트리뷰트가 붙습니다. 보통 이 어트리뷰트는 직접 사용되지 않습니다. 구성 요소에 기본 클래스가 필요하고 주입된 속성이 기본 클래스에도 필요하면 `InjectAttribute`를 수동으로 추가 할 수 있습니다: 97 | 98 | ```text 99 | public class ComponentBase : BlazorComponent 100 | { 101 | // 컴포넌트의 기본 클래스에 InjectAttribute를 사용하더라도 102 | // Blazor의 의존성 주입이 적용됩니다. 103 | [Inject] 104 | protected IDataAccess DataRepository { get; set; } 105 | ... 106 | } 107 | ``` 108 | 109 | 기본 클래스로부터 컴포넌트가 상속되면, `@inject` 지시자가 필요하지 않습니다. 기본 클래스에 `InjectAttribute`를 사용하는 것만으로도 충분합니다: 110 | 111 | ```text 112 | @page "/demo" 113 | @inherits ComponentBase 114 | 115 |

...

116 | ... 117 | ``` 118 | 119 | ### 서비스로 의존성 주입 120 | 121 | 복잡한 서비스의 경우 더 많은 서비스들을 필요로 할 수 있습니다. 앞의 예시인 `DataAccess` 서비스는 Blazor의 기본 서비스인 `HttpClient`를 필요로 할 수 있습니다. `@inject` 또는 `InjectAttribute`를 서비스 안에서 사용할 수 없습니다. 이 경우 _생성자 주입_ 이 대신 사용되어야 합니다. 필요한 서비스들을 서비스의 생성자의 매개 변수에 추가하는 방법으로 지정할 수 있습니다. 의존성 주입에 의하여 서비스가 만들어지면, 생성자에서 필요로하는 서비스들을 인식하여 적절하게 제공합니다. 122 | 123 | 다음의 코드 예제에서는 이 컨셉을 보여줍니다: 124 | 125 | ```text 126 | public class DataAccess : IDataAccess 127 | { 128 | // 생성자는 의존성 주입에 의하여 HttpClient의 인스턴스를 받게 됩니다. 129 | // HttpClient는 Blazor가 기본으로 제공하는 서비스입니다. 130 | public DataAccess(HttpClient client) 131 | { 132 | ... 133 | } 134 | ... 135 | } 136 | ``` 137 | 138 | 생성자 주입을 사용하려면 다음의 조건을 만족해야 합니다: 139 | 140 | * 의존성 주입에 의하여 매개 변수를 제공할 수 있는 생성자가 한 개만 있어야 합니다. 단, 기본값이 지정된 매개 변수들은 의존성 주입에 의하여 처리되지 않더라도 사용할 수 있습니다. 141 | * 반드시 _public_ 으로 선언된 생성자여야 합니다. 142 | * 조건에 만족하는 생성자가 하나만 있어야 합니다. 조건을 만족하는 생성자가 여러 개여서 모호한 상황이 되면, 의존성 주입 처리 도중 예외를 발생시키게 됩니다. 143 | 144 | ### 추가 리소스 145 | 146 | * [ASP.NET Core에서의 의존성 주입](https://docs.microsoft.com/aspnet/core/fundamentals/dependency-injection) 147 | 148 | -------------------------------------------------------------------------------- /faq.md: -------------------------------------------------------------------------------- 1 | # 자주 묻는 질문들 2 | 3 | `노트: Blazor는 아직 기술 지원이 제공되지 않는 실험용 웹 프레임워크로, 실무 개발에 사용되어서는 안됩니다.` 4 | 5 | ## Blazor란 무엇인가요? 6 | 7 | Blazor는 단일 페이지 웹 앱 \(SPA\) 프레임워크로 브라우저 안에서 웹 어셈블리로 실행되며, .NET으로 만들어졌습니다. 8 | 9 | ## .NET을 처음 들어보는데, .NET은 무엇인가요? 10 | 11 | [.NET](https://www.microsoft.com/net) 은 무료로 제공되며, 크로스 플랫폼이면서, 서로 다른 수많은 종류의 앱 \(데스크탑, 모바일, 게임, 웹\)을 만들기 위한 오픈 소스 개발자 플랫폼입니다. .NET에는 관리되는 런타임, 표준화된 [라이브러리](https://docs.microsoft.com/dotnet/api)가 포함되어있으며, 그리고 여러 모던 프로그래밍 언어들: [C\#](https://docs.microsoft.com/dotnet/csharp/), [F\#](https://docs.microsoft.com/dotnet/fsharp/), 그리고 [VB](https://docs.microsoft.com/dotnet/visual-basic/)를 지원합니다. [10분 안에 .NET 시작하기](https://www.microsoft.com/net/learn/get-started/windows) 가이드를 참고하여 .NET을 배울 수 있습니다. 12 | 13 | ## .NET을 웹 개발을 위하여 왜 사용해야 합니까? 14 | 15 | 브라우저 안에서 .NET을 사용하면 웹 개발을 보다 쉽고 생산적으로 만들기 위한 많은 장점을 누릴 수 있습니다: 16 | 17 | * **안정성과 일관성**: .NET은 표준 API, 도구, 그리고 빌드 인프라를 모든 .NET 플랫폼에 걸쳐 안정적이고, 풍부한 기능을 제공하면서도, 사용하기 쉽게 제공합니다. 18 | * **혁신적인 모던 언어**: .NET의 여러 언어들 중 [C\#](https://docs.microsoft.com/dotnet/csharp/) 과 [F\#](https://docs.microsoft.com/dotnet/fsharp/)은 여러 새롭고 혁신적인 언어 기능들을 통하여 프로그래밍을 더 재미있고 더 향상시킬 수 있게 도와줍니다. 19 | * **업계를 선도하는 도구**: [Visual Studio](https://www.visualstudio.com/) 제품군은 최고의 .NET 개발 환경을 Windows, Linux, 그리고 macOS에서 제공합니다. 20 | * **빠른 속도와 확장성**: .NET은 성능, 안정성, 그리고 보안을 서버에서 제공하기 위한 긴 경험을 가지고 있습니다. .NET을 풀 스택 솔루션으로서 사용하면 여러분의 앱을 더 손쉽게 확장할 수 있습니다. 21 | 22 | ## .NET을 웹 브라우저에서 어떻게 실행할 수 있는건가요? 23 | 24 | .NET을 브라우저에서 실행할 수 있는 것은 새로운 웹 표준 기술인 [웹 어셈블리](http://webassembly.org/)에 의하여 가능해 졌습니다. 웸 어셈블리는 "웹으로의 컴파일에 적합한 이식 가능한 크기 및 빠른 로딩 시간을 보장하는 형식"입니다. 웹 어셈블리로 컴파일된 코드는 어떤 브라우저에서든 네이티브와 같은 속도로 실행할 수 있습니다. .NET 바이너리를 웹 브라우저에서 실행하기 위해서는, 웹 어셈블리로 컴파일된 .NET 런타임 \(구체적으로는 [Mono](http://www.mono-project.com/news/2017/08/09/hello-webassembly/)\)을 사용해야 합니다. 25 | 26 | ## Blazor는 내가 만든 .NET 기반의 앱을 통째로 웹 어셈블리로 컴파일합니까? 27 | 28 | 아니오, 하나의 Blazor 앱은 보통의 컴파일된 .NET 어셈블리로 웹 어셈블리 기반의 .NET 런타임을 사용하여 웹 브라우저에 의하여 다운로드되고 실행됩니다. .NET 런타임 그 자체만이 웹 어셈블리로서 컴파일됩니다. 나중에는 앱의 전체 코드를 [정적 \(AoT\) 컴파일](http://www.mono-project.com/news/2018/01/16/mono-static-webassembly-compilation/) 기능을 사용하여 웹 어셈블리로 변환하는 것을 추가하게 될 수도 있습니다. 29 | 30 | ## .NET 런타임을 포함하는 것이라면, 앱의 전체 다운로드 크기가 매우 크지 않을까요? 31 | 32 | 반드시 그렇지는 않습니다. .NET 런타임은 모든 형태의 크기로 제공됩니다. 초기의 Blazor 프로토타입은 경량화된 .NET 런타임 \(어셈블리 실행, 가비지 컬렉션, 스레딩 기능을 제공하는\) 을 사용하여 60KB 내외의 웹 어셈블리로 컴파일되도록 만들어졌습니다. 이제 Blazor는 이전보다 훨씬 크기가 큰 Mono 위에서 실행됩니다. 하지만, 그러나 런타임 및 응용 프로그램 바이너리의 병합 및 트리밍을 비롯하여, 아직 전송될 파일들의 크기에 관해서는 최적화할 여지가 많이 남았습니다. 그 외에도, 캐싱과 CDN을 사용하는 전략도 생각하고 있습니다. 33 | 34 | ## Blazor에서는 앞으로 어떤 기능을 지원하게 됩니까? 35 | 36 | Blazor는 모던 SPA 프레임워크라면 기대할 수 있는 다음의 기능들을 지원할 것입니다: 37 | 38 | * 조합 가능한 UI를 만들기 위한 컴포넌트 모델 39 | * 라우팅 40 | * 레이아웃 41 | * 폼과 유효성 검사 42 | * 의존성 주입 43 | * JavaScript 연동 44 | * 개발 중에 동적 새로 고침 지원 45 | * 서버 측 렌더링 46 | * 브라우저와 IDE에서 모두 사용 가능한 완전한 .NET 디버깅 지원 47 | * 개선된 IntelliSense 지원과 도구 48 | * asm.js를 통한 오래된 \(웹 어셈블리를 지원하지 않는\) 브라우저에서의 실행 지원 49 | * 게시 및 앱 크기 최적화 50 | 51 | ## 서버가 .NET을 사용하지 않아도 Blazor 앱을 실행할 수 있습니까? 52 | 53 | 예. Blazor 앱은 정적 파일들로 배포되기 때문에 서버가 .NET을 지원하는지의 여부는 아무런 상관이 없습니다. 54 | 55 | ## Blazor를 서버의 ASP.NET Core와 함께 사용할 수 있습니까? 56 | 57 | 예! Blazor는 부수적으로 [ASP.NET Core](https://docs.microsoft.com/aspnet/core)와의 연동을 통하여 자연스럽고 일관성있는 풀 스택 웹 개발 솔루션을 제공합니다. 58 | 59 | ## Blazor는 기존 JavaScript 프레임워크를 .NET으로 포팅한 버전입니까? 60 | 61 | Blazor는 기존의 모던 SPA 앱 프레임워크인 React, Angular, 그리고 Vue에서 영감을 얻어 만든 _새로운 프레임워크_ 입니다. 62 | 63 | ## Blazor를 어떻게 테스트해볼 수 있나요? 64 | 65 | 첫 Blazor 웹 앱을 만들기 위해서는 [Blazor 시작하기](get-started.md) 문서를 참고하세요. 66 | 67 | ## 왜 Blazor는 "실험용" 프로젝트인가요? 68 | 69 | Blazor는 실험적 프로젝트입니다. 왜냐하면 쓰임새와 유용성에 대해서 풀어야 할 과제들이 많이 남았기 때문입니다. 이 실험용 프로젝트의 초기 목적은 다음과 같습니다. 70 | 71 | * Work through technical issues. 72 | * Gauge interest and to listen to feedback. 73 | 74 | Blazor의 미래에 대해서는 낙관적으로 보고 있습니다. 그러나 지금 Blazor는 완전한 제품이 아니며, 극 초기 단계의 프로토타입으로서만 고려되어야 합니다. 75 | 76 | ## Silverlight와 같은 일을 새로 시작하는건가요? 77 | 78 | 아니오, Blazor는 HTML과 CSS를 기반으로 하는 .NET 웹 프레임워크로 공개된 웹 표준을 사용하여 브라우저 안에서 실행됩니다. 플러그인은 전혀 필요하지 않으며, 모바일 장치와 오래된 브라우저에서도 실행됩니다. 79 | 80 | ## Blazor는 XAML을 사용합니까? 81 | 82 | 아니오, Blazor는 HTML, CSS, 그리고 다른 표준 웹 기술을 기반으로하는 웹 프레임워크입니다. 83 | 84 | ## 웹 어셈블리는 모든 브라우저에서 지원됩니까? 85 | 86 | 네, WebAssembly는 크로스 브라우저에서 실행되기 위해 필요한 합의를 달성했고, [모든 최신 웹 브라우저들이 실행을 지원합니다.](https://caniuse.com/#search=webassembly). 87 | 88 | ## Blazor는 모바일 브라우저에서도 작동합니까? 89 | 90 | 네, [최신 모바일 브라우저들도 WebAssembly를 지원합니다.](https://caniuse.com/#search=webassembly). 91 | 92 | ## WebAssebmly를 지원하지 않는 오래된 브라우저들의 경우는 어떻습니까? 예를 들어, Blazor는 IE에서도 동작합니까? 93 | 94 | WebAssembly를 지원하지 않는 오래된 브라우저들에 대해서, Blazor는 더 느리고 더 많은 용량을 다운로드해야 하는 대신, 꽤 정상적인 기능을 보장하는 asm.js 기반의 .NET 런타임을 사용하도록 대처합니다. 95 | 96 | ## .NET Standard 라이브러리를 Blazor에서 사용할 수 있습니까? 97 | 98 | 네, Blazor를 위하여 사용되는 .NET 런타임은 .NET Standard 2.0을 지원합니다. 단, 브라우저 안에서 지원되지 않는 API들은 _기능이 지원되지 않음을 알리는 예외_ 를 발생시킵니다. 99 | 100 | ## Blazor가 동작하려면 WebAssembly에 가비지 수집 및 다중 스레드와 같은 기능이 추가되어야 하지 않습니까? 101 | 102 | 아니오, WebAssembly의 현재 상태로도 충분합니다. .NET 런타임이 자체적으로 가비지 수집과 다중 스레드에 대한 것을 처리합니다. 103 | 104 | ## 기존 JavaScript 라이브러리를 Blazor와 함께 사용할 수 있습니까? 105 | 106 | 예, Blazor 앱은 JavaScript를 JavaScript 상호 연동 API를 통하여 호출할 수 있습니다. 107 | 108 | ## Blazor 앱에서 DOM에 접근할 수 있습니까? 109 | 110 | .NET 코드에서 JavaScript 연동을 통해 DOM에 접근할 수는 있습니다. 하지만, Blazor는 DOM에 직접 접근해야 할 필요성을 최소화하는 컴포넌트 기반 프레임워크입니다. 111 | 112 | ## 왜 .NET Core나 CoreRT 대신 Mono를 택했나요? 113 | 114 | [Mono](http://www.mono-project.com/)는 Microsoft가 후원하는 .NET Framework의 오픈 소스 구현체입니다. Mono는 [Xamarin](https://www.xamarin.com/) 이 네이티브 클라이언트 앱을 Android, iOS, 그리고 macOS를 만들기 위하여 사용하고 있습니다. 또한 Mono는 [Unity](https://unity3d.com/) 가 게임 개발을 위하여 사용하고 있습니다. Microsoft의 Xamarin 팀은 Mono에 WebAssembly를 추가하기 위한 [계획을 발표하였고,](http://www.mono-project.com/news/2017/08/09/hello-webassembly/) 꾸준히 진행하고 있습니다. \([Mono와 WebAssembly - 정적 컴파일에 관한 소식 1/16/2018](http://www.mono-project.com/news/2018/01/16/mono-static-webassembly-compilation/)\). Blazor는 WebAssembly에 대해 동작하는 클라이언트 측 웹 UI 프레임워크이기 때문에, Mono를 선택하는 것이 가장 적절합니다. 115 | 116 | 반면에, [.NET Core](https://www.microsoft.com/net/learn/get-started/windows)는 주로 서버 앱과 크로스 플랫폼 콘솔 앱에 사용되는 것에 초점이 맞추어져 있습니다. .NET Core는 Blazor 앱을 위한 ASP.NET Core 백엔드를 만들 수 있지만, 클라이언트 앱 그 자체를 만드는 것은 아닙니다. [CoreRT](https://github.com/dotnet/corert)는 AoT 컴파일에 최적화된 .NET Core 런타임이며, WebAssembly에 대한 지원 계획도 가지고는 있지만, 아직 개발이 진행 중이며 완성된 제품이 아닙니다. 117 | 118 | ## "Blazor" 라는 이름은 어디에서 온 것입니까? 119 | 120 | Blazor는 [Razor](https://docs.microsoft.com/aspnet/core/mvc/views/razor?view=aspnetcore-2.1)라는 HTML과 C\#을 위한 마크업 언어를 매우 많이 사용합니다. **즉, Browser + Razor = Blazor 입니다!** 발음할 때에도, 패션, 스타일, 그리고 프로그래밍 언어에 대한 탁월한 감각을 지닌 힙스터들이 즐겨 입는 멋진 재킷의 이름과도 비슷합니다. 121 | 122 | -------------------------------------------------------------------------------- /javascript-interop.md: -------------------------------------------------------------------------------- 1 | # 자바스크립트 연동 2 | 3 | `노트: Blazor는 아직 기술 지원이 제공되지 않는 실험용 웹 프레임워크로, 실무 개발에 사용되어서는 안됩니다.` 4 | 5 | Blazor 앱에서는 .NET에서 자바스크립트 함수를 호출하고 자바스크립트 코드에서 .NET 메서드를 호출할 수 있습니다. 6 | 7 | ### .NET 메서드에서 자바스크립트 함수 호출 8 | 9 | Blazor .NET 코드에서 JavaScript 함수를 호출해야하는 경우가 있습니다. 예를 들어, 자바스크립트 호출(call)을 통해 브라우저 기능을 노출하거나 자바스크립트 라이브러리의 기능을 Blazor 앱으로 노출시킬 수 있습니다. 10 | 11 | .NET에서 자바스크립트를 호출하려면 `JSRuntime.Current`에서 액세스할 수 있는 `IJSRuntime` 추상화를 사용하십시오. `IJSRuntime`의 `InvokeAsync `메소드는 여러 개의 JSON 직렬화가능(serializable) 인수와 함께 호출하고자하는 자바스크립트 함수의 식별자 갖습니다. 함수 식별자는 전역 범위 \ (`window` \)에 따라 달라집니다. `window.someScope.someFunction`을 호출하려면 식별자는 someScope.someFunction이 됩니다. 함수가 호출되기 전에는 함수를 등록할 필요가 없습니다. 또한 반환 유형 'T'는 JSON을 직렬화 할 수 있어야합니다. 12 | 13 | 셈플 앱에서 다음 두 가지의 자바스크립트 함수를 클라이언트 측 앱에 사용하여 사용자의 입력을 받고 환영 인사말을 표시하기 위해 DOM과 상호작용도록 합니다. 14 | 15 | * `showPrompt` – 사용자의 입력\(사용자의 이름\)을 받기위한 프롬프트를 생성하고 호출자에게 해당 이름을 반환합니다. 16 | * `displayWelcome` – 호출자의 환영 인사말을 `id`가 `welcome`인 DOM 객체에 할당합니다. 17 | 18 | _wwwroot/exampleJsInterop.js_ 는 다음과 같습니다. 19 | 20 | ```text 21 | window.exampleJsFunctions = { 22 | showPrompt: function (text) { 23 | return prompt(text, 'Type your name here'); 24 | }, 25 | displayWelcome: function (welcomeMessage) { 26 | document.getElementById('welcome').innerText = welcomeMessage; 27 | }, 28 | returnArrayAsyncJs: function () { 29 | DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync') 30 | .then(data => { 31 | data.push(4); 32 | console.log(data); 33 | }) 34 | }, 35 | sayHello: function (dotnetHelper) { 36 | return dotnetHelper.invokeMethodAsync('SayHello') 37 | .then(r => console.log(r)); 38 | } 39 | }; 40 | ``` 41 | 42 | 다음과 같이 자바스크립트 파일을 참조하는 ` 59 | 60 | 61 | 62 | 63 | ``` 64 | 65 | 스크립트 태그는 동적으로 업데이트 되지 않으므로 컴포넌트 파일에 스크립트 태그를 추가하지 마십시오. 66 | 67 | .NET 메소드에서는 `IJSRuntime`의 `InvokeAsync`메소드를 호출하여 자바스크립트 함수를 연동합니다. 68 | 69 | 예제 앱에서는 두 개의 C\# 메소드, `Prompt`와 `Display`를 사용하여 `showPrompt`와 `displayWelcome` 자바스크립트 함수를 다음과 같이 호출합니다. 70 | 71 | _JsInteropClasses/ExampleJsInterop.cs_ 는 다음과 같습니다. 72 | 73 | ```text 74 | public class ExampleJsInterop 75 | { 76 | public static Task Prompt(string text) 77 | { 78 | // showPrompt는 wwwroot/exampleJsInterop.js에 구현됩니다. 79 | return JSRuntime.Current.InvokeAsync( 80 | "exampleJsFunctions.showPrompt", 81 | text); 82 | } 83 | 84 | public static Task Display(string welcomeMessage) 85 | { 86 | // displayWelcome는 wwwroot/exampleJsInterop.js에 구현됩니다. 87 | return JSRuntime.Current.InvokeAsync( 88 | "exampleJsFunctions.displayWelcome", 89 | welcomeMessage); 90 | } 91 | 92 | public static Task CallHelloHelperSayHello(string name) 93 | { 94 | // sayHello는 wwwroot/exampleJsInterop.js에 구현됩니다. 95 | return JSRuntime.Current.InvokeAsync

ERP Master 3000

Master Data Management

Customer Maintenance

@Title

Blazor routing

Blazor is @Text!

The user Id is @Id!

...

JavaScript Interop

Invoke JavaScript functions from .NET methods

Counter

Counter!!

Hello, world!

Todo

Todo

Todo

Todo

Todo (@todos.Where(todo => !todo.IsDone).Count())

Todo (@todos.Where(todo => !todo.IsDone).Count())

` 요소의 내용으로 `_headingText` 변수 사용 19 | 20 | ```text 21 |

@_headingText

Parent-child example

Parent-child example

Parent Component

Child Component

Parent Component

Child Component

Parent Component

Child Component

Blazor routing

Blazor is @Text!

@BlazorRocksText