다음을 통해 공유

ASP.NET Core Blazor WebAssembly 네이티브 종속성

  • 아티클

참고 항목

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

Warning

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

Important

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

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

Blazor WebAssembly 앱은 WebAssembly에서 실행되도록 빌드된 네이티브 종속성을 사용할 수 있습니다. Blazor 앱을 WebAssembly에 AOT(ahead-of-time) 컴파일하고, 런타임을 다시 연결하여 사용되지 않는 기능을 제거하는 데 사용되는 도구와 동일한 도구인 .NET WebAssembly 빌드 도구를 사용하여 네이티브 종속성을 .NET WebAssembly 런타임에 정적으로 연결할 수 있습니다.

이 문서는 .에 Blazor WebAssembly만 적용됩니다.

.NET WebAssembly 빌드 도구

.NET WebAssembly 빌드 도구는 웹 플랫폼을 위한 컴파일러 도구 체인인 Emscripten에 기반합니다. 설치를 비롯한 빌드 도구에 대한 자세한 내용은 ASP.NET Core Blazor WebAssembly 빌드 도구 및 AOT(Ahead-Of-Time) 컴파일을 참조하세요.

Blazor WebAssembly 앱의 프로젝트 파일에 NativeFileReference 항목을 추가하여 앱에 네이티브 종속성을 추가합니다. 프로젝트를 빌드할 때 각 NativeFileReference는 컴파일되어 런타임에 연결되도록 .Net WebAssembly 빌드 도구에 의해 Emscripten에 전달됩니다. 다음으로 앱의 .NET 코드에서 네이티브 코드로 p/invoke합니다.

일반적으로 이식 가능한 코드는 Blazor WebAssembly와 함께 네이티브 종속성으로 사용할 수 있습니다. C/C++ 코드 또는 Emscripten을 사용하여 이전에 컴파일된 코드에 네이티브 종속성을 추가할 수 있습니다.

  • 개체 파일(.o)
  • 보관 파일(.a)
  • Bitcode(.bc)
  • 독립 실행형 WebAssembly 모듈(.wasm)

일반적으로 미리 빌드된 종속성은 .NET WebAssembly 런타임을 빌드하는 데 사용된 것과 같은 버전의 Emscripten을 사용하여 빌드해야 합니다.

참고 항목

