소개

  • 3분

피자 배달 회사에서 피자 목록, 주문 페이지 및 기타 기능을 포함하는 고객 관련 Blazor 웹 사이트를 현대화하도록 고용합니다. Blazor 대화형 웹 애플리케이션은 .NET을 사용하여 서버와 클라이언트 코드 간에 논리를 공유합니다.

업데이트에서 다음을 수행하려고 합니다.

  • JavaScript를 사용하여 렌더링된 HTML 구성 요소에 애니메이션 효과를 줍니다.
  • JavaScript 라이브러리를 사용하여 경고 페이지에 브랜딩을 적용합니다.
  • 페이지 렌더링이 완료된 후 앱이 이벤트에 응답하는 방식을 변경합니다.
  • 템플릿 구성 요소를 만들고 적용하여 여러 페이지를 업데이트합니다.

이 모듈에서는 Blazor에서 JavaScript 코드와 상호 운용하고, 템플릿 구성 요소를 사용하고, 구성 요소 수명 주기 이벤트에 응답하는 방법을 보여 줍니다.

학습 목표

  • .NET 코드에서 JavaScript 함수를 호출하고 Blazor 앱의 JavaScript에서 .NET 코드를 호출합니다.
  • Blazor 구성 요소의 수명 주기에서 이벤트를 처리합니다.
  • Blazor 앱에 통합할 수 있는 재사용 가능한 템플릿 구성 요소를 만듭니다.

사전 요구 사항

  • HTML, CSS, JavaScript 웹 개발 친숙성.
  • C# 코드를 작성할 수 있는 초보자 능력.
  • .NET 8.0 SDK가 설치됨.
  • IDE(통합 개발 환경). 이 모듈에서는 Visual Studio Code를 사용합니다.

팁

이 모듈에서는 로컬 개발에 .NET CLI(명령줄 인터페이스) 및 Visual Studio Code를 사용합니다. 이 모듈을 완료한 후 Windows용 Visual Studio 또는 Mac용 Visual Studio를 사용하거나 Windows, Linux 또는 Mac용 Visual Studio Code를 사용하여 개념을 적용하고 개발을 계속할 수 있습니다.

.NET 8.0 SDK

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

dotnet --list-sdks

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

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

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