ASP.NET Core Blazor 앱의 JavaScript 위치

아티클
11/06/2024

참고 항목

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

Warning

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

Important

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

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

다음 방법 중 한 가지를 사용하여 JavaScript(JS) 코드를 로드합니다.

태그에 <head> 스크립트 로드(일반적으로 권장되지 않음)
<body> 태그에서 스크립트 로드
구성 요소와 함께 배치된 외부 JavaScript 파일(.js)에서 스크립트 로드
외부 JavaScript 파일(.js)에서 스크립트 로드
Blazor 시작 전후 스크립트 삽입

태그에 <head> 스크립트 로드(일반적으로 권장되지 않음)
<body> 태그에서 스크립트 로드
외부 JavaScript 파일(.js)에서 스크립트 로드
Blazor 시작 후 스크립트 삽입

Warning

태그를 <script> 동적으로 업데이트할 수 없으므로 구성 요소가 정적 서버 쪽 렌더링(정적 SSR)을 채택하도록 보장되는 경우에만 구성 요소 파일.razor()에 태그를 <script> 배치합니다.

Warning

<script> 태그를 동적으로 업데이트할 수 없으므로 구성 요소 파일(.razor)에 <script> 태그를 넣지 마세요.

참고 항목

설명서 예제에서는 일반적으로 스크립트를 <script> 태그에 배치하거나 외부 파일에서 전역 스크립트를 로드합니다. 이러한 방법에서는 전역 함수가 클라이언트를 오염시킵니다. 프로덕션 앱의 경우 필요할 때 가져올 수 있는 별도의 JS 모듈에 배치 JS 하는 것이 좋습니다. 자세한 내용은 JavaScript 모듈에서의 JavaScript 격리 섹션을 참조하세요.

참고 항목

설명서 예제에서는 스크립트를 <script> 태그에 배치하거나 외부 파일에서 전역 스크립트를 로드합니다. 이러한 방법에서는 전역 함수가 클라이언트를 오염시킵니다. 필요할 때 가져올 수 있는 별도의 JS 모듈에 배치 JS 하는 것은 ASP.NET Core 5.0 이전 버전에서는 Blazor 지원되지 않습니다. 앱에서 JS 격리를 위해 JS 모듈을 사용해야 하는 경우 ASP.NET Core 5.0 이상에서 앱을 빌드하는 것이 좋습니다. 자세한 내용은 버전 드롭다운 목록을 사용하여 이 문서의 5.0 이상 버전을 선택하고 JavaScript 모듈의 JavaScript 격리 섹션을 참조하세요.

`<head>` 태그에서 스크립트 로드

이 섹션의 접근 방식은 일반적으로 권장되지 않습니다.

요소 태그에 JavaScript(JS) 태그(<script>...</script>)를 <head> 배치합니다.

<head>
    ...

    <script>
      window.jsMethod = (methodParameter) => {
        ...
      };
    </script>
</head>

<head>에서 JS를 로드하는 것은 다음과 같은 이유로 최상의 방법이 아닙니다.

스크립트가 Blazor에 종속되는 경우 JS interop이 실패할 수 있습니다. <head> 태그가 아니라 다른 방법 중 하나를 사용하여 스크립트를 로드하는 것이 좋습니다.
스크립트에서 JS을 구문 분석하는 데 걸리는 시간 때문에 페이지 응답 속도가 떨어질 수 있습니다.

`<body>` 태그에서 스크립트 로드

스크립트 참조 후 닫 </body> 는 요소 내에 JavaScript 태그(<script>...</script>)를 Blazor 배치합니다.

<body>
    ...

    <script src="{BLAZOR SCRIPT}"></script>
    <script>
      window.jsMethod = (methodParameter) => {
        ...
      };
    </script>
</body>

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

구성 요소와 함께 배치된 외부 JavaScript 파일(`.js`)에서 스크립트 로드

구성 요소에 대한 Razor JavaScript(JS) 파일의 배치는 앱에서 스크립트를 구성하는 편리한 방법입니다.

Razor앱의 Blazor 구성 요소는 확장 프로그램을 .razor.js 사용하여 파일을 정렬 JS 하고 프로젝트의 파일 경로를 사용하여 공개적으로 주소를 지정합니다.

{PATH}/{COMPONENT}.razor.js

{PATH} 자리 표시자는 구성 요소의 경로입니다.
{COMPONENT} 자리 표시자가 구성 요소입니다.

