ASP.NET Core Blazor 시작

아티클
11/12/2024

참고 항목

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

Warning

이 버전의 ASP.NET Core는 더 이상 지원되지 않습니다. 자세한 내용은 .NET 및 .NET Core 지원 정책을 참조 하세요. 현재 릴리스는 이 문서의 .NET 9 버전을 참조 하세요.

Important

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

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

이 문서에서는 앱 시작 구성에 대해 설명합니다 Blazor .

서버 쪽 개발을 위한 ASP.NET Core 앱 구성에 대한 일반적인 지침은 ASP.NET Core의 구성을 참조 하세요.

시작 프로세스 및 구성

Blazor 시작 프로세스는 자리 표시자가 있는 * 스크립트()blazor.*.js를 통해 Blazor 자동 및 비동기적입니다.

web 의 경우 Blazor Web App
server 앱의 Blazor Server 경우
webassembly 앱의 Blazor WebAssembly 경우

Blazor 시작 프로세스는 자리 표시자가 있는 * 스크립트()blazor.*.js를 통해 Blazor 자동 및 비동기적입니다.

server 앱의 Blazor Server 경우
webassembly 앱의 Blazor WebAssembly 경우

스크립트의 위치는 ASP.NET Core Blazor 프로젝트 구조를 참조하세요.

수동으로 Blazor을 시작하려면 다음을 수행합니다.

Blazor Web App:

Blazor<script> 태그에 autostart="false" 특성 및 값을 추가합니다.
Blazor.start()를 호출하는 스크립트를 Blazor<script> 태그 뒤, 닫는 </body> 태그 안에 배치합니다.
속성에 정적 서버 쪽 렌더링(정적 SSR) 옵션을 배치합니다 ssr .
서버 쪽 Blazor-SignalR 회로 옵션을 속성에 배치합니다 circuit .
클라이언트 쪽 WebAssembly 옵션을 속성에 배치합니다 webAssembly .

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  ...
  Blazor.start({
    ssr: {
      ...
    },
    circuit: {
      ...
    },
    webAssembly: {
      ...
    }
  });
  ...
</script>

독립 실행형 Blazor WebAssembly 및 Blazor Server:

Blazor<script> 태그에 autostart="false" 특성 및 값을 추가합니다.
Blazor.start()를 호출하는 스크립트를 Blazor<script> 태그 뒤, 닫는 </body> 태그 안에 배치합니다.
매개 변수에 Blazor.start() 추가 옵션을 제공할 수 있습니다.

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  ...
  Blazor.start({
    ...
  });
  ...
</script>

앞의 예제 {BLAZOR SCRIPT} 에서 자리 표시자는 스크립트 경로 및 파일 이름입니다 Blazor . 스크립트의 위치는 ASP.NET Core Blazor 프로젝트 구조를 참조하세요.

JavaScript 이니셜라이저

JS(JavaScript) 이니셜라이저는 Blazor 앱 로드 전후에 논리를 실행합니다. JS 이니셜라이저는 다음 시나리오에서 유용합니다.

Blazor 앱 로드 방법 사용자 지정.
Blazor 시작 전에 라이브러리 초기화.
Blazor 설정 구성.

JS 이니셜라이저는 빌드 프로세스의 일부로 검색되고 자동으로 가져옵니다. JS 이니셜라이저를 이용하면 대부분의 경우 RCL(Razor 클래스 라이브러리)을 사용할 때 앱에서 수동으로 스크립트 함수를 트리거하지 않아도 됩니다.

JS 이니셜라이저를 정의하려면 {NAME}.lib.module.js라는 프로젝트에 JS 모듈을 추가합니다. 여기서 {NAME} 자리 표시자는 어셈블리 이름, 라이브러리 이름 또는 패키지 식별자입니다. 프로젝트의 웹 루트(일반적으로 wwwroot 폴더)에 파일을 저장합니다.

의 경우 Blazor Web App:

