ASP.NET Core Blazor 프로젝트 구조

  • 아티클

참고 항목

이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

Important

이 정보는 상업적으로 출시되기 전에 실질적으로 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적, 또는 묵시적인 보증을 하지 않습니다.

현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

이 문서에서는 Blazor 프로젝트 템플릿에서 생성된 Blazor 앱을 구성하는 파일과 폴더를 설명합니다.

Blazor 웹앱

Blazor 웹앱 프로젝트 템플릿: blazor

웹앱 프로젝트 템플릿은 Blazor 구성 요소를 사용하여 Razor 서버 쪽 렌더링 및 클라이언트 쪽 렌더링된 모든 스타일의 웹 UI를 빌드하기 위한 단일 시작점을 제공합니다. 기존 Blazor Server 및 호스팅 모델의 장점과 Blazor WebAssembly 서버 쪽 렌더링, 스트리밍 렌더링, 향상된 탐색 및 양식 처리, 구성 요소별로 또는 Blazor WebAssembly 구성 요소별로 상호 작용 Blazor Server 을 추가하는 기능을 결합합니다.

앱 생성 시 CSR(클라이언트 쪽 렌더링)과 대화형 서버 쪽 렌더링(대화형 SSR)을 모두 선택한 경우 프로젝트 템플릿은 대화형 자동 렌더링 모드를 사용합니다. 자동 렌더링 모드는 처음에 대화형 SSR을 사용하는 반면 .NET 앱 번들 및 런타임은 브라우저에 다운로드됩니다. .NET WebAssembly 런타임이 활성화되면 렌더링이 CSR로 전환됩니다.

기본적으로 웹앱 템플릿은 Blazor 단일 프로젝트를 사용하여 정적 및 대화형 서버 쪽 렌더링을 모두 사용하도록 설정합니다. Interactive WebAssembly 렌더링을 사용하도록 설정하면 프로젝트에 WebAssembly 기반 구성 요소에 대한 추가 클라이언트 프로젝트(.Client)가 포함됩니다. 클라이언트 프로젝트의 빌드된 출력은 브라우저에 다운로드되고 클라이언트에서 실행됩니다. Interactive WebAssembly 또는 대화형 자동 렌더링 모드를 사용하는 구성 요소는 프로젝트에 있어야 .Client 합니다.

