연습 - Blazor 앱에서 JavaScript 라이브러리 사용

10분

고객이 주문에 피자를 추가한 후 X 아이콘을 선택하여 확인 없이 주문에서 피자를 제거할 수 있습니다. 고객이 실수로 주문에서 피자를 제거하는 것을 방지하기 위해 피자 회사는 품목 제거에 대한 확인 프롬프트를 추가하려고 합니다.

피자 회사는 또한 고객이 주문이 실시간으로 어떻게 진행되는지 보기를 원합니다. 주문 상태를 지속적으로 쿼리하도록 주문 세부 정보 페이지를 업데이트하고 페이지가 업데이트되고 있다는 피드백을 고객에게 제공해야 합니다.

이 연습에서는 Blazor 구성 요소의 JS interop을 사용하여 클라이언트 쪽에서 JavaScript를 호출하여 피자 배달 회사의 기존 앱을 확장합니다. 타사 JavaScript 라이브러리와 통합하여 취소 팝업을 개선하고 JavaScript에서 Blazor 메서드를 호출하여 고객 주문의 실시간 상태를 가져옵니다.

기존 앱 복제

이 모듈에서는 .NET 9.0 SDK를 사용합니다. 기본 설정 터미널에서 다음 명령을 실행하여 .NET 9.0이 설치되어 있는지 확인합니다.

dotnet --list-sdks

다음 예제와 유사한 출력이 표시됩니다.

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

9으로 시작하는 버전이 나열되어 있는지 확인합니다. 나열된 항목이 없거나 명령을 찾을 수 없는 경우 최신 .NET 9.0 SDK를 설치합니다.

자세한 내용은 Blazor를 사용하여 ASP.NET Core를 사용하여 첫 번째 웹앱 빌드를 참조하세요.

Visual Studio Code를 열고 상단 메뉴에서 터미널새 터미널> 선택하여 통합 터미널을 엽니다.
터미널에서 프로젝트를 만들 디렉터리로 변경합니다.

다음 명령을 실행하여 GitHub에서 로컬 하위 디렉터리로 앱을 복제합니다.

git clone https://github.com/MicrosoftDocs/mslearn-build-interactive-components-blazor.git BlazingPizza

위쪽 메뉴 모음에서 파일>열기 폴더를 선택합니다.
폴더 열기 대화 상자에서 BlazingPizza 폴더로 이동하고 폴더 선택을 선택합니다.

Visual Studio Code에서 누락된 자산 또는 해결되지 않은 종속성에 대해 묻는 메시지가 표시되면 예 또는 복원을 선택합니다.
앱을 실행하고 모든 항목이 제대로 작동하는지 확인하려면 F5 키를 누르거나시작 디버깅> 선택합니다.
웹앱에서 피자를 선택하고 주문에 추가합니다. 주문 목록에 몇 개의 피자가 있는 상태에서 피자 중 하나 옆에 있는 X 를 선택하고 프롬프트 없이 항목이 사라지는지 확인합니다.
ShiftF5+ 누르거나디버깅 중지> 선택하여 앱을 중지합니다.

주문 프로세스 리팩터링

JS interop를 사용하려면 IJSRuntime 추상화를 삽입해야 합니다.

