[Blazor] javascript import ๋ฐฉ๋ฒ•

:pushpin: ํ•ด๊ฒฐ์ฑ…์€ ๋งจ ๋งˆ์ง€๋ง‰์— ๋‚˜์™€์žˆ์Šต๋‹ˆ๋‹ค.

:spiral_notepad:์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช์œผ๋ฉด์„œ ์ฐพ์•„๋ณธ ๋ฌธ์„œ

https://learn.microsoft.com/ko-kr/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0

๋ฌธ์„œ์—์„œ ๋‚˜์˜จ๋Œ€๋กœ ๋”ฐ๋ผํ•˜๋ฉด ์ œ๋Œ€๋กœ ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. github์—๋„ ๋ฒ„๊ทธ๋กœ ๊ธฐ๋ก๋˜์–ด Merge๋œ ๊ฒƒ์œผ๋กœ ๋ณด์•„ MS๊ณต์‹๋ฌธ์„œ์ด์ง€๋งŒ ์‹ ๋ขฐํ•  ์ˆ˜๋Š” ์—†๋Š”๋“ฏ ํ•˜๋„ค์š”โ€ฆhttps://github.com/dotnet/AspNetCore.Docs/issues/28044

MS๊ถŒ์žฅ๋ฐฉ๋ฒ•1 : _Layout.cshtml์—์„œ blazor.server.js ๋กœ๋”ฉ ์ดํ›„์— import

<body>
    ...
    <script src="_framework/blazor.{webassembly|server}.js"></script>
    <script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>

์ ์šฉ ๊ฒฐ๊ณผ(์‹คํŒจ)

@using Microsoft.AspNetCore.Components.Web
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" type="image/png" href="assets/images/logos/favicon.png" />
    <link rel="stylesheet" href="assets/css/styles.min.css" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">๐Ÿ—™</a>
    </div>

    <!-- Default -->
    <script src="_framework/blazor.server.js"></script>
    <!-- External js -->
    <!-- ============================================================== -->
    <script src="assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/sidebarmenu.js"></script>
    <script src="assets/js/app.min.js"></script>
    <script src="assets/libs/apexcharts/dist/apexcharts.min.js"></script>
    <script src="assets/libs/simplebar/dist/simplebar.js"></script>
    <script src="assets/js/dashboard.js"></script>
</body>
</html>

MS๊ถŒ์žฅ๋ฐฉ๋ฒ•2 : _Layout.cshtml์—์„œ blazor.server.js ๋กœ๋”ฉํ•  ๋•Œ autostart ์†์„ฑ์„ false๋กœ ๋ฐ”๊พธ๊ณ , ๋ณ„๋„์˜ JSํ•จ์ˆ˜๋กœ Blazor Start ์ดํ›„ document์— script๋ฅผ ๋กœ๋“œํ•œ๋‹ค.

<body>
    ...
    <script src="_framework/blazor.{webassembly|server}.js" 
        autostart="false"></script>
    <script>
      Blazor.start().then(function () {
        var customScript = document.createElement('script');
        customScript.setAttribute('src', 'scripts.js');
        document.head.appendChild(customScript);
      });
    </script>
</body>

์ ์šฉ๊ฒฐ๊ณผ (์•„๋ž˜์™€ ๊ฐ™์ด ์—ด์‹ฌํžˆ ์‚ฝ์งˆํ•˜์—ฌ ํ•˜๋“œ์ฝ”๋”ฉํ–ˆ์œผ๋‚˜ ๋˜ ์‹คํŒจ)

@using Microsoft.AspNetCore.Components.Web
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" type="image/png" href="assets/images/logos/favicon.png" />
    <link rel="stylesheet" href="assets/css/styles.min.css" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">๐Ÿ—™</a>
    </div>

    <!-- Default -->
    <script src="_framework/blazor.server.js" autostart="false"></script>
    <!-- External js -->
    <script>
        Blazor.start().then(function () {
            var customScript1 = document.createElement('script');
            customScript1.setAttribute('src', 'assets/libs/jquery/dist/jquery.min.js'); document.head.appendChild(customScript1);
            var customScript2 = document.createElement('script');
            customScript2.setAttribute('src', 'assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js'); document.head.appendChild(customScript2);
        
            var customScript3 = document.createElement('script');
            customScript3.setAttribute('src', 'assets/js/sidebarmenu.js'); document.head.appendChild(customScript3);
            var customScript4 = document.createElement('script');
            customScript4.setAttribute('src', 'assets/js/app.min.js'); document.head.appendChild(customScript4);
            var customScript5 = document.createElement('script');
            customScript5.setAttribute('src', 'assets/libs/apexcharts/dist/apexcharts.min.js'); document.head.appendChild(customScript5);
            var customScript6 = document.createElement('script');
            customScript6.setAttribute('src', 'assets/libs/simplebar/dist/simplebar.js'); document.head.appendChild(customScript6);
            var customScript7 = document.createElement('script');
            customScript7.setAttribute('src', 'assets/js/dashboard.js'); document.head.appendChild(customScript7);
        });
    </script>
*@
</body>
</html>

์‹œํ–‰์ฐฉ์˜ค3) blazor.server.js๊ฐ€ ๋กœ๋”ฉ๋˜๊ธฐ ์ด์ „์— ํ˜ธ์ถœ๋˜๋„๋ก ์ˆœ์„œ๋ฅผ ๋ฐ”๊พผ๋‹ค โ‡’ ์‹คํŒจ

๊ณต์‹๋ฌธ์„œ์—์„œ๋Š” ๋ฐ˜๋“œ์‹œ blazor.server.js๋ฅผ ํ˜ธ์ถœํ•œ ๋’ค์— ์™ธ๋ถ€ Javascript๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋ผ๊ณ  ๋˜์–ด์žˆ์œผ๋‚˜, ์•ˆ๋ฉ๋‹ˆ๋‹ค.