자세한 내용은 ASP.NET Core Blazor 렌더링 모드를 참조하세요.

  • 서버 프로젝트:

    • Components 폴더:

      • Layout 폴더: 다음 레이아웃 구성 요소 및 스타일시트를 포함합니다.

        • MainLayout 구성 요소(MainLayout.razor): 앱의 레이아웃 구성 요소
        • MainLayout.razor.css: 앱의 기본 레이아웃에 대한 스타일시트입니다.
        • NavMenu 구성 요소(NavMenu.razor): 사이드바 탐색을 구현합니다. 다른 Razor 구성 요소의 탐색 링크를 렌더링하는 NavLink 구성 요소(NavLink)를 포함합니다. NavLink 구성 요소는 현재 표시되는 구성 요소를 사용자에게 나타냅니다.
        • NavMenu.razor.css: 앱의 탐색 메뉴에 대한 스타일시트입니다.

      • Pages 폴더: 앱의 라우팅 가능한 서버 쪽 Razor 구성 요소(.razor)를 포함합니다. 각 페이지에 대한 경로는 @page 지시어를 사용하여 지정합니다. 이 템플릿은 다음을 포함합니다.

        • Counter구성 요소(Counter.razor): 카운터 페이지를 구현합니다.
        • Error구성 요소(Error.razor): 오류 페이지를 구현합니다.
        • Home 구성 요소(Home.razor): Home 페이지를 구현합니다.
        • Weather구성 요소(Weather.razor): 날씨 예측 페이지를 구현합니다.

      • App구성 요소(): HTML <head> 태그, 구성 요소 및<script>Blazor태그가 있는 앱의 Routes 루트 구성 요소App.razor입니다. 루트 구성 요소는 앱이 로드하는 첫 번째 구성 요소입니다.

      • Routes 구성 요소(Routes.razor): 구성 요소를 사용하여 라우팅을 Router 설정합니다. 클라이언트 쪽 대화형 구성 요소의 Router 경우 구성 요소는 브라우저 탐색을 가로채 요청된 주소와 일치하는 페이지를 렌더링합니다.

      • _Imports.razor: 네임스페이스에 대한 지시문과 같이 @using 서버 렌더링 앱 구성 요소().razor에 포함할 공통 Razor 지시문을 포함합니다.

    • Properties폴더: 파일에 개발 환경 구성을 저장합니다launchSettings.json.

      참고 항목

      프로필은 http 파일의 https 프로필 앞에 섰습니다 launchSettings.json . .NET CLI를 사용하여 앱을 실행하면 첫 번째 프로필이 발견되었기 때문에 앱이 httpHTTP 엔드포인트에서 실행됩니다. 프로필 순서를 사용하면 Linux 및 macOS 사용자를 위한 HTTPS 채택을 쉽게 전환할 수 있습니다. 명령에 또는 옵션을 전달 -lp https 하지 않고 .NET CLI를 사용하여 앱을 시작하려는 경우 파일의 http 프로필 위에 프로필을 배치 https 하기만 하면 dotnet run 됩니다.--launch-profile https

    • wwwroot 폴더: 앱의 공용 정적 자산을 포함하는 서버 프로젝트의 웹 루트 폴더입니다.

    • Program.cs 파일: ASP.NET Core 웹 애플리케이션 호스트 를 설정하고 서비스 등록, 구성, 로깅 및 요청 처리 파이프라인을 비롯한 앱의 시작 논리를 포함하는 서버 프로젝트의 진입점입니다.

    • 앱 설정 파일(appsettings.Development.json, appsettings.json): 서버 프로젝트에 대한 구성 설정을 제공합니다.

  • 클라이언트 프로젝트(.Client):

    • Pages 폴더: 앱의 라우팅 가능한 클라이언트 쪽 Razor 구성 요소(.razor)를 포함합니다. 각 페이지에 대한 경로는 @page 지시어를 사용하여 지정합니다. 템플릿에는 카운터 페이지를 구현하는 구성 요소(Counter.razor)가 포함됩니다Counter.

      기본 프로젝트는 표준 ASP.NET Core 프로젝트이므로 프로젝트의 구성 요소 .Client 폴더 구조는 Web App의 기본 프로젝트 폴더 구조와 다릅니다Blazor. 기본 프로젝트는 관련이 없는 BlazorASP.NET Core 프로젝트의 다른 자산을 고려해야 합니다.

      이 .Client 프로젝트는 순전히 Blazor 프로젝트이며 ASP.NET Core의 비기능Blazor 및 사양과 통합할 필요가 없으므로 덜 복잡한 구성 요소 폴더 구조를 사용합니다. 그러나 프로젝트에서 원하는 .Client 구성 요소 폴더 구조를 사용할 수 있습니다. 원하는 경우 프로젝트에서 기본 프로젝트의 .Client 구성 요소 폴더 레이아웃을 미러 수 있습니다. 프로젝트 템플릿에서 사용하는 것과 다른 폴더로 구성 요소를 이동하는 경우 네임스페이스는 레이아웃 파일과 같은 자산에 대한 조정이 필요할 수 있습니다.

    • 클라이언트 쪽 프로젝트에 대한 구성 설정을 제공하는 앱 설정 파일(appsettings.Development.jsonappsettings.json, )을 포함하여 앱의 공용 정적 자산을 포함하는 클라이언트 쪽 프로젝트의 웹 루트 폴더입니다.

    • Program.cs 파일: WebAssembly 호스트 를 설정하고 서비스 등록, 구성, 로깅 및 요청 처리 파이프라인을 포함하여 프로젝트의 시작 논리를 포함하는 클라이언트 쪽 프로젝트의 진입점입니다.

    • _Imports.razor: WebAssembly 렌더링 앱 구성 요소(예: 네임스페이스에 대한 지시문).razor@using에 포함할 공통 Razor 지시문을 포함합니다.

추가 옵션이 구성되면 추가 파일 및 폴더가 웹앱 프로젝트 템플릿에서 생성된 앱에 Blazor 나타날 수 있습니다. 예를 들어 ASP.NET Core Identity로 앱을 생성하면 인증 및 권한 부여 기능에 대한 추가 자산이 포함됩니다.

Blazor Server

Blazor Server 프로젝트 템플릿: blazorserver, blazorserver-empty

Blazor Server 템플릿은 Blazor Server 앱의 초기 파일 및 디렉터리 구조를 만듭니다.

  • 템플릿을 blazorserver 사용하는 경우 앱은 다음으로 채워집니다.
    • 기상 예측 서비스(WeatherForecastService)에서 데이터를 로드하는 FetchData 구성 요소의 데모 코드 및 Counter 구성 요소와의 사용자 상호 작용.
    • 부트스트랩 프런트 엔드 도구 키트.
  • blazorserver-empty 템플릿을 사용하는 경우 데모 코드 및 부트스트랩 없이 앱이 만들어집니다.

프로젝트 구조:

  • Data폴더: 앱 FetchData 의 WeatherForecastService 구성 요소에 WeatherForecast 예제 날씨 데이터를 제공하는 클래스 및 구현을 포함합니다.

  • Pages폴더: 앱의 라우팅 가능한 Razor 구성 요소(.razor) 및 앱의 Blazor Server 루트 Razor 페이지를 포함합니다Blazor. 각 페이지에 대한 경로는 @page 지시어를 사용하여 지정합니다. 이 템플릿은 다음을 포함합니다.

    • _Host.cshtml: 페이지로 구현된 앱의 루트 페이지입니다 Razor .
      • 앱의 페이지를 처음 요청되면 이 페이지가 렌더링되어 응답으로 반환됩니다.
      • 이 호스트 페이지는 루트 App 구성 요소(App.razor)가 렌더링되는 위치를 지정합니다.
    • 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)를 설정하고 탐색을 사용하도록 설정하기 위해 호출됩니다.