Visual Studio Code 탐색기에서 페이지를 확장한 다음 Index.razor를 선택합니다.
Index.razor 파일에서, @inject OrderState OrderState 문 뒤에 다음과 같이 IJSRuntime 주입을 추가합니다.
```
@inject OrderState OrderState
@inject IJSRuntime JavaScript
```
현재 onclick 피자를 제거하는 기능에 대한 이벤트는 OrderState.RemoveConfiguredPizza(configuredPizza)) 메서드를 직접 호출합니다. 전체 <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">❌</a> 요소를 다음 코드로 바꿉니다.
```
<button type="button" class="close text-danger" aria-label="Close"
     @onclick="@(async () => await RemovePizzaConfirmation(configuredPizza))">
     <span aria-hidden="true">&times;</span>
</button>
```
@code 파일 끝의 지시문에서 네이티브 JavaScript confirm 함수를 호출하는 새 메서드를 추가합니다. 고객이 프롬프트에서 확인을 선택하면 메서드는 주문에서 피자를 제거하기 위해 호출 OrderState.RemoveConfiguredPizza 합니다. 그렇지 않으면 피자는 순서대로 유지합니다.
```
async Task RemovePizzaConfirmation(Pizza removePizza)
{
    if (await JavaScript.InvokeAsync<bool>(
        "confirm",
        $"""Do you want to remove the "{removePizza.Special!.Name}" from your order?"""))
    {
        OrderState.RemoveConfiguredPizza(removePizza);
    }
}
```
서버는 이 메서드를 IJSRuntime.InvokeAsync 사용하여 클라이언트 쪽에서 confirm 함수를 호출합니다. 호출의 응답은 값을 반환합니다 bool . 결과가 true이면 피자는 주문에서 제거됩니다.
F5 키를 누르거나 실행>디버깅 시작을 선택합니다.
앱에서 주문에 피자를 추가합니다.
몇 개의 피자를 주문한 상태에서, 피자 중 하나 옆의 X를 선택하세요. 표준 JavaScript 확인 대화 상자가 나타납니다.
확인을 선택하고 피자가 주문에서 제거되었는지 확인합니다. 다른 피자 옆에 있는 X 를 선택하고 확인 대화 상자에서 취소 를 선택한 다음 피자가 주문에 남아 있는지 확인합니다.
ShiftF5+ 누르거나디버깅 중지> 선택하여 앱을 중지합니다.

Blazor 앱에 타사 JavaScript 라이브러리 추가

피자 회사는 확인 대화 상자의 단추에 더 명확한 텍스트를 원하며 대화 상자에서 브랜딩과 스타일을 사용하려고 합니다. 몇 가지 연구 끝에 SweetAlert라는 작은 JavaScript 라이브러리를 표준 대화 상자의 좋은 대체 항목으로 사용하기로 결정했습니다.

Visual Studio Code 탐색기에서 페이지를 확장한 다음 _Host.cshtml을 선택합니다.
_Host.cshtml 파일의 끝 부분에, 줄 <script src="_framework/blazor.server.js"></script> 뒤, 줄 </body> 앞에 SweetAlert 라이브러리를 포함하기 위해 다음 script 요소를 추가합니다.
```
<script src="https://cdn.jsdelivr.net/npm/sweetalert@latest/dist/sweetalert.min.js"></script>
```
이제 SweetAlert 라이브러리를 클라이언트 쪽에서 호출할 수 있습니다.

새 라이브러리를 사용하려면 RemovePizzaConfirmation 파일에서 메서드를 업데이트 합니다.

async Task RemovePizzaConfirmation(Pizza removePizza)
{
    var messageParams = new
    {
        title = "Remove Pizza?",
        text = $"""Do you want to remove the "{removePizza.Special!.Name}" from your order?""",
        icon = "warning",
        buttons = new
        {
            abort = new { text = "No, leave it in my order", value = false },
            confirm = new { text = "Yes, remove pizza", value = true }
        },
        dangerMode = true
    };

    if (await JavaScript.InvokeAsync<bool>("swal", messageParams))
    {
        OrderState.RemoveConfiguredPizza(removePizza);
    }
}

이름은 "swal" 타사 sweetalert.js 참조에서 가져온 JavaScript 함수의 식별자입니다. 함수를 호출하는 코드는 swal 다음과 유사합니다 confirm. 대부분의 업데이트는 함수가 매개 변수를 받는 방식에 있습니다. SweetAlert는 필요한 모든 설정을 포함하는 JSON 개체를 허용합니다.

