[Blazor] Blazor Server 프로젝트 구조

Blazor Server 프로젝트 구조

Blazor Server

• Blazor Server 템플릿은 Blazor Server 앱의 초기 파일 및 디렉터리 구조를 만듭니다.
• 이 앱은 등록된 서비스에서 데이터를 로드하는 FetchData 구성 요소의 데모 코드, WeatherForecastService, Counter 구성 요소와의 사용자 상호 작용으로 채워집니니다.
  • Data 폴더 : 앱의 FecthData 구성 요소에 예제 날씨 데이터를 제공하는 WeatherForecastService구현과 WeatherForecase 클래스가 포함되어 있습니다.
  • Pages 폴더: Blazor 앱을 구성하는 라우팅 가능한 구성 요소/페이지(.razor)와 Blazor Server 앱의 루트 Razor 페이지를 포함합니다. 각 페이지에 대한 경로는 @page지시어를 사용하여 지정합니다. 이 템플릿은 다음을 포함합니다.
    • _Host.cshtml: Razor 페이지로 구현된 앱의 루트 페이지:
      • 앱의 페이지를 처음 요청되면 이 페이지가 렌더링되어 응답으로 반환됩니다.
      • 이 호스트 페이지는 루트 App 구성 요소(App.razor)가 렌더링되는 위치를 지정합니다.
    • _Layout.cshtml : 앱의 _Host.cshtml 루트 페이지에 대한 레이아웃 페이지.
    • Counter 구성 요소(Counter.razor): 카운터 페이지를 구현합니다.
    • Error 구성 요소(Error.razor): 앱에서 처리되지 않은 예외가 발생할 때 렌더링됩니다.
    • FetchData 구성 요소(FetchData.razor): 데이터 가져오기 페이지를 구현합니다.
    • Index 구성 요소(Index.razor): Home 페이지를 구현합니다.
  • Properties/launchSettings.json: 개발 환경 구성을 보관합니다.
  • Shared 폴더: 다음 공유 구성 요소와 스타일시트가 포함되어 있습니다.
    • MainLayout 구성 요소(MainLayout.razor): 앱의 레이아웃 구성 요소입니다.
    • MainLayout.razor.css: 앱의 기본 레이아웃용 스타일 시트입니다.
    • NavMenu 구성 요소(NavMenu.razor): 사이드바 탐색을 구현합니다. 다른 Razor 구성 요소의 탐색 링크를 렌더링하는 NavLink 구성 요소(NavLink)를 포함합니다. NavLink 구성 요소는 해당 구성 요소가 로드될 때 선택된 상태를 자동으로 나타내므로 사용자가 현재 표시되는 구성 요소를 파악하는 데 도움이 됩니다.
    • NavMenu.razor.css: 앱의 탐색 메뉴용 스타일 시트입니다.
    • SurveyPrompt 구성 요소(SurveyPrompt.razor): Blazor 설문 조사 구성 요소입니다.
  • wwwroot: 앱의 퍼블릭 정적 자산을 포함하는 앱의 웹 루트 폴더입니다.
  • _Imports.razor: 네임스페이스의 @using 지시문과 같은 앱의 구성 요소(.razor)에 포함할 일반적인 Razor 지시문을 포함합니다.
  • App.razor: Router 구성 요소를 사용하여 클라이언트 쪽 라우팅을 설정하는 앱의 루트 구성 요소입니다. Router 구성 요소는 브라우저 탐색을 가로채서 요청된 주소와 일치하는 페이지를 렌더링합니다.
  • appsettings.json 및 환경 앱 설정 파일: 앱의 구성 설정을 제공합니다.
  • Program.cs: ASP.NET Core 호스트를 설정하고 서비스 등록, 요청 처리 파이프라인 구성 등 앱의 시작 논리를 포함하는 앱의 진입점입니다.
    • 앱의 DI(종속성 주입) 서비스를 지정합니다. AddServerSideBlazor를 호출하여 서비스가 추가되고, 예제 FetchData 구성 요소에서 사용할 수 있도록 서비스 컨테이너에 WeatherForecastService가 추가됩니다.
    • 앱의 요청 처리 파이프라인을 구성합니다.
      • MapBlazorHub는 브라우저와의 실시간 연결을 위해 엔드포인트를 설정하도록 호출됩니다. 연결은 애플리케이션에 앱에 실시간 웹 기능을 추가하기 위한 프레임워크인 SignalR를 사용하여 만들어집니다.
      • MapFallbackToPage("/_Host")는 앱의 루트 페이지(Pages/_Host.cshtml)를 설정하고 탐색을 사용하도록 설정하기 위해 호출됩니다.