beforeWebStart(options): 시작하기 전에 Blazor Web App 호출됩니다. 예를 들어 로드 프로세스, beforeWebStart 로깅 수준 및 기타 옵션을 사용자 지정하는 데 사용됩니다. 웹 옵션(options)을 Blazor 받습니다.
afterWebStarted(blazor): 모든 beforeWebStart 약속이 해결된 후에 호출됩니다. 예를 들어 이벤트 afterWebStarted 수신기 및 사용자 지정 이벤트 유형을 등록 Blazor 하는 데 사용할 수 있습니다. 인스턴스는 Blazor 인수(blazor)로 전달 afterWebStarted 됩니다.
beforeServerStart(options, extensions): 첫 번째 서버 런타임이 시작되기 전에 호출됩니다. 게시하는 동안 추가된 SignalR 회로 시작 옵션(options) 및 모든 확장(extensions)을 받습니다.
afterServerStarted(blazor): 첫 번째 대화형 서버 런타임이 시작된 후 호출됩니다.
beforeWebAssemblyStart(options, extensions): Interactive WebAssembly 런타임이 시작되기 전에 호출됩니다. 게시하는 동안 추가된 Blazor 옵션(options) 및 모든 확장(extensions)을 받습니다. 예를 들어 옵션은 사용자 지정 부팅 리소스 로더의 용도를 지정할 수 있습니다.
afterWebAssemblyStarted(blazor): Interactive WebAssembly 런타임이 시작된 후 호출됩니다.

참고 항목

레거시 JS 이니셜라이저(beforeStart, afterStarted)는 기본적으로 .에서 Blazor Web App호출되지 않습니다. 이 옵션을 사용하여 레거시 이니셜라이저를 실행 enableClassicInitializers 하도록 설정할 수 있습니다. 그러나 레거시 이니셜라이저 실행은 예측할 수 없습니다.

<script>
  Blazor.start({ enableClassicInitializers: true });
</script>

, Blazor WebAssembly및 Blazor Hybrid 앱의 경우Blazor Server:

beforeStart(options, extensions): Blazor가 시작되기 전에 호출됩니다. 예를 들어, beforeStart를 사용하여 로딩 프로세스, 로깅 수준, 호스팅 모델과 관련된 기타 옵션을 사용자 지정합니다.
- 클라이언트 쪽에서는 beforeStart 게시 중에 추가된 Blazor 옵션(options) 및 모든 확장(extensions)을 받습니다. 예를 들어 옵션은 사용자 지정 부팅 리소스 로더의 용도를 지정할 수 있습니다.
- 서버 쪽에서 beforeStart 회로 시작 옵션(options)을 수신합니다SignalR.
- 에서 BlazorWebView옵션은 전달되지 않습니다.
afterStarted(blazor): Blazor가 JS에서 호출을 수신할 준비가 된 후에 호출됩니다. 예를 들어, afterStarted는 JS interop 호출을 만들고 사용자 지정 요소를 등록하여 라이브러리를 초기화하는 데 사용됩니다. 인스턴스는 Blazor 인수(blazor)로 전달 afterStarted 됩니다.

추가 .NET WebAssembly 런타임 콜백:

onRuntimeConfigLoaded(config): 부팅 구성을 다운로드할 때 호출됩니다. 런타임이 시작되기 전에 앱이 매개 변수(구성)를 수정할 수 있도록 허용합니다(매개 변수는 원본dotnet.d.ts)MonoConfig.

export function onRuntimeConfigLoaded(config) {
  // Sample: Enable startup diagnostic logging when the URL contains 
  // parameter debug=1
  const params = new URLSearchParams(location.search);
  if (params.get("debug") == "1") {
    config.diagnosticTracing = true;
  }
}

onRuntimeReady({ getAssemblyExports, getConfig }): .NET WebAssembly 런타임이 시작된 후 호출됩니다(매개 변수는 원본dotnet.d.ts)RuntimeAPI.

export function onRuntimeReady({ getAssemblyExports, getConfig }) {
  // Sample: After the runtime starts, but before Main method is called, 
  // call [JSExport]ed method.
  const config = getConfig();
  const exports = await getAssemblyExports(config.mainAssemblyName);
  exports.Sample.Greet();
}

두 콜백 모두 반환할 Promise수 있으며 시작이 계속되기 전에 약속이 대기됩니다.

파일 이름:

