Blazor Server Create Project

1. VisualStudio 2022 새 프로젝트  만들기 선택

2. Blzor Server App 선택 Next

 

3. Project name 및 Loacation 설정 Next

 

4. Framework  및 추가 정보 입력  Create

 

5. Project 구성

 

 

wwwroot

앱의 퍼블릭 정적 자산을 포함하는 앱의 wwwroot 폴더

css 폴더와 함께 bootstrap code 들이 들어 있다. 

 

Data

앱의 FetchData 구성 요소에 예제 날씨 데이터를 제공하는 WeatherForecastService 구현과 

WeatherForecast 클래스가 포함되어 있다.

 

Pages

Blazor 앱을 구성하는 라우팅 가능한 구성 요소/페이지(.razor)와

Blazor Server 앱의 루트 Razor 페이지를 포함

각 페이지에 대한 경로는 @page 지시어를 사용하여 지정

 

Shared

공유 구성 요소와 스타일시트가 포함

• MainLayout 구성 요소(MainLayout.razor): 앱의 MainLayout
• MainLayout.razor.css: 앱의 기본 레이아웃용 스타일 시트입니다.
• NavMenu 구성 요소(NavMenu.razor): 사이드바 탐색을 구현합니다.
  다른 Razor 구성 요소의 탐색 링크를 렌더링하는 구성 요소(NavLink)를 포함합니다.
  NavLink 구성 요소는 해당 구성 요소가 로드될 때 선택된 상태를 자동으로 나타내므로
  사용자가 현재 표시되는 구성 요소를 파악하는 데 도움이 됩니다.
• NavMenu.razor.css: 앱의 탐색 메뉴용 스타일 시트입니다.
• SurveyPrompt 구성 요소(SurveyPrompt.razor): Blazor 설문 조사 구성 요소입니다.

_Imports.razor

네임스페이스의 @using 지시문과 같은 앱의 구성 요소(.razor)에 포함할 일반적인 Razor 지시문을 포함합니다.

 

APP.razor

Router 구성 요소를 사용하여 클라이언트 쪽 라우팅을 설정하는 앱의 루트 구성 요소입니다. Router 구성 요소는 브라우저 탐색을 가로채서 요청된 주소와 일치하는 페이지를 렌더링합니다.

 

appsettings.json

앱의 환경 설정 파일

 

Program.cs

ASP.NET Core Program.cs를 설정하고 서비스 등록, 요청 처리 파이프라인 구성 등 앱의 시작 논리를 포함하는 앱의 진입점입니다.

• 앱의 DI(종속성 주입) 서비스를 지정합니다. AddServerSideBlazor를 호출하여 서비스가 추가되고,
  예제 FetchData 구성 요소에서 사용할 수 있도록 서비스 컨테이너에 WeatherForecastService가 추가됩니다.
• 앱의 요청 처리 파이프라인을 구성합니다.
  • MapBlazorHub는 브라우저와의 실시간 연결을 위해 엔드포인트를 설정하도록 호출됩니다. 연결은 애플리케이션에 앱에 실시간 웹 기능을 추가하기 위한 프레임워크인 SignalR를 사용하여 만들어집니다.
  • MapFallbackToPage("/_Host")는 앱의 루트 페이지(Pages/_Host.cshtml)를 설정하고 탐색을 사용하도록 설정하기 위해 호출됩니다.

 

관련영상

https://youtu.be/w46drCZzKCc