[Blazor] Blazor 란?

참고

• https://azderica.github.io/00-web-webassembly/
• https://blog.dotnetdev.kr/blazor%EC%99%80-c-%EC%9C%BC%EB%A1%9C-%ED%92%80%EC%8A%A4%ED%83%9D-%EC%9B%B9-%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0-3cda61c2217

WebAssembly 란?

• 웹 어샘블리는 C나 C++와 같은 프로그래밍 언어를 컴파일해서 어느 브라우저에서나 빠르게 실행되는 바이너리 형식으로 바꿔주는 기술을 의미합니다.
• 일반적으로 웹 어플리케이션을 개발할 때 사용하는 언어는 HTML/CSS/JavaScript 이며, 그 중 JavaScript 는 동적인 부분을 개발합니다.
• 기존의 개발은 JavaScript로 개발을 하다보니 게임이나 동영상 편집기 등과 같은 고성능의 애플리레이션은 브라우저에서 동작하는데 어려움이 있습니다.
• 웹 어셈블리 모듈은 웹앱으로 가져와서 JavaScript를 통해 사용할 수 있게 할 수 있습니다.
• JavaScript 프레임워크는 웹 어셈블리를 사용해서 대규모 성능 이점과 새로운 기능을 제공하면서 웹 개발자가 쉽게 기능을 사용할 수 있도록 할 수 있습니다.

Blazor 란?

• Blazor 는 Blazor를 사용하여 대화형 클라이언트 쪽 웹 UI를 빌드하기 위한 프레임워크 입니다.
  • JavaScript 대신 C#을 사용하여 풍부한 대화형 UI를 만듭니다.
  • .NET에서 작성된 서버 쪽 및 클라이언트 쪽 앱 논리를 공유합니다.
  • 모바일 브라우저를 포함한 광범위한 브라우저 지원을 위해 UI를 HTML 및 CSS 로 렌더링합니다.
  • Docker 와 같은 최신 호스트 플랫폼과 통합합니다.
  • .NET 및 Blazor를 사용하여 하이브리드 데스크톱 및 모바일 앱을 빌드합니다.
• 클라이언트 쪽 웹 개발에 .NET을 사용하면 다음과 같은 이점이 있습니다.
  • JavaScript 대신 C# 으로 코드를 작성합니다.
  • .NET 라이브러리의 기존 .NET 에코시스템을 활용합니다.
  • 서버 및 클라이언트에서 앱 논리를 공유합니다.
  • .NET의 성능, 안정성 및 보안을 활용합니다.
  • 안정적이로, 기능이 풍부하고, 사용하기 쉬운 공통 언어, 프레임워크 및 도구 세트를 기반으로 빌드합니다.

Blazor 아키텍처

• Blazor는 실제로 Angular 또는 React 같은 JavaScript 프런트 엔드 프레임워크와 유사한 클라이언트 쪽 웹 UI 프레임워크입니다.
• Blazor는 사용자 상호 작용을 처리하고 필요한 UI 업데이터를 렌더링합니다.
• Blazor는 요청-회신 모델을 기반으로 하지 않습니다.
• 사용자 상호 작용은 특정 HTTP 요청의 컨텍스트에 포함되지 않는 이벤트로 처리됩니다.
• Blazor 앱은 HTML 페이지에서 렌더링되는 하나 이상의 루트 구성 요소로 구성됩니다.

• 사용자가 구성 요소를 렌더링할 위치 및 사용자 상호 작용의 구성 요소를 연결하는 방식을 지정하는 방법은 호스팅 모델에 따라 다릅니다.
• Blazor 구선 요소는 재사용 가능한 UI 부분을 나타내는 .NET 클래스입니다.
• 각 구성 요소는 자체 상태를 유지 관리하며 다른 구성 요소 렌더링을 포함할 수 있는 자체 렌더링 논리를 지정합니다.
• 구성 요소는 구성 요소 상태를 업데이트하기 위한 특정 사용자 상호 작용의 이벤트 처리기를 지정합니다.
• 구성 요소가 이벤트를 처리한 후 Blazor는 구성 요소를 렌더링하고 렌더링된 출력에서 변경 내용을 추적합니다.
• 구성 요소는 DOM(문서 개체 모델)으로 직접 렌더링되지 않습니다.
• 대신, RenderTree 라는 DOM 의 메모리 내 표현으로 렌더링되므로 Blazor가 변경 내용을 추적할 수 있습니다.
• Blazor 는 새로 렌더링된 출력을 이전 출력과 비교하여 DOM에 효율적으로 적용 될 UI 차이를 계산합니다.

• 구성 요소는 정상적인 UI 이벤트 외부에서 상태가 변경되는 경우 렌더링되어야 함을 수동으로 나타낼 수도 있습니다.
• Blazor 는 SynchronizationContext 를 사용하여 단일 논리적 실행 스레드를 적용합니다.
• 구성 요소의 수명 주기 메서드 및 Blazor에서 발생하는 모든 이벤트 콜백은 SynchronizationContext에서 실행됩니다.