Mono/WebAssembly MSBuild 속성 및 대상은 (dotnet/runtimeGitHub 리포지토리)를 참조 WasmApp.targets 하세요. 일반적인 MSBuild 속성에 대한 공식 설명서는 문서 blazor msbuild 구성 옵션(dotnet/docs#27395)에 따라 계획됩니다.

네이티브 코드 사용

Blazor WebAssembly 앱에 간단한 네이티브 C 함수를 추가합니다.

  1. 새 Blazor WebAssembly 프로젝트를 만듭니다.

  2. 프로젝트에 Test.c 파일을 추가합니다.

  3. 계승 계산을 위해 C 함수를 추가합니다.

    Test.c:

    int fact(int n)
{
    if (n == 0) return 1;
    return n * fact(n - 1);
}

  4. 앱의 프로젝트 파일에서 Test.c의 NativeFileReference를 추가합니다.

    <ItemGroup>
  <NativeFileReference Include="Test.c" />
</ItemGroup>

  5. Razor 구성 요소에서 생성된 Test 라이브러리의 fact 함수의 DllImportAttribute를 추가하고 구성 요소의 .NET 코드에서 fact 메서드를 호출합니다.

    Pages/NativeCTest.razor:

    @page "/native-c-test"
@using System.Runtime.InteropServices

<PageTitle>Native C</PageTitle>

<h1>Native C Test</h1>

<p>
    @@fact(3) result: @fact(3)
</p>

@code {
    [DllImport("Test")]
    static extern int fact(int n);
}

설치된 .NET WebAssembly 빌드 도구로 앱을 빌드하면 네이티브 C 코드가 컴파일되어 .NET WebAssembly 런타임(dotnet.wasm)에 연결됩니다. 앱을 빌드한 후 앱을 실행하여 렌더링된 계승 값을 확인합니다.

C++ 관리형 메서드 콜백

[UnmanagedCallersOnly] 특성을 사용하여 C++에 전달되는 관리형 메서드에 레이블을 지정합니다.

[UnmanagedCallersOnly] 특성으로 표시된 메서드는 static이어야 합니다. Razor 구성 요소에서 인스턴스 메서드를 호출하려면 인스턴스에 대한 GCHandle를 C++에 전달한 다음, 네이티브에 다시 전달합니다. 또는 다른 메서드를 사용하여 구성 요소의 인스턴스를 식별합니다.

[DllImport]로 표시된 메서드는 콜백 인수에 대한 대리자 형식이 아닌 C# 9.0 함수 포인터를 사용해야 합니다.

참고 항목

[DllImport] 메서드의 C# 함수 포인터 형식의 경우 delegate *unmanaged<int, void> 대신, 관리되는 쪽의 메서드 시그니처에서 IntPtr를 사용합니다. 자세한 내용은 [WASM] 네이티브 코드에서 .NET으로 콜백: 시그니처의 함수 포인터 형식 구문 분석은 지원되지 않음(dotnet/runtime #56145)을 참조하세요.

NuGet 패키지에 네이티브 의존성 패키징

NuGet 패키지에는 WebAssembly에서 사용할 네이티브 종속성이 포함될 수 있습니다. 그러면 이러한 라이브러리와 해당 네이티브 기능을 Blazor WebAssembly 앱에서 사용할 수 있습니다. WebAssembly를 위한 네이티브 종속성 파일을 빌드하여 browser-wasm 아키텍처 관련 폴더에 패키징해야 합니다. WebAssembly 종속성은 자동으로 참조되지 않으며, 직접 NativeFileReference로 참조해야 합니다. 패키지 작성자는 참조와 함께 패키지에 .props 파일을 포함하여 네이티브 참조를 추가하도록 선택할 수 있습니다.

SkiaSharp 예제 라이브러리 사용

SkiaSharp는 Blazor WebAssembly를 지원하는 네이티브 Skia 그래픽 라이브러리를 기반으로 한 .NET용 플랫폼 간 2D 그래픽 라이브러리입니다.

Blazor WebAssembly 앱에서 SkiaSharp를 사용하려면 다음을 수행하세요.

  1. Blazor WebAssembly 프로젝트의 SkiaSharp.Views.Blazor 패키지에 패키지 참조를 추가합니다. 패키지를 앱에 추가하는 Visual Studio 프로세스(선택된 사전 릴리스 포함을 사용하여 NuGet 패키지 관리)를 사용하거나 명령 셸에서 dotnet add package 명령을 실행합니다.

    dotnet add package –-prerelease SkiaSharp.Views.Blazor

    참고 항목

    .NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 워크플로에서 패키지 설치 및 관리의 문서(NuGet 설명서)를 참조하세요. NuGet.org에서 올바른 패키지 버전을 확인합니다.

  2. 다음과 함께 SKCanvasView 구성 요소를 앱에 추가합니다.

    • SkiaSharp 및 SkiaSharp.Views.Blazor 네임스페이스.
    • SkiaSharp Canvas View 구성 요소(SKCanvasView)에 그릴 논리.

    Pages/NativeDependencyExample.razor:

    @page "/native-dependency-example"
@using SkiaSharp
@using SkiaSharp.Views.Blazor

<PageTitle>Native dependency</PageTitle>

<h1>Native dependency example with SkiaSharp</h1>

<SKCanvasView OnPaintSurface="OnPaintSurface" />

@code {
    private void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        var canvas = e.Surface.Canvas;

        canvas.Clear(SKColors.White);

        using var paint = new SKPaint
        {
            Color = SKColors.Black,
            IsAntialias = true,
            TextSize = 24
        };

        canvas.DrawText("SkiaSharp", 0, 24, paint);
    }
}

  3. 앱을 빌드합니다. 몇 분 정도 걸릴 수 있습니다. 앱을 실행하고 /native-dependency-example의 NativeDependencyExample 구성 요소로 이동합니다.

추가 리소스

.NET WebAssembly 빌드 도구