JS 이니셜라이저가 프로젝트에서 정적 자산으로 사용되는 경우, {ASSEMBLY NAME}.lib.module.js 형식을 사용합니다. 여기서 {ASSEMBLY NAME} 자리 표시자는 앱의 어셈블리 이름입니다. 예를 들어, 어셈블리 이름이 BlazorSample인 프로젝트에 대해 BlazorSample.lib.module.js 파일 이름을 지정합니다. 앱의 wwwroot 폴더에 파일을 저장합니다.
JS 이니셜라이저가 RCL에서 사용되는 경우, {LIBRARY NAME/PACKAGE ID}.lib.module.js 형식을 사용합니다. 여기서 {LIBRARY NAME/PACKAGE ID} 자리 표시자는 프로젝트의 라이브러리 이름 또는 패키지 식별자입니다. 예를 들어, 패키지 식별자가 RazorClassLibrary1인 RCL에 대해 RazorClassLibrary1.lib.module.js 파일 이름을 지정합니다. 라이브러리의 wwwroot 폴더에 파일을 저장합니다.

의 경우 Blazor Web App:

다음 예제에서는 시작 전후에 사용자 지정 스크립트를 in 및 에 afterWebStartedbeforeWebStart 추가하여 로드하는 이니셜라이저를 <head> 보여 JS 줍니다.

export function beforeWebStart() {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'beforeStartScripts.js');
  document.head.appendChild(customScript);
}

export function afterWebStarted() {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'afterStartedScripts.js');
  document.head.appendChild(customScript);
}

앞의 beforeWebStart 예제에서는 사용자 지정 스크립트가 시작되기 전에 Blazor 로드되도록 보장합니다. 스크립트에서 대기한 약속이 시작되기 전에 Blazor 실행을 완료한다고 보장하지는 않습니다.

, Blazor WebAssembly및 Blazor Hybrid 앱의 경우Blazor Server:

다음 예제에서는 시작 전후에 사용자 지정 스크립트를 in 및 다음에 추가하여 로드하는 이니셜라이저를 <head> afterStartedbeforeStart 보여 JS 줍니다.Blazor

export function beforeStart(options, extensions) {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'beforeStartScripts.js');
  document.head.appendChild(customScript);
}

export function afterStarted(blazor) {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'afterStartedScripts.js');
  document.head.appendChild(customScript);
}

앞의 beforeStart 예제에서는 사용자 지정 스크립트가 시작되기 전에 Blazor 로드되도록 보장합니다. 스크립트에서 대기한 약속이 시작되기 전에 Blazor 실행을 완료한다고 보장하지는 않습니다.

참고 항목

MVC 및 Razor Pages 앱은 JS 이니셜라이저를 자동으로 로드하지 않습니다. 그러나 개발자 코드는 앱의 매니페스트를 페치하고 JS 이니셜라이저의 로드를 트리거하는 스크립트를 포함할 수 있습니다.

이니셜라이저의 JS 예제는 다음 리소스를 참조하세요.

정적 서버 쪽 렌더링을 사용하여 Core Blazor JavaScript ASP.NET(정적 SSR)
JavaScript 앱 및 SPA 프레임워크에서 구성 요소 사용Razor(quoteContainer2예)
ASP.NET Core Blazor 이벤트 처리 (사용자 지정 클립보드 붙여넣기 이벤트 예제)
ASP.NET Core에서 TOTP 인증자 앱에 QR 코드 생성 사용 Blazor Web App
ASP.NET Core GitHub 리포지토리의 기본 테스트 앱(BasicTestApp.lib.module.js)

JavaScript 앱 및 SPA 프레임워크에서 구성 요소 사용Razor(quoteContainer2예)
ASP.NET Core Blazor 이벤트 처리 (사용자 지정 클립보드 붙여넣기 이벤트 예제)
ASP.NET Core 호스팅 Blazor WebAssembly 앱에 대한 배포 레이아웃
ASP.NET Core GitHub 리포지토리의 기본 테스트 앱(BasicTestApp.lib.module.js)

참고 항목