앱이 게시되면 프레임워크는 자동으로 스크립트를 웹 루트로 이동합니다. 스크립트는 자리 표시자가 있는 위치로 이동 bin/Release/{TARGET FRAMEWORK MONIKER}/publish/wwwroot/{PATH}/{COMPONENT}.razor.js됩니다.

{TARGET FRAMEWORK MONIKER} 는 TFM(대상 프레임워크 모니커)입니다.
{PATH} 는 구성 요소의 경로입니다.
{COMPONENT} 는 구성 요소 이름입니다.

게시된 정적 자산에 파일을 배치 JS 하기 때문에 Blazor 스크립트의 상대 URL을 변경할 필요가 없습니다.

이 섹션과 다음 예제는 주로 파일 배치를 설명하는 데 JS 중점을 줍니다. 첫 번째 예제에서는 일반 JS 함수를 사용하여 정렬된 JS 파일을 보여 줍니다. 두 번째 예제에서는 모듈을 사용하여 함수를 로드하는 방법을 보여 줍니다. 이 방법은 대부분의 프로덕션 앱에 권장되는 방법입니다. .NET에서의 호출 JS 은 ASP.NET CoreBlazor의 .NET 메서드에서 JavaScript 호출 함수에서 완전히 다룹니다. 여기서 추가 예제와 함께 API에 BlazorJS 대한 추가 설명이 있습니다. 두 번째 예제에 있는 구성 요소 삭제는 ASP.NET Core Razor 구성 요소 수명 주기에서 다룹니다.

다음 JsCollocation1 구성 요소는 구성 요소를 통해 스크립트를HeadContent 로드하고 다음을 사용하여 함수IJSRuntime.InvokeAsync를 JS 호출합니다. {PATH} 자리 표시자는 구성 요소의 경로입니다.

Important

테스트 앱에서 데모에 다음 코드를 사용하는 경우 자리 표시자를 구성 요소의 경로(예: Components/Pages .NET 8 이상 또는 Pages .NET 7 이하)로 변경 {PATH} 합니다. Blazor Web App (.NET 8 이상)에서 구성 요소에는 앱 또는 구성 요소 정의에 전역적으로 적용된 대화형 렌더링 모드가 필요합니다.

스크립트(시작 스크립트의 위치) 다음에 Blazor 다음 스크립트를 Blazor 추가합니다.

<script src="{PATH}/JsCollocation1.razor.js"></script>

JsCollocation1 구성 요소({PATH}/JsCollocation1.razor):

@page "/js-collocation-1"
@inject IJSRuntime JS

<PageTitle>JS Collocation 1</PageTitle>

<h1>JS Collocation Example 1</h1>

<button @onclick="ShowPrompt">Call showPrompt1</button>

@if (!string.IsNullOrEmpty(result))
{
    <p>
        Hello @result!
    </p>
}

@code {
    private string? result;

    public async void ShowPrompt()
    {
        result = await JS.InvokeAsync<string>(
            "showPrompt1", "What's your name?");
        StateHasChanged();
    }
}

정렬된 JS 파일은 파일 이름을 JsCollocation1.razor.js가진 JsCollocation1 구성 요소 파일 옆에 배치됩니다. 구성 요소에서 JsCollocation1 스크립트는 데이터 정렬된 파일의 경로에서 참조됩니다. 다음 예제에서 함수는 showPrompt1 a Window prompt() 에서 사용자의 이름을 수락하고 표시할 구성 요소로 JsCollocation1 반환합니다.

{PATH}/JsCollocation1.razor.js:

function showPrompt1(message) {
  return prompt(message, 'Type your name here');
}

이 접근 방식은 클라이언트를 전역 함수로 오염하기 때문에 프로덕션 앱에서 일반적으로 사용하지 않는 것이 좋습니다. 프로덕션 앱에 대한 더 나은 방법은 모듈을 사용하는 JS 것입니다. 다음 예제와 같이 정렬된 JS 파일에서 모듈을 로드하는 JS 데도 동일한 일반적인 원칙이 적용됩니다.

다음 JsCollocation2 구성 요소의 OnAfterRenderAsync 메서드는 구성 요소 클래스의 모듈을 moduleIJSObjectReference 로드 JS 합니다. module 는 함수를 호출 showPrompt2 하는 데 사용됩니다. {PATH} 자리 표시자는 구성 요소의 경로입니다.

Important