추가 옵션이 구성되면 Blazor Server 프로젝트 템플릿에서 생성된 앱에 추가 파일 및 폴더가 나타날 수 있습니다. 예를 들어 ASP.NET Core Identity로 앱을 생성하면 인증 및 권한 부여 기능에 대한 추가 자산이 포함됩니다.

Blazor Server 프로젝트 템플릿: blazorserver

Blazor Server 템플릿은 Blazor Server 앱의 초기 파일 및 디렉터리 구조를 만듭니다. 이 앱은 등록된 서비스에서 데이터를 로드하는 FetchData 구성 요소의 데모 코드, WeatherForecastService, Counter 구성 요소와의 사용자 상호 작용으로 채워집니다.

  • Data폴더: 앱 FetchData 의 WeatherForecastService 구성 요소에 WeatherForecast 예제 날씨 데이터를 제공하는 클래스 및 구현을 포함합니다.

  • Pages폴더: 앱의 라우팅 가능한 Razor 구성 요소(.razor) 및 앱의 Blazor Server 루트 Razor 페이지를 포함합니다Blazor. 각 페이지에 대한 경로는 @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)를 설정하고 탐색을 사용하도록 설정하기 위해 호출됩니다.

추가 옵션이 구성되면 Blazor Server 프로젝트 템플릿에서 생성된 앱에 추가 파일 및 폴더가 나타날 수 있습니다. 예를 들어 ASP.NET Core Identity로 앱을 생성하면 인증 및 권한 부여 기능에 대한 추가 자산이 포함됩니다.

Blazor Server 프로젝트 템플릿: blazorserver

Blazor Server 템플릿은 Blazor Server 앱의 초기 파일 및 디렉터리 구조를 만듭니다. 이 앱은 등록된 서비스에서 데이터를 로드하는 FetchData 구성 요소의 데모 코드, WeatherForecastService, Counter 구성 요소와의 사용자 상호 작용으로 채워집니다.

  • Data폴더: 앱 FetchData 의 WeatherForecastService 구성 요소에 WeatherForecast 예제 날씨 데이터를 제공하는 클래스 및 구현을 포함합니다.

  • Pages폴더: 앱의 라우팅 가능한 Razor 구성 요소(.razor) 및 앱의 Blazor Server 루트 Razor 페이지를 포함합니다Blazor. 각 페이지에 대한 경로는 @page 지시어를 사용하여 지정합니다. 이 템플릿은 다음을 포함합니다.

    • _Host.cshtml: 페이지로 구현된 앱의 루트 페이지입니다 Razor .
      • 앱의 페이지를 처음 요청되면 이 페이지가 렌더링되어 응답으로 반환됩니다.
      • 이 호스트 페이지는 루트 App 구성 요소(App.razor)가 렌더링되는 위치를 지정합니다.
    • 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 호스트를 설정하는 앱의 진입점입니다.

  • Startup.cs: 앱의 시작 논리를 포함합니다. Startup 클래스는 다음 두 가지 메서드를 정의합니다.

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

추가 옵션이 구성되면 Blazor Server 프로젝트 템플릿에서 생성된 앱에 추가 파일 및 폴더가 나타날 수 있습니다. 예를 들어 ASP.NET Core Identity로 앱을 생성하면 인증 및 권한 부여 기능에 대한 추가 자산이 포함됩니다.

Blazor Server 프로젝트 템플릿: blazorserver

Blazor Server 템플릿은 Blazor Server 앱의 초기 파일 및 디렉터리 구조를 만듭니다. 이 앱은 등록된 서비스에서 데이터를 로드하는 FetchData 구성 요소의 데모 코드, WeatherForecastService, Counter 구성 요소와의 사용자 상호 작용으로 채워집니다.

  • Data폴더: 앱 FetchData 의 WeatherForecastService 구성 요소에 WeatherForecast 예제 날씨 데이터를 제공하는 클래스 및 구현을 포함합니다.

  • Pages폴더: 앱의 라우팅 가능한 Razor 구성 요소(.razor) 및 앱의 Blazor Server 루트 Razor 페이지를 포함합니다Blazor. 각 페이지에 대한 경로는 @page 지시어를 사용하여 지정합니다. 이 템플릿은 다음을 포함합니다.

    • _Host.cshtml: 페이지로 구현된 앱의 루트 페이지입니다 Razor .
      • 앱의 페이지를 처음 요청되면 이 페이지가 렌더링되어 응답으로 반환됩니다.
      • 이 호스트 페이지는 루트 App 구성 요소(App.razor)가 렌더링되는 위치를 지정합니다.
    • Counter 구성 요소(Counter.razor): 카운터 페이지를 구현합니다.
    • Error 구성 요소(Error.razor): 앱에서 처리되지 않은 예외가 발생할 때 렌더링됩니다.
    • FetchData 구성 요소(FetchData.razor): 데이터 가져오기 페이지를 구현합니다.
    • Index 구성 요소(Index.razor): Home 페이지를 구현합니다.

  • Properties폴더: 파일에 개발 환경 구성을 저장합니다launchSettings.json.

  • Shared 폴더: 다음 공유 구성 요소를 포함합니다.

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

  • wwwroot 폴더: 앱의 공용 정적 자산을 포함하는 앱의 웹 루트 폴더입니다.

  • _Imports.razor: 네임스페이스에 대한 지시문과 같이 @using 앱의 구성 요소().razor에 포함할 공통 Razor 지시문을 포함합니다.

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

  • appsettings.json 및 환경 앱 설정 파일: 앱에 대한 구성 설정을 제공합니다.

  • Program.cs: ASP.NET Core 호스트를 설정하는 앱의 진입점입니다.

  • Startup.cs: 앱의 시작 논리를 포함합니다. Startup 클래스는 다음 두 가지 메서드를 정의합니다.

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