Visual Studio Code에서 F5 키를 누르거나 실행>디버깅 시작을 선택합니다.
confirm 이 대화 상자에 "아니요, 내 주문에 그대로 두기"와 "예, 피자 제거하기"라고 적힌 두 개의 버튼이 있는지, 그리고 그들이 예상대로 작동하는지 확인합니다.
ShiftF5+ 누르거나디버깅 중지> 선택하여 앱을 중지합니다.

주문 페이지에서 실시간 주문 상태 표시

고객이 피자 주문을 하면 내 주문 페이지에서 구성 요소를 사용하여 OrderDetail 주문의 현재 상태를 표시합니다. 피자 회사는 고객이 주문이 실시간으로 어떻게 진행되는지 확인하려고 합니다. JavaScript에서 .NET 메서드를 호출하여 상태가 '배달 완료'로 표시될 때까지 지속적으로 주문 상태를 가져오도록 구성 요소를 업데이트합니다.

Visual Studio Code 탐색기에서 페이지를 확장한 다음 OrderDetail.razor를 선택합니다.
OrderDetail.razor 파일의 마지막 @inject 문 아래에 구성 요소 맨 위에 다음 선언을 추가합니다.
```
@implements IDisposable
```
이 @implements 선언을 사용하면 메서드를 정의할 수 있습니다 Dispose .
페이지에 스피너를 추가하여 페이지가 업데이트되고 있다는 고객 피드백을 제공합니다. <div class="track-order-details">에서, @foreach문 위에 다음 코드를 추가합니다.
```
@if (IsOrderIncomplete)
{
    <div class="spinner-grow text-danger float-right" role="status">
        <span class="sr-only">Checking your order status...</span>
    </div>
}
```

지시문의 @code 속성 선언 아래에 OrderId 다음 멤버를 추가합니다.

bool IsOrderIncomplete =>
    orderWithStatus is null || orderWithStatus.IsDelivered == false;

PeriodicTimer timer = new(TimeSpan.FromSeconds(3));

기존 메서드를 OnParametersSetAsync 다음 코드로 바꿉다.
```
protected override async Task OnParametersSetAsync() =>
    await GetLatestOrderStatusUpdatesAsync();
```
이제 코드는 메서드를 GetLatestOrderStatusUpdatesAsync 호출하여 주문 상태를 업데이트합니다.

업데이트 OnParametersSetAsync 된 메서드 다음에 다음 메서드를 추가합니다.

protected override Task OnAfterRenderAsync(bool firstRender) =>
    firstRender ? StartPollingTimerAsync() : Task.CompletedTask;

async Task GetLatestOrderStatusUpdatesAsync()
{
    try
    {
        orderWithStatus = await HttpClient.GetFromJsonAsync<OrderWithStatus>(
            $"{NavigationManager.BaseUri}orders/{OrderId}");
    }
    catch (Exception ex)
    {
        invalidOrder = true;
        Console.Error.WriteLine(ex);
    }
}

async Task StartPollingTimerAsync()
{
    while (IsOrderIncomplete && await timer.WaitForNextTickAsync())
    {
        await GetLatestOrderStatusUpdatesAsync();
        StateHasChanged();
    }
}

public void Dispose() => timer.Dispose();

OrderDetail 구성 요소는 페이지가 렌더링된 후 폴링을 시작하고 주문이 전달되면 폴링을 중지합니다. 주문 상태가 불완전한 동안, StartPollingTimerAsync 함수는 PeriodicTimer을(를) 사용하여 다음 틱을 비동기적으로 기다립니다. 주문이 전달되면 애니메이션 스피너가 제거되고 페이지에 최종 주문 상태가 표시됩니다.

Visual Studio Code에서 F5 키를 누르거나 실행>디버깅 시작을 선택합니다.
앱에서 피자를 주문합니다. 내 주문 화면으로 이동하여 주문이 완료되지 않은 동안 애니메이션된 빨간색 점이 나타나고 상태가 배달됨으로 표시되면 사라지는지 확인합니다.
ShiftF5+ 누르거나디버깅 중지> 선택하여 앱을 중지합니다.

피드백

이 페이지가 도움이 되었나요?