.NET의 Front-End 웹 프레임워크인 Blazor에 대해 알아보자!

개요

MS Learn에서 'Blazor를 사용한 웹 개발 소개' 파트 부분을 이해하기 쉽도록 핵심 요점만 일부 적절한 의역을 통해 정리하였습니다.

 

 

Blazor란?

HTML, CSS, C#을 기반으로 하는 .NET 플랫폼의 최신 Front-End Web Framework이다.

 

Blazor를 사용하는 것의 장점

• 재사용이 용이하여 웹 UI를 빠르게 빌드할 수 있다
• C#으로 UI 이벤트 로직을 쉽게 구현할 수 있다.
• C#만으로 Front, Back 둘 다 개발할 수 있고 서로 통신할 수 있다.
• 효율적인 차이 기반 랜더링(diff-based rendering)을 통해 DOM을 조작할 수 있다.
• 서버 사이드 랜더링(이하 SSR), 클라이언트 사이드 랜더링(이하 CSR)을 지원한다.
• 향상된 탐색(built-in support for enhanced navigation), 폼 처리(form handling), 스트리밍 렌더(streaming rendering) 등을 통해 서버 사이드 랜더링 웹앱의 사용자 환경을 향상시킨다.
• C#에서 Javascript 라이브러리 및 브라우저 API의 에코시스템을 사용할 수 있다.
• 기존 .NET 플랫폼의 MVC, Razor Pages 그리고 Javascript 기반의 앱을 Blazor와 통합할 수 있다.
• 여러 IDE(Visual Studio, Visual Studio Code)에서 지원한다.
• 웹, 모바일, 데스크톱 등 여러 플랫폼 앱을 빌드할 수 있다.

 

 

Blazor 작동 원리

Blazor 구성 요소(components)

• Blazor 앱은 컴포넌트로 빌드된다.
• Blazor 컴포넌트는 재사용 가능한 웹 UI 조각이다
• Blazor 컴포넌트는 렌더링, UI/이벤트 처리 논리를 캡슐화한다.
• Blazor 컴포넌트는 여러 기본 제공 컴포넌트가 있다.
  • 양식 처리(form handling)
  • 사용자 입력 유효성 검사(user input validation)
  • 대용량 데이터 집합 표시(displaying large data sets)
  • 인증 및 권한 부여(authentication, authorization)
  • ... 등
• Blazor 에코 시스템에서 컴포넌트를 공유/사용할 수 있다.
  • 개발자는 자체 Blazor 컴포넌트를 빌드하고 공유할 수 있다.
  • 미리 빌드된 다른 Blazor 컴포넌트를 사용할 수도 있다.

 

표준 웹 기술 사용

• Blazor 컴포넌트는 Razor 구문을 사용하여 작성한다.
  • Razor 문법은 HTML, CSS, C#를 혼합한 문법을 사용한다.
  • Razor 파일은 조건부, 제어 흐름 및 식 평가와 같은 렌더링 논리가 정의된 HTML, C# 문법이 포함된다.
  • 그렇게 작성된 Razor 파일은 C# 클래스로 컴파일된다.
  • Razor에서 작성된 Blazor 컴포넌트는 결국 C# 클래스이므로, 임의의 .NET 코드를 컴포넌트에 재사용할 수 있다.

 

UI 이벤트 처리 및 데이터 바인딩

• 상호작용 가능한(Interactive) Blazor 컴포넌트는 C# 이벤트 헨들러를 사용하여 표준 웹 UI 상호작용을 처리할 수 있다.
• 컴포넌트는 UI 이벤트에 대한 응답으로 상태를 업데이트하고 그에 따라 렌더링 여부를 결정할 수 있다.
• Blazor는 양방향 데이터 바인딩을 지원하여 컴포넌트 상태를 UI 요소와 동기화된 상태로 유지할 수 있다.

예시

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

해당 코드는 Razor에서 구현한 간단한 Blazor 카운팅 컴포넌트의 예시이다.

• @code에는 C# 코드가 위치한다.
• 버튼을 누를 때마다 IncrementCount() 메서드가 호출되어 currentCount 값이 증가한다.
• 컴포넌트가 증가된 currentCount를 렌더링한다.

 

 

Blazor에서의 SSR과 CSR

Blazor는 다양한 웹 UI 아키텍처를 처리하기 위해 SSR, CSR을 모두 지원한다.
SSR의 경우, 데이터베이스 및 백엔드 서비스와 같은 서버 리소스에 접근할 수 있다.
기본적으로 Blazor 컴포넌트는 서버에서 정적으로 렌더링되어 요청에 대한 응답으로 HTML을 생성한다.

 

Blazor에서는 SSR에서 컴포넌트를 상호작용 가능하게 구성할 수 있다.

• 임의 UI 이벤트를 처리할 수 있다.
• 상호작용 후 상태를 유지하며 동적으로 업데이트를 렌더링할 수 있다.
• 이러한 UI 상호작용과 업데이터 처리는 브라우저와 웹소켓(WebSocket) 연결을 통해 처리한다.
• SSR 특성 상, 인터넷 접속을 유지하여야 작동될 수 있다.

Blazor에서 SSR 상호작용 방식

 

 

Blazor에서는 CSR에서 컴포넌트를 상호작용하게 구현할 수 있다.

• 클라이언트는 컴포넌트를 다운로드한다.
• 다운로드된 컴포넌트는 웹 어셈블리(WebAssembly)를 통해 브라우저에서 실행된다.
• 해당 컴포넌트는 로컬 스토리지 및 하드웨어와 같은 웹 플랫폼을 통해 클라이언트 리소스에 액세스할 수 있다.
• CSR 특성 상, 컴포넌트 다운로드만 완료되면 오프라인에서 작동될 수 있다.

Blazor에서 CSR 상호작용 방식

 

Blazor에서는 동일한 앱에서 SSR, CSR을 선택할 수 있다.

• 클라이언트와 상호작용이 적은 특정 페이지에서는 SSR로 적용할 수 있다.
• 클라이언트와 상호작용이 많은 특정 페이지에서는 CSR로 적용할 수 있다.
• SSR, CSR은 애플리케이션을 만드는 과정이나 실제 런타임 때 어떤 모드를 사용할지 결정할 수 있다.

즉, Blazor는 요구사항에 맞는 웹 애플리케이션 아키텍처를 구축할 수 있도록 여러 방식(SSR, CSR)을 제공한다.

 

 

Blazor를 사용해야 하는 경우

이럴 때 사용하는 것이 좋다.

• 생산성이 좋은 풀 스택 웹 개발 솔루션이 필요할 때
• 프론트엔드 개발팀 없이 웹을 구축해야할 때
• .NET에 익숙한 개발자가 .NET 기술 및 리소스를 웹에 적용하고 싶을 때
• 고성능/고확장성의 백엔드를 지원하는 웹 애플리케이션을 구축해야할 때

 

이런 경우는 적합하지 않을 수 있다.

• 클라이언트의 리소스 다운로드 크기와 로딩 시간을 최적화해야 할 때
• 기존에 구현된 다른 프론트엔드 프레임워크 생태계와 많은 통합이 필요할 때
• 구형 웹 브라우저(IE)에 대한 지원이 필요할 때

 

 

참고자료

Blazor를 사용한 웹 개발 소개 - Training | Microsoft Learn

Blazor를 사용한 웹 개발 소개 - Training