추가 옵션이 구성되면 Blazor Server 프로젝트 템플릿에서 생성된 앱에 추가 파일 및 폴더가 나타날 수 있습니다. 예를 들어 ASP.NET Core Identity로 앱을 생성하면 인증 및 권한 부여 기능에 대한 추가 자산이 포함됩니다.

독립 실행형 Blazor WebAssembly

독립 실행형 Blazor WebAssembly 프로젝트 템플릿: blazorwasm

템플릿은 Blazor WebAssembly 독립 실행형 Blazor WebAssembly 앱에 대한 초기 파일 및 디렉터리 구조를 만듭니다.

  • 템플릿을 blazorwasm 사용하는 경우 앱은 다음으로 채워집니다.
    • 정적 자산(weather.json)에서 데이터를 로드하는 Weather 구성 요소의 데모 코드 및 Counter 구성 요소와의 사용자 상호 작용.
    • 부트스트랩 프런트 엔드 도구 키트.
  • blazorwasm 샘플 페이지 및 스타일 지정 없이 템플릿을 생성할 수도 있습니다.

프로젝트 구조:

  • Layout 폴더: 다음 레이아웃 구성 요소 및 스타일시트를 포함합니다.

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

  • Pages폴더: 앱의 라우팅 가능한 Razor 구성 요소(.razor)를 포함합니다Blazor. 각 페이지에 대한 경로는 @page 지시어를 사용하여 지정합니다. 이 템플릿은 다음 구성 요소를 포함합니다.

    • Counter 구성 요소(Counter.razor): 카운터 페이지를 구현합니다.
    • Index 구성 요소(Index.razor): Home 페이지를 구현합니다.
    • Weather 구성 요소(Weather.razor): 날씨 페이지를 구현합니다.

  • _Imports.razor: 네임스페이스에 대한 지시문과 같이 @using 앱의 구성 요소().razor에 포함할 공통 Razor 지시문을 포함합니다.

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

  • Properties폴더: 파일에 개발 환경 구성을 저장합니다launchSettings.json.

    참고 항목

    프로필은 http 파일의 https 프로필 앞에 섰습니다 launchSettings.json . .NET CLI를 사용하여 앱을 실행하면 첫 번째 프로필이 발견되었기 때문에 앱이 httpHTTP 엔드포인트에서 실행됩니다. 프로필 순서를 사용하면 Linux 및 macOS 사용자를 위한 HTTPS 채택을 쉽게 전환할 수 있습니다. 명령에 또는 옵션을 전달 -lp https 하지 않고 .NET CLI를 사용하여 앱을 시작하려는 경우 파일의 http 프로필 위에 프로필을 배치 https 하기만 하면 dotnet run 됩니다.--launch-profile https

  • wwwroot폴더: 구성 설정 및 샘플 날씨 데이터()에 대한 환경 앱 설정 파일을 포함하여 appsettings.json 앱의 공용 정적 자산이sample-data/weather.json 포함된 앱의 웹 루트 폴더입니다. index.html 웹 페이지는 HTML 페이지로 구현된 앱의 루트 페이지입니다.

    • 앱의 페이지를 처음 요청되면 이 페이지가 렌더링되어 응답으로 반환됩니다.
    • 이 페이지는 루트 App 구성 요소가 렌더링되는 위치를 지정합니다. 구성 요소는 app의 id를 사용하는 div DOM 요소(<div id="app">Loading...</div>)의 위치에서 렌더링됩니다.

  • Program.cs: WebAssembly 호스트를 설정하는 앱의 진입점:

    • App 구성 요소는 앱의 루트 구성 요소입니다. App 구성 요소는 app의 id를 사용하여 루트 구성 요소 컬렉션(builder.RootComponents.Add<App>("#app"))에 대한 div DOM 요소(wwwroot/index.html의 <div id="app">Loading...</div>)로 지정됩니다.
    • 서비스가 추가되고 구성됩니다(예: builder.Services.AddSingleton<IMyDependency, MyDependency>()).