테스트 앱에서 데모에 다음 코드를 사용하는 경우 자리 표시자를 구성 요소의 경로로 변경 {PATH} 합니다. Blazor Web App (.NET 8 이상)에서 구성 요소에는 앱 또는 구성 요소 정의에 전역적으로 적용된 대화형 렌더링 모드가 필요합니다.

JsCollocation2 구성 요소({PATH}/JsCollocation2.razor):

@page "/js-collocation-2"
@implements IAsyncDisposable
@inject IJSRuntime JS

<PageTitle>JS Collocation 2</PageTitle>

<h1>JS Collocation Example 2</h1>

<button @onclick="ShowPrompt">Call showPrompt2</button>

@if (!string.IsNullOrEmpty(result))
{
    <p>
        Hello @result!
    </p>
}

@code {
    private IJSObjectReference? module;
    private string? result;

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            /*
                Change the {PATH} placeholder in the next line to the path of
                the collocated JS file in the app. Examples:

                ./Components/Pages/JsCollocation2.razor.js (.NET 8 or later)
                ./Pages/JsCollocation2.razor.js (.NET 7 or earlier)
            */
            module = await JS.InvokeAsync<IJSObjectReference>("import",
                "./{PATH}/JsCollocation2.razor.js");
        }
    }

    public async void ShowPrompt()
    {
        if (module is not null)
        {
            result = await module.InvokeAsync<string>(
                "showPrompt2", "What's your name?");
            StateHasChanged();
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

{PATH}/JsCollocation2.razor.js:

export function showPrompt2(message) {
  return prompt(message, 'Type your name here');
}

RCL(클래스 라이브러리)에서 배치할 JS 스크립트 및 모듈의 사용은 인터페이스를 기반으로 IJSRuntime 하는 Blazor'interop 메커니즘'JS에 대해서만 지원 Razor 됩니다. JavaScript[JSExport]/[JSImport] interop를 구현하는 경우 ASP.NET CoreBlazor와 JavaScript JSImport/JSExport interop를 참조하세요.

-based JS interop를 사용하여 IJSRuntimeRCL(클래스 라이브러리)에서 제공하는 Razor 스크립트 또는 모듈의 경우 다음 경로가 사용됩니다.

./_content/{PACKAGE ID}/{PATH}/{COMPONENT}.{EXTENSION}.js

JS 파일의 올바른 정적 자산 경로를 만들려면 현재 디렉터리의 패스 세그먼트(./)가 필요합니다.
{PACKAGE ID} 자리 표시자는 RCL의 패키지 식별자(또는 앱에서 참조하는 클래스 라이브러리의 라이브러리 이름)입니다.
{PATH} 자리 표시자는 구성 요소의 경로입니다. Razor 구성 요소가 RCL의 루트에 있으면 경로 세그먼트가 포함되지 않습니다.
{COMPONENT} 자리 표시자는 구성 요소 이름입니다.
{EXTENSION} 자리 표시자는 구성 요소 razor 의 확장과 일치합니다cshtml.

다음 Blazor 앱 예제에서:

RCL의 패키지 식별자는 AppJS입니다.
모듈의 스크립트는 JsCollocation3 구성 요소(JsCollocation3.razor)에 대해 로드됩니다.
JsCollocation3 구성 요소는 RCL의 Components/Pages 폴더에 있습니다.

module = await JS.InvokeAsync<IJSObjectReference>("import", 
    "./_content/AppJS/Components/Pages/JsCollocation3.razor.js");

RCL에 대한 자세한 내용은 RCL(Razor 클래스 라이브러리)에서 ASP.NET Core Razor 구성 요소 사용을 참조하세요.

외부 JavaScript 파일(`.js`)에서 스크립트 로드

스크립트 참조 후 닫 </body> 는 요소 내에 스크립트 원본(<script>...</script>) 경로가 있는 JavaScriptJS() 태그(src)를 Blazor 배치합니다.

<body>
    ...

    <script src="{BLAZOR SCRIPT}"></script>
    <script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>

앞의 예제에서 자리 표시자의 경우:

{BLAZOR SCRIPT} 자리 표시자는 스크립트 경로 및 파일 이름입니다Blazor. 스크립트의 위치는 ASP.NET Core Blazor 프로젝트 구조를 참조하세요.
{SCRIPT PATH AND FILE NAME (.js)} 자리 표시자는 wwwroot 아래의 경로 및 스크립트 파일 이름입니다.

이전 <script> 태그의 다음 예제에서 scripts.js 파일은 앱의 wwwroot/js 폴더에 있습니다.

<script src="js/scripts.js"></script>

아래의 별도 폴더에 모든 스크립트를 wwwroot 유지하지 않으려는 경우 폴더 wwwroot에서 직접 스크립트를 제공할 수도 있습니다.

<script src="scripts.js"></script>

Razor 클래스 라이브러리에서 외부 JS 파일을 제공하는 경우 안정적인 정적 웹 자산 경로(_content/{PACKAGE ID}/{SCRIPT PATH AND FILE NAME (.js)})를 사용하여 JS 파일을 지정합니다.

{PACKAGE ID} 자리 표시자는 라이브러리의 패키지 ID입니다. <PackageId>가 프로젝트 파일에 지정되지 않은 경우 패키지 ID는 기본적으로 프로젝트의 어셈블리 이름으로 설정됩니다.
{SCRIPT PATH AND FILE NAME (.js)} 자리 표시자는 wwwroot 아래의 경로 및 파일 이름입니다.

<body>
    ...

    <script src="{BLAZOR SCRIPT}"></script>
    <script src="_content/{PACKAGE ID}/{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>

이전 <script> 태그의 다음 예제에서

Razor 클래스 라이브러리는 ComponentLibrary의 어셈블리 이름이며 <PackageId>는 라이브러리 프로젝트 파일에 지정되지 않습니다.
scripts.js 파일은 클래스 라이브러리의 wwwroot 폴더에 있습니다.

<script src="_content/ComponentLibrary/scripts.js"></script>

자세한 내용은 RCL(Razor 클래스 라이브러리)에서 ASP.NET Core Razor 구성 요소 사용을 참조하세요.

Blazor 시작 전후 스크립트 삽입

Blazor이 시작되기 전이나 후에 스크립트가 로드되도록 하려면 JavaScript 이니셜라이저를 사용합니다. 자세한 내용은 ASP.NET Core Blazor 시작을 참조하세요.

Blazor 시작 후 스크립트 삽입

Blazor 시작 후 스크립트를 삽입하려면 Blazor의 수동 시작에서 발생하는 Promise에 연결합니다. 자세한 내용과 예제는 ASP.NET Core Blazor 시작을 참조하세요.

JavaScript 모듈에서의 JavaScript 격리

Blazor는 표준 JS 모듈(ECMAScript 사양 )에서 JavaScript(JS) 격리를 사용하도록 설정합니다.

JS 격리는 다음과 같은 이점을 제공합니다.

가져온 JS는 전역 네임스페이스를 더 이상 오염시키지 않습니다.
라이브러리 및 구성 요소의 소비자는 관련 JS를 가져올 필요가 없습니다.

자세한 내용은 ASP.NET Core Blazor의 .NET 메서드에서 JavaScript 함수 호출을 참조하세요.

연산자를 사용하여 import() 동적 가져오기는 ASP.NET Core 및 Blazor다음에서 지원됩니다.

if ({CONDITION}) import("/additionalModule.js");

앞의 예제 {CONDITION} 에서 자리 표시자는 모듈을 로드해야 하는지 여부를 결정하는 조건부 검사를 나타냅니다.

브라우저 호환성을 보려면 다음을 사용할 수 있습니다. JavaScript 모듈: 동적 가져오기를 참조하세요.

다음을 통해 공유

ASP.NET Core Blazor 앱의 JavaScript 위치

`<head>` 태그에서 스크립트 로드

`<body>` 태그에서 스크립트 로드

구성 요소와 함께 배치된 외부 JavaScript 파일(`.js`)에서 스크립트 로드

외부 JavaScript 파일(`.js`)에서 스크립트 로드

Blazor 시작 전후 스크립트 삽입

Blazor 시작 후 스크립트 삽입

JavaScript 모듈에서의 JavaScript 격리

추가 리소스

다음을 통해 공유

ASP.NET Core Blazor 앱의 JavaScript 위치

<head> 태그에서 스크립트 로드

<body> 태그에서 스크립트 로드

구성 요소와 함께 배치된 외부 JavaScript 파일(.js)에서 스크립트 로드

외부 JavaScript 파일(.js)에서 스크립트 로드

Blazor 시작 전후 스크립트 삽입

Blazor 시작 후 스크립트 삽입

JavaScript 모듈에서의 JavaScript 격리

추가 리소스

`<head>` 태그에서 스크립트 로드

`<body>` 태그에서 스크립트 로드

구성 요소와 함께 배치된 외부 JavaScript 파일(`.js`)에서 스크립트 로드

외부 JavaScript 파일(`.js`)에서 스크립트 로드