Program.cs
이 파일에는 두 프로젝트 유형(예: Blazor WebAssembly 및 Blazor Server)의 진입점인 Main() 메서드가 포함되어 있습니다.
Blazor 서버 프로젝트에서 Main() 메서드는 ASP.NET Core 호스트를 설정하는 CreateHostBuilder() 메서드를 호출합니다.
Blazor WebAssembly 프로젝트에서 애플리케이션의 루트 구성 요소인 App 구성 요소는 Main 메서드에 지정됩니다. 이 루트 구성 요소는 App.razor 파일의 루트 프로젝트 폴더에 있습니다.
구성 요소는 Blazor 애플리케이션의 빌딩 블록입니다. 다음 비디오에서 효과적이고 재사용 가능한 블레이저 구성 요소를 구축하는 데 알아야 할 모든 것을 논의할 것입니다. 지금은 App 구성 요소가 응용 프로그램의 루트 구성 요소라는 것을 이해하십시오.
wwwroot
두 프로젝트 유형 모두에 대해 이 폴더에는 images, stylesheets 등과 같은 정적 파일이 포함됩니다.
App.razor
응용 프로그램의 루트 구성 요소입니다. 기본 제공 라우터 구성 요소를 사용하고 클라이언트 측 라우팅을 설정합니다. 브라우저 탐색을 가로채고 요청된 주소와 일치하는 페이지를 렌더링하는 것은 이 라우터 구성 요소입니다. 라우터는 일치 항목이 발견될 때 콘텐츠를 표시하기 위해 Found 속성을 사용합니다. 일치하는 항목이 없으면 NotFound 속성이 메시지를 표시하는 데 사용됩니다. 죄송합니다. 이 주소에는 아무것도 없습니다.
Pages folder
이 폴더에는 _Host razor 페이지와 Blazor 앱을 구성하는 라우팅 가능한 구성 요소가 포함되어 있습니다. 구성 요소의 확장자는 .razor입니다.
- Index component (Index.razor) – 루트 애플리케이션 URL로 이동할 때 렌더링됩니다.
- Counter component (Counter.razor) – /counter 경로로 이동할 때 렌더링됩니다.
- FetchData component (FetchData.razor) – /fetchdata 경로로 이동할 때 렌더링됩니다.
- Error component (Error.razor) – blazor 앱에서 처리되지 않은 예외가 발생할 때 렌더링됩니다.
Shared folder
공유 구성 요소를 포함합니다.
MainLayout (MainLayout.razor)
애플리케이션의 기본 레이아웃 구성 요소
NavMenu (NavMenu.razor)
사이드바에 탐색 메뉴를 구현합니다. NavLink 구성 요소는 인덱스, 카운터 및 가져오기 데이터 구성 요소와 같은 다른 Razor 구성 요소에 대한 탐색 링크를 렌더링합니다. 이 NavLink 구성 요소는 해당 구성 요소가 현재 표시된 경우 탐색 메뉴 항목을 강조 표시할 만큼 충분히 지능적입니다.
_Imports.razor
이는 asp.net 핵심 MVC 프로젝트의 _ViewImports.cshtml 파일과 같습니다. 이 파일에는 공통 네임스페이스가 포함되어 있으므로 모든 razor 구성 요소에 포함할 필요가 없습니다.
wwwroot/index.html
Blazor WebAssembly 프로젝트의 루트 페이지이며 html 페이지로 구현됩니다. 첫 번째 요청이 애플리케이션에 도달하면 처음 제공되는 것은 이 페이지입니다. 표준 HTML, HEAD 및 BODY 태그가 있습니다. 루트 애플리케이션 구성 요소 App.razor가 렌더링되어야 하는 위치를 지정합니다. 이 App.razor 루트 구성 요소는 루트 프로젝트 폴더에서 찾을 수 있습니다. HTML 요소 <app>로 페이지에 포함됩니다.
index.html 페이지는 blazor WebAssembly JavaScript 파일(_framework/blazor.webassembly.js)도 로드합니다. 다운로드를 담당하는 파일입니다.
- 컴파일된 blazor 애플리케이션, 종속성 및 .NET 런타임
- 또한 브라우저에서 blazor 앱을 실행하기 위해 런타임을 초기화합니다.
Startup.cs
이 파일은 Blazor 서버 프로젝트에만 있습니다. 이름에서 알 수 있듯이 여기에는 응용 프로그램의 시작 논리가 포함됩니다. Startup 클래스에는 다음 두 가지 메서드가 포함되어 있습니다.
ConfigureServices – 응용 프로그램 DI 즉 종속성 주입 서비스를 구성합니다. 예를 들어 AddServerSideBlazor() 메서드는 Blazor 서버 측 서비스를 추가합니다. IServiceCollection 인터페이스에는 Add라는 단어로 시작하는 여러 메서드가 있습니다. 이러한 메서드는 Blazor 애플리케이션에 대해 다른 서비스를 추가합니다. DI 컨테이너에 자체 서비스를 추가할 수도 있습니다. 우리는 앞으로 나올 비디오에서 이것을 실제로 보게 될 것입니다.
Configure -앱의 요청 처리 파이프라인을 구성합니다. Blazor 애플리케이션이 수행할 수 있는 작업에 따라 요청 처리 파이프라인에서 해당 미들웨어 구성 요소를 추가하거나 제거합니다. 예를 들어 UseStaticFiles() 메서드는 이미지, css 등과 같은 정적 파일을 서버할 수 있는 미들웨어 구성 요소를 추가합니다.
MapBlazorHub는 클라이언트 브라우저와의 SignalR 연결을 위한 엔드포인트를 설정합니다.
Pages/_Host.cshtml
이것은 응용 프로그램의 루트 페이지이며 MapFallbackToPage(“/_Host”) 메서드를 호출하여 지정됩니다. razor 페이지로 구현됩니다.
첫 번째 요청이 애플리케이션에 적중할 때 처음 제공되는 페이지는 이 페이지입니다. 표준 HTML, HEAD 및 BODY 태그가 있습니다. 또한 루트 애플리케이션 구성 요소인 App 구성 요소(App.razor)를 렌더링해야 하는 위치도 지정합니다. 마지막으로 서버와 클라이언트 브라우저 간의 실시간 SignalR 연결을 설정하는 blazor.server.js JavaScript 파일도 로드합니다. 이 연결은 클라이언트와 서버 간에 정보를 교환하는 데 사용됩니다. SignalR은 실시간 웹 기능을 앱에 추가하기 위한 훌륭한 프레임워크입니다.
Data folder (Blazor Server)
샘플 WeatherForecast 서비스와 관련된 코드 파일을 포함합니다.
appsettings.json (Blazor Server)
이 파일을 사용하여 구성 설정을 저장합니다.