.NET 참조 원본의 설명서 링크는 일반적으로 다음 릴리스의 .NET을 위한 현재 개발을 나타내는 리포지토리의 기본 분기를 로드합니다. 특정 릴리스를 위한 태그를 선택하려면 Switch branches or tags(분기 또는 태그 전환) 드롭다운 목록을 사용합니다. 자세한 내용은 ASP.NET Core 소스 코드(dotnet/AspNetCore.Docs #26205)의 버전 태그를 선택하는 방법을 참조하세요.

라이브러리가 특정 순서로 로드되었는지 확인

사용자 지정 스크립트를 <head> beforeStart 로드해야 하는 순서대로 인에 afterStarted 추가합니다.

다음 예제에서는 이전과 script3.js 이전 script2.js script4.js을 로드합니다script1.js.

export function beforeStart(options, extensions) {
    var customScript1 = document.createElement('script');
    customScript1.setAttribute('src', 'script1.js');
    document.head.appendChild(customScript1);

    var customScript2 = document.createElement('script');
    customScript2.setAttribute('src', 'script2.js');
    document.head.appendChild(customScript2);
}

export function afterStarted(blazor) {
    var customScript1 = document.createElement('script');
    customScript1.setAttribute('src', 'script3.js');
    document.head.appendChild(customScript1);

    var customScript2 = document.createElement('script');
    customScript2.setAttribute('src', 'script4.js');
    document.head.appendChild(customScript2);
}

추가 모듈 가져오기

이니셜라이저 파일의 JS 최상위 import 문을 사용하여 추가 모듈을 가져옵니다.

additionalModule.js:

export function logMessage() {
  console.log('logMessage is logging');
}

이 JS 니셜라이저 파일(.lib.module.js):

import { logMessage } from "/additionalModule.js";

export function beforeStart(options, extensions) {
  ...

  logMessage();
}

맵 가져오기

가져오기 맵 은 ASP.NET Core 및 Blazor.에서 지원됩니다.

문서가 준비되면 Blazor 초기화

다음 예제는 문서가 준비되면 Blazor를 시작합니다.

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    Blazor.start();
  });
</script>

수동 시작의 결과로 생성되는 `Promise`에 연결

JS interop 초기화와 같은 추가 작업을 수행하려면 then을 사용하여 수동 Blazor 앱 시작의 결과로 생성되는 Promise에 연결합니다.

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start().then(function () {
    ...
  });
</script>

참고 항목

라이브러리가 시작된 후 Blazor 추가 작업을 자동으로 실행하려면 JavaScript 이니셜라이저를 사용합니다. 이니셜라이저를 JS 사용하면 라이브러리 소비자가 '수동 시작'에 대한 호출을 연결할 JS 필요가 Blazor없습니다.

클라이언트 쪽 부팅 리소스 로드

앱이 브라우저에 로드되면 앱은 서버에서 부팅 리소스를 다운로드합니다.

앱을 부트스트랩하는 JavaScript 코드
.NET 런타임 및 어셈블리
로캘별 데이터

loadBootResource API를 사용하여 부팅 리소스를 로드하는 방법 사용자 지정 loadBootResource 함수는 기본 제공 부팅 리소스 로드 메커니즘을 재정의합니다. 다음 시나리오에 loadBootResource를 사용합니다.

CDN에서 표준 시간대 데이터 또는 dotnet.wasm과 같은 정적 리소스를 로드합니다.
HTTP 요청을 사용하여 압축된 어셈블리를 로드하고 서버에서 압축된 콘텐츠 페치를 지원하지 않는 호스트의 경우 클라이언트에서 압축을 풉니다.
각 fetch 요청을 새 이름으로 리디렉션하여 리소스 별칭을 다른 이름으로 지정합니다.

참고 항목

외부 소스는 브라우저에서 원본 간 리소스 로드를 허용하는 데 필요한 CORS(원본 간 리소스 공유) 헤더를 반환해야 합니다. CDN은 일반적으로 필요한 헤더를 제공합니다.

loadBootResource 매개 변수는 다음 표에 나와 있습니다.

매개 변수	설명
`type`	리소스의 형식입니다. 가능한 형식은 `assembly`, `pdb`, `dotnetjs`, `dotnetwasm`, `timezonedata`입니다. 사용자 지정 동작의 경우에만 형식을 지정해야 합니다. `loadBootResource`에 지정되지 않은 형식은 기본 로드 동작에 따라 프레임워크에서 로드됩니다. 부팅 리소스()는 `dotnetjs` 기본 로드 동작을 반환하거나 부팅 리소스의 원본에 대한 URI를 `dotnetjs` 반환 `null` 해야`dotnet.*.js` 합니다.
`name`	리소스의 이름입니다.
`defaultUri`	리소스의 상대 또는 절대 URI입니다.
`integrity`	응답에서 예상되는 콘텐츠를 나타내는 무결성 문자열입니다.