추가 옵션이 구성되면 Blazor WebAssembly 프로젝트 템플릿에서 생성된 앱에 추가 파일 및 폴더가 나타날 수 있습니다. 예를 들어 ASP.NET Core Identity로 앱을 생성하면 인증 및 권한 부여 기능에 대한 추가 자산이 포함됩니다.

Blazor WebAssembly

Blazor WebAssembly 프로젝트 템플릿: blazorwasm, blazorwasm-empty

Blazor WebAssembly 템플릿은 Blazor WebAssembly 앱의 초기 파일 및 디렉터리 구조를 만듭니다.

  • 템플릿을 blazorwasm 사용하는 경우 앱은 다음으로 채워집니다.
    • 정적 자산(weather.json)에서 데이터를 로드하는 FetchData 구성 요소의 데모 코드 및 Counter 구성 요소와의 사용자 상호 작용.
    • 부트스트랩 프런트 엔드 도구 키트.
  • blazorwasm-empty 템플릿을 사용하는 경우 데모 코드 및 부트스트랩 없이 앱이 만들어집니다.

프로젝트 구조:

  • Pages폴더: 앱의 라우팅 가능한 Razor 구성 요소(.razor)를 포함합니다Blazor. 각 페이지에 대한 경로는 @page 지시어를 사용하여 지정합니다. 이 템플릿은 다음 구성 요소를 포함합니다.

    • Counter 구성 요소(Counter.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)(.NET 7 이하의 ASP.NET Core): Blazor 설문 조사 구성 요소입니다.

  • wwwroot폴더: 구성 설정에 대한 환경 앱 설정 파일을 포함하여 appsettings.json 앱의 공용 정적 자산을 포함하는 앱의 웹 루트 폴더입니다. index.html 웹 페이지는 HTML 페이지로 구현된 앱의 루트 페이지입니다.

    • 앱의 페이지를 처음 요청되면 이 페이지가 렌더링되어 응답으로 반환됩니다.
    • 이 페이지는 루트 App 구성 요소가 렌더링되는 위치를 지정합니다. 구성 요소는 app의 id를 사용하는 div DOM 요소(<div id="app">Loading...</div>)의 위치에서 렌더링됩니다.

  • _Imports.razor: 네임스페이스에 대한 지시문과 같이 @using 앱의 구성 요소().razor에 포함할 공통 Razor 지시문을 포함합니다.

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

  • Program.cs: WebAssembly 호스트를 설정하는 앱의 진입점:

    • App 구성 요소는 앱의 루트 구성 요소입니다. App 구성 요소는 app의 id를 사용하여 루트 구성 요소 컬렉션(builder.RootComponents.Add<App>("#app"))에 대한 div DOM 요소(wwwroot/index.html의 <div id="app">Loading...</div>)로 지정됩니다.
    • 서비스가 추가되고 구성됩니다(예: builder.Services.AddSingleton<IMyDependency, MyDependency>()).

추가 옵션이 구성되면 Blazor WebAssembly 프로젝트 템플릿에서 생성된 앱에 추가 파일 및 폴더가 나타날 수 있습니다. 예를 들어 ASP.NET Core Identity로 앱을 생성하면 인증 및 권한 부여 기능에 대한 추가 자산이 포함됩니다.

호스트된 Blazor WebAssembly 솔루션에는 다음 ASP.NET Core 프로젝트가 포함됩니다.

  • "Client": Blazor WebAssembly 앱.
  • "Server": 클라이언트에 Blazor WebAssembly 앱 및 날씨 데이터를 제공하는 앱입니다.
  • "Shared": 공통 클래스, 메서드 및 리소스를 유지하는 프로젝트입니다.

솔루션은 ASP.NET Core 호스트 확인란을 선택하거나 .NET CLI의 dotnet new blazorwasm 명령을 사용하는 -ho|--hosted 옵션을 사용하여 Visual Studio의 Blazor WebAssembly 프로젝트 템플릿에서 생성됩니다. 자세한 내용은 ASP.NET Core Blazor 도구를 참조하세요.

호스트된 Blazor Webassembly 솔루션("Client" 프로젝트)의 클라이언트 쪽 앱의 프로젝트 구조는 독립 실행형 Blazor WebAssembly 앱의 프로젝트 구조와 동일합니다. 호스트된 Blazor WebAssembly 솔루션의 추가 파일:

  • "Server" 프로젝트에는 날씨 데이터를 "Client" 프로젝트의 FetchData 구성 요소로 반환하는 Controllers/WeatherForecastController.cs의 일기 예보 컨트롤러가 포함되어 있습니다.
  • "Shared" 프로젝트에는 "Client" 및 "Server" 프로젝트의 날씨 데이터를 나타내는 WeatherForecast.cs의 일기 예보 클래스가 포함되어 있습니다.

