연습 - Azure App Configuration 인스턴스에서 구성 설정 구현

10분

애플리케이션의 새로운 요구 사항은 이제 기능 플래그가 제품에 대한 할인을 제어할 수 있도록 하는 것입니다. 이 연습에서는 이 작업 방법을 보여줍니다.

Azure App Configuration 인스턴스에 구성 설정을 추가합니다.
제품 가격을 할인하는 새 설정을 사용하도록 코드를 추가합니다.
앱 빌드 및 테스트.

App Configuration 저장소에 구성 설정 추가

이제 Azure App Configuration에서 새 키-값 쌍을 만들어 판매 할인율을 저장합니다. 다음 단계를 완료합니다.

다른 브라우저 탭에서 Azure CLI와 동일한 계정 및 디렉터리를 사용하여 Azure Portal에 로그인합니다.
검색 상자를 사용하여 eshop-app-features 접두사가 추가된 App Configuration 리소스를 찾아 엽니다.
작업 섹션에서 구성 탐색기를 선택합니다.
위쪽 메뉴에서 + 만들기를 선택하고 키-값을 선택합니다.
키 텍스트 상자에 eShopLite__Store__DiscountPercent를 입력합니다.
값 텍스트 상자에 0.8을 입력합니다.
적용을 선택합니다.

새 구성 설정을 사용하는 코드 추가

새 구성 설정을 사용할 수 있도록 제품 페이지를 업데이트해야 합니다. 다음 단계를 완료합니다.

Visual Studio Code에서 Store/Components/Pages/Products.razor 파일을 엽니다.
@code 섹션에서 다음 변수를 추가하여 기능 플래그의 상태를 저장합니다.
```
private decimal discountPercentage;  
```

OnInitializedAsync 메서드에서 다음 코드를 추가하여 구성 설정의 값을 검색합니다.

if (saleOn) {
  discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
}

메서드는 다음 코드와 같은 모습입니다.

protected override async Task OnInitializedAsync()
{
    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    // Simulate asynchronous loading to demonstrate streaming rendering
    products = await ProductService.GetProducts();

    if (saleOn) {
      discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
    }
}

위의 코드는 Configuration 개체를 사용하여 구성 설정의 값을 검색합니다. 값은 discountPercentage 변수에 10진수로 저장됩니다.

할인 가격 표시

할인 가격이 표시되도록 제품 페이지를 업데이트해야 합니다. 다음 단계를 완료합니다.

<td>@product.Price</td>를 다음 코드로 바꿉니다.
```
<td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>
```
위 코드는 시즌 세일이 사용되는지를 확인합니다. 시즌 세일이 사용되는 경우 원래 가격에 줄이 그어지고 그 아래에 할인 가격이 표시됩니다. 시즌 세일을 사용하지 않는 경우 원래 가격이 표시됩니다.

앱 빌드

모든 변경 내용이 저장되고 dotnet-feature-flags 디렉터리에 있는지 확인합니다. 터미널에서 다음 명령을 실행합니다.
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Docker를 사용하여 앱을 실행합니다.
```
docker compose up
```

가격 할인 기능 테스트

기능 플래그가 코드 영역에서 예상대로 작동하는지 확인하기 위해 다음 단계를 완료합니다.

포트 탭으로 전환한 다음 프런트 엔드 포트의 로컬 주소 오른쪽에 있는 지구본 아이콘을 선택합니다. 브라우저가 해당 홈페이지에서 새 탭을 엽니다.
제품을 선택합니다.

Visual Studio Code를 로컬로 사용하는 경우 http://localhost:32000/products가 열립니다.

기능 플래그가 시즌 세일을 제어하는지 테스트하려면 다음 단계를 완료합니다.

Azure Portal에서 접두사가 eshop-app-features인 Azure App Configuration 리소스로 이동합니다.
작업 섹션에서 기능 관리자를 선택합니다.
SeasonalDiscount가 사용으로 설정된 토글을 선택하여 이 기능을 해제합니다.
브라우저에서 애플리케이션으로 돌아갑니다.
홈 페이지와 제품 페이지를 차례로 선택합니다.

캐시를 지우는 데 최대 30초가 걸릴 수 있습니다. 세일 배너가 계속 표시되는 경우 몇 초 정도 기다렸다가 페이지를 다시 새로 고칩니다.