loadBootResource 함수는 URI 문자열을 반환하여 로드 프로세스를 재정의할 수 있습니다. 다음 예제에서 bin/Release/{TARGET FRAMEWORK}/wwwroot/_framework의 다음 파일은 https://cdn.example.com/blazorwebassembly/{VERSION}/의 CDN에서 제공됩니다.

dotnet.*.js
dotnet.wasm
표준 시간대 데이터

{TARGET FRAMEWORK} 자리 표시자는 대상 프레임워크 모니커(예: net7.0)입니다. {VERSION} 자리 표시자는 공유 프레임워크 버전(예: 7.0.0)입니다.

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    webAssembly: {
      loadBootResource: function (type, name, defaultUri, integrity) {
        console.log(`Loading: '${type}', '${name}', '${defaultUri}', '${integrity}'`);
        switch (type) {
          case 'dotnetjs':
          case 'dotnetwasm':
          case 'timezonedata':
            return `https://cdn.example.com/blazorwebassembly/{VERSION}/${name}`;
        }
      }
    }
  });
</script>

독립 실행형 Blazor WebAssembly:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      console.log(`Loading: '${type}', '${name}', '${defaultUri}', '${integrity}'`);
      switch (type) {
        case 'dotnetjs':
        case 'dotnetwasm':
        case 'timezonedata':
          return `https://cdn.example.com/blazorwebassembly/{VERSION}/${name}`;
      }
    }
  });
</script>

부팅 리소스에 대한 URL 이상을 사용자 지정하기 위해 loadBootResource 함수는 fetch를 직접 호출하고 결과를 반환할 수 있습니다. 다음 예제에서는 사용자 지정 HTTP 헤더를 아웃바운드 요청에 추가합니다. 기본 무결성 검사 동작을 유지하려면 integrity 매개 변수를 통해 전달합니다.

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    webAssembly: {
      loadBootResource: function (type, name, defaultUri, integrity) {
        if (type == 'dotnetjs') {
          return null;
        } else {
          return fetch(defaultUri, {
            cache: 'no-cache',
            integrity: integrity,
            headers: { 'Custom-Header': 'Custom Value' }
          });
        }
      }
    }
  });
</script>

독립 실행형 Blazor WebAssembly:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      if (type == 'dotnetjs') {
        return null;
      } else {
        return fetch(defaultUri, {
          cache: 'no-cache',
          integrity: integrity,
          headers: { 'Custom-Header': 'Custom Value' }
        });
      }
    }
  });
</script>

함수가 반환null되면 loadBootResource Blazor 리소스에 대한 기본 로드 동작을 사용합니다. 예를 들어 부팅 리소스가 기본 로드 동작을 반환하거나 부팅 리소스의 원본에 대한 dotnetjs URI를 반환해야 하므로 위의 코드는 부팅 리소스(dotnet.*.js)dotnetjs를 반환 null null dotnetjs 합니다.

함수는 loadBootResource 프라미스를 반환할 Response 수도 있습니다. 예제는 ASP.NET Core Blazor WebAssembly 호스트 및 배포를 참조하세요.

자세한 내용은 ASP.NET Core Blazor WebAssembly .NET 런타임 및 앱 번들 캐싱을 참조하세요.

C# 코드의 헤더 제어

다음 방법을 사용하여 C# 코드에서 시작할 때 헤더를 제어합니다.

다음 예제에서는 CSP(콘텐츠 보안 정책) 헤더를 통해 애플리케이션에 CSP를 적용합니다. {POLICY STRING} 자리 표시자는 CSP 정책 문자열입니다.

서버 쪽 및 미리 렌더링된 클라이언트 쪽 시나리오

ASP.NET Core 미들웨어를 사용하여 헤더 컬렉션을 제어합니다.

Program 파일에서:

Startup.cs의 Startup.Configure에서 다음을 수행합니다.