github์— bug๋กœ ๊ธฐ๋ก๋˜์–ด 1์›”์— ๊ณ ์ณ์ง„ ๊ฒƒ์œผ๋กœ ๋ณด์ด๋ฉฐ, ๊ทธ ํ•ด๊ฒฐ์ฑ…์œผ๋กœ๋Š” ํ˜ธ์ถœ์ˆœ์„œ๋ฅผ ๋ฐ”๊พธ๋ผ๊ณ  ๋˜์–ด์žˆ์œผ๋‚˜ ๊ทธ๋ ‡๊ฒŒ ํ•ด๋„ ์•ˆ๋ฉ๋‹ˆ๋‹ค.


:pushpin:์ง€๊ธˆ๋ถ€ํ„ฐ ํ•ด๊ฒฐ์ฑ…์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ๋จผ์ €, Blazor ํŽ˜์ด์ง€์˜ ์ƒ๋‹จ์— IJSRuntime์„ DIํ•ฉ๋‹ˆ๋‹ค.

@page "/test"
@inject IJSRuntime JS

๊ทธ๋Ÿฐ ๋‹ค์Œ ํŽ˜์ด์ง€์˜ ์ฝ”๋“œ ๋ถ€๋ถ„์— OnAfterRenderAsync ๋ฉ”์„œ๋“œ๋ฅผ overrideํ•˜์—ฌ JSRuntime์„ ์‚ฌ์šฉํ•ด์„œ Importํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ•„์š”ํ•œ Javascript ํŒŒ์ผ์„ ๊ฐ๊ฐ importํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeAsync<IJSObjectReference>("import", "./assets/libs/jquery/dist/jquery.min.js");
            await JS.InvokeAsync<IJSObjectReference>("import", "./assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js");
            await JS.InvokeAsync<IJSObjectReference>("import", "./assets/js/sidebarmenu.js");
            await JS.InvokeAsync<IJSObjectReference>("import", "./assets/js/app.min.js");
            await JS.InvokeAsync<IJSObjectReference>("import", "./assets/libs/apexcharts/dist/apexcharts.min.js");
            await JS.InvokeAsync<IJSObjectReference>("import", "./assets/libs/simplebar/dist/simplebar.js");
            await JS.InvokeAsync<IJSObjectReference>("import", "./assets/js/dashboard.js");
        }
    }
}

์ด ๋ฐฉ๋ฒ•์€ Blazor์—์„œ Javascript์™€ ์ƒํ˜ธ์ž‘์šฉ(Interaction)ํ•  ๋•Œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ์ฑ…์ด ๋‚˜์™€์žˆ๋Š” ๋งํฌ

https://code-maze.com/how-to-call-javascript-code-from-net-blazor-webassembly/
(ํ•ด๊ฒฐ์ฑ…๋งŒ ์ฐพ์•˜๋‹คํ•˜๋ฉด ๋งˆ์ œํ˜•๋‹˜๊บผ๋„ค์š”โ€ฆ)

์ ์šฉ ๊ฒฐ๊ณผ

6๊ฐœ์˜ ์ข‹์•„์š”

์ •๋ง์ข‹์€ ํŒ์ด๋„ค์š” ๊ณ ์ƒ ์‚ฝ์งˆํ•˜์‹ ๊ฒƒ์ด ๋ณด์ด๋„ค์š”

4๊ฐœ์˜ ์ข‹์•„์š”

โ€œ๊ฐœ๋ฐœ์€ 8ํ• ์ด ์‚ฝ์งˆ์ด๋‹คโ€
ํ‰๊ท  ์ง€๋Šฅ์„ ๊ฐ€์ง„ ์ œ๊ฐ€ ๋งˆ์Œ ์†์— ์ƒˆ๊ฒจ๋†“์€ ์ขŒ์šฐ๋ช…์ž…๋‹ˆ๋‹คโ€ฆ

5๊ฐœ์˜ ์ข‹์•„์š”

ASP.NET Core Razor ๊ตฌ์„ฑ ์š”์†Œ ์ˆ˜๋ช… ์ฃผ๊ธฐ | Microsoft Learn

ํ•ด๋‹น ๋‚ด์šฉ์€ ๊ณต์‹๋ฌธ์„œ์—์„œ๋„ ์ฐพ์•„๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ์ „์— trumbowyg ๋„ฃ์–ด๋ณด๋ฉด์„œ ์‚ฝ์งˆํ•œ ๊ฒฝํ—˜์ด ์žˆ์–ด ๊ธฐ์–ต๋‚˜๋„ค์š” ใ…Žใ…Ž

ํ”„๋ก ํŠธ์— ์˜ํ–ฅ์„ ์ฃผ๋Š” JS๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ์ˆ˜๋ช…์ฃผ๊ธฐ๋ฅผ ์‹ ๊ฒฝ์จ์•ผํ•˜๋Š” ๊ฒƒ ๊ฐ™๋”๋ผ๊ตฌ์š”

4๊ฐœ์˜ ์ข‹์•„์š”

@๋‚˜๊ฐ€์ฝ” ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ํ•œ๋ฒˆ ์ฝ์–ด๋ณผ๊ฒŒ์š”

3๊ฐœ์˜ ์ข‹์•„์š”

์ข‹์€ ๊ฒฝํ—˜ ๊ณต์œ ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ใ… ใ…  ๊ณ ์ƒ ๋งŽ์œผ์…จ๊ฒ ์–ด์š”.

2๊ฐœ์˜ ์ข‹์•„์š”