Blazor WebAssembly

Blazor WebAssembly 프로젝트 템플릿: blazorwasm

Blazor WebAssembly 템플릿은 Blazor WebAssembly 앱의 초기 파일 및 디렉터리 구조를 만듭니다. 이 앱은 정적 자산에서 데이터를 로드하는 FetchData 구성 요소의 데모 코드, weather.json, Counter 구성 요소와의 사용자 상호 작용으로 채워집니다.

  • Pages폴더: 앱의 라우팅 가능한 Razor 구성 요소(.razor)를 포함합니다Blazor. 각 페이지에 대한 경로는 @page 지시어를 사용하여 지정합니다. 이 템플릿은 다음 구성 요소를 포함합니다.

    • Counter 구성 요소(Counter.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폴더: 구성 설정에 대한 환경 앱 설정 파일을 포함하여 appsettings.json 앱의 공용 정적 자산을 포함하는 앱의 웹 루트 폴더입니다. index.html 웹 페이지는 HTML 페이지로 구현된 앱의 루트 페이지입니다.

    • 앱의 페이지를 처음 요청되면 이 페이지가 렌더링되어 응답으로 반환됩니다.
    • 이 페이지는 루트 App 구성 요소가 렌더링되는 위치를 지정합니다. 구성 요소는 app의 id를 사용하는 div DOM 요소(<div id="app">Loading...</div>)의 위치에서 렌더링됩니다.

  • _Imports.razor: 네임스페이스에 대한 지시문과 같이 @using 앱의 구성 요소().razor에 포함할 공통 Razor 지시문을 포함합니다.

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

  • Program.cs: WebAssembly 호스트를 설정하는 앱의 진입점:

    • App 구성 요소는 앱의 루트 구성 요소입니다. App 구성 요소는 app의 id를 사용하여 루트 구성 요소 컬렉션(builder.RootComponents.Add<App>("#app"))에 대한 div DOM 요소(wwwroot/index.html의 <div id="app">Loading...</div>)로 지정됩니다.
    • 서비스가 추가되고 구성됩니다(예: builder.Services.AddSingleton<IMyDependency, MyDependency>()).

추가 옵션이 구성되면 Blazor WebAssembly 프로젝트 템플릿에서 생성된 앱에 추가 파일 및 폴더가 나타날 수 있습니다. 예를 들어 ASP.NET Core Identity로 앱을 생성하면 인증 및 권한 부여 기능에 대한 추가 자산이 포함됩니다.

호스트된 Blazor WebAssembly 솔루션에는 다음 ASP.NET Core 프로젝트가 포함됩니다.

  • "Client": Blazor WebAssembly 앱.
  • "Server": 클라이언트에 Blazor WebAssembly 앱 및 날씨 데이터를 제공하는 앱입니다.
  • "Shared": 공통 클래스, 메서드 및 리소스를 유지하는 프로젝트입니다.

솔루션은 ASP.NET Core 호스트 확인란을 선택하거나 .NET CLI의 dotnet new blazorwasm 명령을 사용하는 -ho|--hosted 옵션을 사용하여 Visual Studio의 Blazor WebAssembly 프로젝트 템플릿에서 생성됩니다. 자세한 내용은 ASP.NET Core Blazor 도구를 참조하세요.

호스트된 Blazor Webassembly 솔루션("Client" 프로젝트)의 클라이언트 쪽 앱의 프로젝트 구조는 독립 실행형 Blazor WebAssembly 앱의 프로젝트 구조와 동일합니다. 호스트된 Blazor WebAssembly 솔루션의 추가 파일:

  • "Server" 프로젝트에는 날씨 데이터를 "Client" 프로젝트의 FetchData 구성 요소로 반환하는 Controllers/WeatherForecastController.cs의 일기 예보 컨트롤러가 포함되어 있습니다.
  • "Shared" 프로젝트에는 "Client" 및 "Server" 프로젝트의 날씨 데이터를 나타내는 WeatherForecast.cs의 일기 예보 클래스가 포함되어 있습니다.

Blazor WebAssembly

Blazor WebAssembly 프로젝트 템플릿: blazorwasm

Blazor WebAssembly 템플릿은 Blazor WebAssembly 앱의 초기 파일 및 디렉터리 구조를 만듭니다. 이 앱은 정적 자산에서 데이터를 로드하는 FetchData 구성 요소의 데모 코드, weather.json, Counter 구성 요소와의 사용자 상호 작용으로 채워집니다.

  • Pages폴더: 앱의 라우팅 가능한 Razor 구성 요소(.razor)를 포함합니다Blazor. 각 페이지에 대한 경로는 @page 지시어를 사용하여 지정합니다. 이 템플릿은 다음 구성 요소를 포함합니다.

    • Counter 구성 요소(Counter.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폴더: 구성 설정에 대한 환경 앱 설정 파일을 포함하여 appsettings.json 앱의 공용 정적 자산을 포함하는 앱의 웹 루트 폴더입니다. index.html 웹 페이지는 HTML 페이지로 구현된 앱의 루트 페이지입니다.

    • 앱의 페이지를 처음 요청되면 이 페이지가 렌더링되어 응답으로 반환됩니다.
    • 이 페이지는 루트 App 구성 요소가 렌더링되는 위치를 지정합니다. 구성 요소는 app의 id를 사용하는 div DOM 요소(<div id="app">Loading...</div>)의 위치에서 렌더링됩니다.

  • _Imports.razor: 네임스페이스에 대한 지시문과 같이 @using 앱의 구성 요소().razor에 포함할 공통 Razor 지시문을 포함합니다.

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

  • Program.cs: WebAssembly 호스트를 설정하는 앱의 진입점:

    • App 구성 요소는 앱의 루트 구성 요소입니다. App 구성 요소는 app의 id를 사용하여 루트 구성 요소 컬렉션(builder.RootComponents.Add<App>("#app"))에 대한 div DOM 요소(wwwroot/index.html의 <div id="app">Loading...</div>)로 지정됩니다.
    • 서비스가 추가되고 구성됩니다(예: builder.Services.AddSingleton<IMyDependency, MyDependency>()).

추가 옵션이 구성되면 Blazor WebAssembly 프로젝트 템플릿에서 생성된 앱에 추가 파일 및 폴더가 나타날 수 있습니다. 예를 들어 ASP.NET Core Identity로 앱을 생성하면 인증 및 권한 부여 기능에 대한 추가 자산이 포함됩니다.

호스트된 Blazor WebAssembly 솔루션에는 다음 ASP.NET Core 프로젝트가 포함됩니다.

  • "Client": Blazor WebAssembly 앱.
  • "Server": 클라이언트에 Blazor WebAssembly 앱 및 날씨 데이터를 제공하는 앱입니다.
  • "Shared": 공통 클래스, 메서드 및 리소스를 유지하는 프로젝트입니다.

솔루션은 ASP.NET Core 호스트 확인란을 선택하거나 .NET CLI의 dotnet new blazorwasm 명령을 사용하는 -ho|--hosted 옵션을 사용하여 Visual Studio의 Blazor WebAssembly 프로젝트 템플릿에서 생성됩니다. 자세한 내용은 ASP.NET Core Blazor 도구를 참조하세요.

호스트된 Blazor Webassembly 솔루션("Client" 프로젝트)의 클라이언트 쪽 앱의 프로젝트 구조는 독립 실행형 Blazor WebAssembly 앱의 프로젝트 구조와 동일합니다. 호스트된 Blazor WebAssembly 솔루션의 추가 파일:

  • "Server" 프로젝트에는 날씨 데이터를 "Client" 프로젝트의 FetchData 구성 요소로 반환하는 Controllers/WeatherForecastController.cs의 일기 예보 컨트롤러가 포함되어 있습니다.
  • "Shared" 프로젝트에는 "Client" 및 "Server" 프로젝트의 날씨 데이터를 나타내는 WeatherForecast.cs의 일기 예보 클래스가 포함되어 있습니다.

Blazor WebAssembly

Blazor WebAssembly 프로젝트 템플릿: blazorwasm

Blazor WebAssembly 템플릿은 Blazor WebAssembly 앱의 초기 파일 및 디렉터리 구조를 만듭니다. 이 앱은 정적 자산에서 데이터를 로드하는 FetchData 구성 요소의 데모 코드, weather.json, Counter 구성 요소와의 사용자 상호 작용으로 채워집니다.

  • Pages폴더: 앱의 라우팅 가능한 Razor 구성 요소(.razor)를 포함합니다Blazor. 각 페이지에 대한 경로는 @page 지시어를 사용하여 지정합니다. 이 템플릿은 다음 구성 요소를 포함합니다.

    • Counter 구성 요소(Counter.razor): 카운터 페이지를 구현합니다.
    • FetchData 구성 요소(FetchData.razor): 데이터 가져오기 페이지를 구현합니다.
    • Index 구성 요소(Index.razor): Home 페이지를 구현합니다.

  • Properties폴더: 파일에 개발 환경 구성을 저장합니다launchSettings.json.

  • Shared 폴더: 다음 공유 구성 요소를 포함합니다.

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

  • wwwroot폴더: 구성 설정에 대한 환경 앱 설정 파일을 포함하여 appsettings.json 앱의 공용 정적 자산을 포함하는 앱의 웹 루트 폴더입니다. index.html 웹 페이지는 HTML 페이지로 구현된 앱의 루트 페이지입니다.

    • 앱의 페이지를 처음 요청되면 이 페이지가 렌더링되어 응답으로 반환됩니다.
    • 이 페이지는 루트 App 구성 요소가 렌더링되는 위치를 지정합니다. 구성 요소는 app DOM 요소(<app>Loading...</app>)의 위치에서 렌더링됩니다.

  • _Imports.razor: 네임스페이스에 대한 지시문과 같이 @using 앱의 구성 요소().razor에 포함할 공통 Razor 지시문을 포함합니다.

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

  • Program.cs: WebAssembly 호스트를 설정하는 앱의 진입점:

    • App 구성 요소는 앱의 루트 구성 요소입니다. App 구성 요소는 루트 구성 요소 컬렉션(builder.RootComponents.Add<App>("app"))에 대한 app DOM 요소(wwwroot/index.html의 <app>Loading...</app>)로 지정됩니다.
    • 서비스가 추가되고 구성됩니다(예: builder.Services.AddSingleton<IMyDependency, MyDependency>()).

추가 옵션이 구성되면 Blazor WebAssembly 프로젝트 템플릿에서 생성된 앱에 추가 파일 및 폴더가 나타날 수 있습니다. 예를 들어 ASP.NET Core Identity로 앱을 생성하면 인증 및 권한 부여 기능에 대한 추가 자산이 포함됩니다.

호스트된 Blazor WebAssembly 솔루션에는 다음 ASP.NET Core 프로젝트가 포함됩니다.

  • "Client": Blazor WebAssembly 앱.
  • "Server": 클라이언트에 Blazor WebAssembly 앱 및 날씨 데이터를 제공하는 앱입니다.
  • "Shared": 공통 클래스, 메서드 및 리소스를 유지하는 프로젝트입니다.

솔루션은 ASP.NET Core 호스트 확인란을 선택하거나 .NET CLI의 dotnet new blazorwasm 명령을 사용하는 -ho|--hosted 옵션을 사용하여 Visual Studio의 Blazor WebAssembly 프로젝트 템플릿에서 생성됩니다. 자세한 내용은 ASP.NET Core Blazor 도구를 참조하세요.

호스트된 Blazor Webassembly 솔루션("Client" 프로젝트)의 클라이언트 쪽 앱의 프로젝트 구조는 독립 실행형 Blazor WebAssembly 앱의 프로젝트 구조와 동일합니다. 호스트된 Blazor WebAssembly 솔루션의 추가 파일:

  • "Server" 프로젝트에는 날씨 데이터를 "Client" 프로젝트의 FetchData 구성 요소로 반환하는 Controllers/WeatherForecastController.cs의 일기 예보 컨트롤러가 포함되어 있습니다.
  • "Shared" 프로젝트에는 "Client" 및 "Server" 프로젝트의 날씨 데이터를 나타내는 WeatherForecast.cs의 일기 예보 클래스가 포함되어 있습니다.

스크립트의 Blazor 위치

Blazor 스크립트는 ASP.NET Core 공유 프레임워크의 포함 리소스에서 제공됩니다.

Blazor 웹앱 Blazor 에서 스크립트는 파일에 있습니다.Components/App.razor

<script src="_framework/blazor.web.js"></script>

Blazor Server 앱 Blazor 에서 스크립트는 파일에 있습니다.Pages/_Host.cshtml

<script src="_framework/blazor.server.js"></script>

Blazor Server 앱 Blazor 에서 스크립트는 파일에 있습니다.Pages/_Host.cshtml

<script src="_framework/blazor.server.js"></script>

Blazor Server 앱 Blazor 에서 스크립트는 파일에 있습니다.Pages/_Layout.cshtml

<script src="_framework/blazor.server.js"></script>

Blazor Server 앱 Blazor 에서 스크립트는 파일에 있습니다.Pages/_Host.cshtml

<script src="_framework/blazor.server.js"></script>

Blazor WebAssembly 앱 Blazor 에서 스크립트 콘텐츠는 파일에 있습니다.wwwroot/index.html

<script src="_framework/blazor.webassembly.js"></script>

<head> 위치 및 <body> 콘텐츠

웹앱 <head><body> 에서 Blazor 콘텐츠는 파일에 있습니다Components/App.razor.

앱 <head><body> 에서 Blazor Server 콘텐츠는 파일에 있습니다Pages/_Host.cshtml.

앱 <head><body> 에서 Blazor Server 콘텐츠는 파일에 있습니다Pages/_Layout.cshtml.

앱 <head><body> 에서 Blazor Server 콘텐츠는 파일에 있습니다Pages/_Host.cshtml.

앱 <head><body> 에서 Blazor WebAssembly 콘텐츠는 파일에 있습니다wwwroot/index.html.

이중 Blazor Server/Blazor WebAssembly 앱

Blazor Server 앱 또는 Blazor WebAssembly 앱으로 실행할 수 있는 앱을 만드는 한 가지 방법은 모든 앱 논리 및 구성 요소를 RCL(Razor 클래스 라이브러리)에 배치하고 별도의 Blazor Server 프로젝트와 Blazor WebAssembly 프로젝트에서 RCL을 참조하는 것입니다. 호스팅 모델에 따라 구현이 다른 공통 서비스의 경우 RCL에서 서비스 인터페이스를 정의하고 Blazor Server 및 Blazor WebAssembly 프로젝트에서 서비스를 구현합니다.

추가 리소스