app.Use(async (context, next) =>
{
    context.Response.Headers.Append("Content-Security-Policy", "{POLICY STRING}");
    await next();
});

앞의 예제에서는 인라인 미들웨어를 사용하지만 사용자 지정 미들웨어 클래스를 만들고 파일의 확장 메서드 Program 를 사용하여 미들웨어를 호출할 수도 있습니다. 자세한 내용은 사용자 지정 ASP.NET Core 미들웨어 작성을 참조하세요.

미리 렌더링하지 않고 클라이언트 쪽 개발

StaticFileOptions 단계의 MapFallbackToFile 응답 헤더를 지정하는 OnPrepareResponse 전달입니다.

서버 쪽 Program 파일에서:

Startup.cs의 Startup.Configure에서 다음을 수행합니다.

var staticFileOptions = new StaticFileOptions
{
    OnPrepareResponse = context =>
    {
        context.Context.Response.Headers.Append("Content-Security-Policy", 
            "{POLICY STRING}");
    }
};

...

app.MapFallbackToFile("index.html", staticFileOptions);

CSP에 대한 자세한 내용은 ASP.NET Core Blazor 콘텐츠 보안 정책 적용을 참조하세요.

클라이언트 쪽 로드 진행률 표시기

로드 진행률 표시기는 앱이 정상적으로 로드되고 있으며 로드가 완료될 때까지 사용자가 기다려야 함을 나타내는 사용자에게 앱의 로드 진행률을 표시합니다.

Blazor Web App 로드 진행률

앱에 Blazor WebAssembly 사용되는 로드 진행률 표시기가 프로젝트 템플릿에서 만든 앱에 Blazor Web App 없습니다. 일반적으로 빠른 초기 로드 시간을 위해 서버의 클라이언트 쪽 구성 요소를 미리 렌더링하기 때문에 Blazor Web App대화형 WebAssembly 구성 요소에는 로드 진행률 표시기가 바람직하지 않습니다. 혼합 렌더링 모드 상황의 경우 프레임워크 또는 개발자 코드도 다음과 같은 문제를 방지하기 위해 주의해야 합니다.

동일한 렌더링된 페이지에 여러 로드 표시기를 표시합니다.
.NET WebAssembly 런타임이 로드되는 동안 실수로 미리 렌더링된 콘텐츠를 삭제합니다.

.NET의 향후 릴리스는 프레임워크 기반 로드 진행률 표시기를 제공할 수 있습니다. 그 동안에 사용자 지정 로드 진행률 표시기를 Blazor Web App추가할 수 있습니다.

다음을 LoadingProgress 호출하는 구성 요소를 앱에 .Client 만듭니다 OperatingSystem.IsBrowser.

번 false들이 다운로드되는 동안 및 클라이언트에서 Blazor 런타임이 활성화되기 전에 Blazor 로드 진행률 표시기를 표시합니다.
때 true요청된 구성 요소의 콘텐츠를 렌더링합니다.

다음 데모에서는 템플릿이 제공하는 스타일 수정을 포함하여 템플릿에서 만든 앱에서 Blazor WebAssembly 찾은 로드 진행률 표시기를 사용합니다. 스타일은 구성 요소에 의해 앱의 <head> 콘텐츠에 HeadContent 로드됩니다. 자세한 내용은 ASP.NET Core Blazor 앱의 헤드 콘텐츠 제어를 참조하세요.

LoadingProgress.razor:

@if (!OperatingSystem.IsBrowser())
{
    <HeadContent>
        <style>
            .loading-progress {
                position: relative;
                display: block;
                width: 8rem;
                height: 8rem;
                margin: 20vh auto 1rem auto;
            }

                .loading-progress circle {
                    fill: none;
                    stroke: #e0e0e0;
                    stroke-width: 0.6rem;
                    transform-origin: 50% 50%;
                    transform: rotate(-90deg);
                }

                    .loading-progress circle:last-child {
                        stroke: #1b6ec2;
                        stroke-dasharray: 
                            calc(3.142 * var(--blazor-load-percentage, 0%) * 0.8), 
                            500%;
                        transition: stroke-dasharray 0.05s ease-in-out;
                    }

            .loading-progress-text {
                position: relative;
                text-align: center;
                font-weight: bold;
                top: -90px;
            }

                .loading-progress-text:after {
                    content: var(--blazor-load-percentage-text, "Loading");
                }

            code {
                color: #c02d76;
            }
        </style>
    </HeadContent>
    <svg class="loading-progress">
        <circle r="40%" cx="50%" cy="50%" />
        <circle r="40%" cx="50%" cy="50%" />
    </svg>
    <div class="loading-progress-text"></div>
}
else
{
    @ChildContent
}

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

Interactive WebAssembly 렌더링을 채택하는 구성 요소에서 구성 요소의 Razor 태그를 구성 요소와 래 LoadingProgress 핑합니다. 다음 예제에서는 프로젝트 템플릿에서 Blazor Web App 만든 앱의 구성 요소를 사용하는 방법을 Counter 보여 줍니다.

Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveWebAssembly

<PageTitle>Counter</PageTitle>

<LoadingProgress>
    <h1>Counter</h1>

    <p role="status">Current count: @currentCount</p>

    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</LoadingProgress>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Blazor WebAssembly 앱 로드 진행률

프로젝트 템플릿에는 앱의 로드 진행률을 보여 주는 SVG(Scalable Vector Graphics) 및 텍스트 표시기가 포함되어 있습니다.

진행률 표시기는 Blazor에서 제공하는 두 개의 CSS 사용자 지정 속성(변수)을 사용하여 HTML 및 CSS로 구현됩니다.

--blazor-load-percentage: 로드된 앱 파일의 백분율입니다.
--blazor-load-percentage-text: 로드된 앱 파일의 백분율로, 가장 가까운 정수로 반올림됩니다.

위의 CSS 변수를 사용하여 앱의 스타일과 일치하는 사용자 지정 진행률 표시기를 만들 수 있습니다.

다음 예제에서

resourcesLoaded는 앱 시작 중에 로드된 리소스의 순간적인 수입니다.
totalResources는 로드할 총 리소스 수입니다.

const percentage = resourcesLoaded / totalResources * 100;
document.documentElement.style.setProperty(
  '--blazor-load-percentage', `${percentage}%`);
document.documentElement.style.setProperty(
  '--blazor-load-percentage-text', `"${Math.floor(percentage)}%"`);

기본 라운드 진행률 표시기는 wwwroot/index.html 파일의 HTML에서 구현됩니다.

<div id="app">
    <svg class="loading-progress">
        <circle r="40%" cx="50%" cy="50%" />
        <circle r="40%" cx="50%" cy="50%" />
    </svg>
    <div class="loading-progress-text"></div>
</div>

기본 진행률 표시기에서 프로젝트 템플릿 태그 및 스타일을 검토하려면 ASP.NET Core 참조 원본을 참조하세요.

참고 항목

다음 예제에서는 기본 라운드 진행률 표시기를 사용하는 대신 선형 진행률 표시기를 구현하는 방법을 보여줍니다.

wwwroot/css/app.css에 다음 스타일을 추가합니다.

.linear-progress {
    background: silver;
    width: 50vw;
    margin: 20% auto;
    height: 1rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
}

.linear-progress:after {
    content: '';
    position: absolute;
    inset: 0;
    background: blue;
    scale: var(--blazor-load-percentage, 0%) 100%;
    transform-origin: left top;
    transition: scale ease-out 0.5s;
}

CSS 변수(var(...))는 --blazor-load-percentage의 값을 앱 파일의 로드 진행률을 나타내는 파란색 모조 요소의 scale 속성에 전달하는 데 사용됩니다. 앱이 로드되면, --blazor-load-percentage가 자동으로 업데이트되어 진행률 표시기의 모습이 동적으로 변경됩니다.

wwwroot/index.html에서, <div id="app">...</div>에서 기본 SVG 라운드 표시기를 제거하고 다음 표시로 바꿉니다.

<div class="linear-progress"></div>

.NET WebAssembly 런타임 구성

고급 프로그래밍 시나리오 configureRuntime 에서는 런타임 호스트 작성기를 dotnet 사용하는 함수를 사용하여 .NET WebAssembly 런타임을 구성합니다. 예를 들어 다음과 dotnet.withEnvironmentVariable 같은 환경 변수를 설정합니다.

.NET WebAssembly 런타임을 구성합니다.
C 라이브러리의 동작을 변경합니다.

참고 항목

.NET WebAssembly 런타임을 dotnet/runtime 구성하거나 C 라이브러리의 동작에 영향을 주는 환경 변수에 대한 자세한 내용은 GitHub 리포지토리에 설명서 요청이 보류 중입니다. 설명서 요청이 보류 중이지만 요청에서 추가 정보 및 추가 리소스에 대한 교차 링크를 사용할 수 있습니다 . .NET WASM 런타임 env vars(dotnet/runtime #98225)에 대한 설명서에 대한 질문/요청입니다.

이 함수를 configureRuntime 사용하여 브라우저 프로파일러와 통합할 수도 있습니다.

환경 변수를 설정하는 다음 예제의 자리 표시자의 경우:

{BLAZOR SCRIPT} 자리 표시자는 스크립트 경로 및 파일 이름입니다Blazor. 스크립트의 위치는 ASP.NET Core Blazor 프로젝트 구조를 참조하세요.
{NAME} 자리 표시자는 환경 변수의 이름입니다.
{VALUE} 자리 표시자는 환경 변수의 값입니다.

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    webAssembly: {
      configureRuntime: dotnet => {
        dotnet.withEnvironmentVariable("{NAME}", "{VALUE}");
      }
    }
  });
</script>

독립 실행형 Blazor WebAssembly:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    configureRuntime: dotnet => {
      dotnet.withEnvironmentVariable("{NAME}", "{VALUE}");
    }
  });
</script>

참고 항목

.NET WebAssembly 런타임 API(Blazor.runtime)를 사용하여 .NET 런타임 인스턴스에 액세스할 수 있습니다. 예를 들어 을 사용하여 Blazor.runtime.runtimeBuildInfo.buildConfiguration앱의 빌드 구성을 가져올 수 있습니다.

.NET WebAssembly 런타임 구성에 대한 자세한 내용은 GitHub 리포지토리에서 dotnet/runtime 런타임의 TypeScript 정의 파일(dotnet.d.ts)을 참조하세요.

참고 항목

이 섹션은 s에 Blazor Web App적용됩니다.

향상된 탐색 및 양식 처리를 사용하지 않도록 설정하려면 다음으로 true Blazor.start설정합니다disableDomPreservation.

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    ssr: { disableDomPreservation: true }
  });
</script>

다음을 통해 공유

ASP.NET Core Blazor 시작

시작 프로세스 및 구성

JavaScript 이니셜라이저

라이브러리가 특정 순서로 로드되었는지 확인

추가 모듈 가져오기

맵 가져오기

문서가 준비되면 Blazor 초기화

수동 시작의 결과로 생성되는 `Promise`에 연결

클라이언트 쪽 부팅 리소스 로드

C# 코드의 헤더 제어

서버 쪽 및 미리 렌더링된 클라이언트 쪽 시나리오

미리 렌더링하지 않고 클라이언트 쪽 개발

클라이언트 쪽 로드 진행률 표시기

Blazor Web App 로드 진행률

Blazor WebAssembly 앱 로드 진행률

.NET WebAssembly 런타임 구성

향상된 탐색 및 양식 처리 사용 안 함

추가 리소스

추가 리소스

다음을 통해 공유

ASP.NET Core Blazor 시작

시작 프로세스 및 구성

JavaScript 이니셜라이저

라이브러리가 특정 순서로 로드되었는지 확인

추가 모듈 가져오기

맵 가져오기

문서가 준비되면 Blazor 초기화

수동 시작의 결과로 생성되는 Promise에 연결

클라이언트 쪽 부팅 리소스 로드

C# 코드의 헤더 제어

서버 쪽 및 미리 렌더링된 클라이언트 쪽 시나리오

미리 렌더링하지 않고 클라이언트 쪽 개발

클라이언트 쪽 로드 진행률 표시기

Blazor Web App 로드 진행률

Blazor WebAssembly 앱 로드 진행률

.NET WebAssembly 런타임 구성

향상된 탐색 및 양식 처리 사용 안 함

추가 리소스

추가 리소스

수동 시작의 결과로 생성되는 `Promise`에 연결