맨위로가기

블레이저 (웹 프레임워크)

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

블레이저는 마이크로소프트에서 개발한 웹 프레임워크로, .NET을 사용하여 웹 애플리케이션을 구축할 수 있게 해준다. 2017년 처음 공개되었으며, 웹 어셈블리(WebAssembly)를 사용하여 브라우저에서 실행되는 대화형 앱을 지원한다. 블레이저는 C#과 Razor 구문을 사용하여 컴포넌트를 만들며, 서버 측 렌더링과 클라이언트 측 렌더링을 모두 지원한다. .NET 8부터는 렌더링 모드를 통해 컴포넌트별로 대화형 여부와 실행 위치를 선택할 수 있다. 블레이저는 다양한 호스팅 모델을 제공하며, 블레이저 웹 앱, 블레이저 WebAssembly, 하이브리드 앱 등 다양한 방식으로 활용될 수 있다.

더 읽어볼만한 페이지

  • ASP.NET - ASP.NET 웹 폼
    ASP.NET 웹 폼은 마이크로소프트의 ASP.NET 프레임워크를 사용하여 HTML, CSS, JavaScript와 서버 측 코드를 결합해 동적 웹 애플리케이션을 개발하는 기술로, 페이지 처리 지시어, 코드 비하인드 모델, 사용자 정의 컨트롤, 상태 관리, 템플릿 엔진 등을 제공하여 웹 개발 생산성을 높이고 이전 버전 ASP보다 성능, 보안, 개발 편의성이 개선되었다.
  • ASP.NET - ASP.NET MVC
    ASP.NET MVC는 마이크로소프트가 개발한 웹 애플리케이션 프레임워크로, ASP.NET의 일부로서 모델-뷰-컨트롤러 디자인 패턴을 사용하여 웹 애플리케이션의 개발, 테스트, 유지 관리를 용이하게 하고 웹 표준 기술과 디자인 패턴을 활용하여 현대적인 웹 애플리케이션 개발에 적합한 환경을 제공한다.
  • 웹 프로그래밍 - 자바스크립트
    자바스크립트는 웹 페이지에 동적인 기능을 추가하기 위해 개발된 프로그래밍 언어로, 초기에는 라이브스크립트라 불렸으나 자바의 인기에 힘입어 변경되었고, ECMAScript로 표준화되어 웹 브라우저와 Node.js 등 다양한 환경에서 활용되지만, 오라클의 상표권 소유로 논란이 있다.
  • 웹 프로그래밍 - 웹 컴포넌트
    웹 컴포넌트는 재사용 가능한 웹 UI 요소를 만들기 위한 웹 표준 기술로, 커스텀 요소, 섀도 DOM, HTML 템플릿을 핵심 요소로 하며, 스타일과 동작을 캡슐화하고 다양한 프레임워크와의 상호 운용성을 제공하며 웹 접근성 향상에 기여한다.
  • 마이크로소프트 개발 도구 - 비주얼 스튜디오
    비주얼 스튜디오는 마이크로소프트가 개발한 통합 개발 환경(IDE)으로, 다양한 프로그래밍 언어와 플랫폼을 지원하며 소프트웨어 개발에 필요한 도구와 기능을 제공한다.
  • 마이크로소프트 개발 도구 - 윈도우 API
    윈도우 API는 마이크로소프트 윈도우 운영 체제에서 응용 프로그램이 시스템 기능에 접근하도록 돕는 인터페이스 집합이며, 다양한 버전으로 발전해 왔고, 현재 Win32가 널리 사용되며, 유연성을 제공하지만 복잡하다는 단점을 보완하기 위해 다양한 래퍼 라이브러리가 개발되었다.
블레이저 (웹 프레임워크) - [IT 관련 정보]에 관한 문서
개요
종류웹 프레임워크
개발자마이크로소프트, .NET Foundation
초기 릴리스2018년
안정화 릴리스미정
미리보기 릴리스미정
저장소https://github.com/dotnet/aspnetcore/tree/main/src/Components
운영체제리눅스, macOS, 윈도우
플랫폼해당 없음
포함ASP.NET Core
크기해당 없음
언어해당 없음
언어 수해당 없음
언어 참고해당 없음
라이선스아파치 라이선스 2.0
웹사이트https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor
표준해당 없음
기준해당 없음

2. 역사

블레이저는 ASP.NET Razor 구문을 사용하여 UI를 정의하고, ASP.NET Core 서버 프로세스에서 호스팅되는 '블레이저 서버' 버전으로 시작되었다. 이 버전에서 원격 클라이언트는 씬 클라이언트 역할을 하며, 대부분의 처리는 서버에서 이루어졌다. 클라이언트의 웹 브라우저는 작은 페이지를 다운로드하고 SignalR을 사용하여 웹소켓 연결을 통해 UI를 업데이트했다. 블레이저 서버는 .NET Core 3의 일부로 릴리스되었다.

이후, 실행 전에 클라이언트의 웹 브라우저에 다운로드되는 단일 페이지 앱인 '블레이저 웹어셈블리' 버전이 출시되었다. 이 버전은 다운로드 크기가 블레이저 서버보다 크지만, 빠른 응답 시간을 제공한다. 이름에서 알 수 있듯이, 이 클라이언트측 프레임워크는 자바스크립트가 아닌 웹어셈블리를 대상으로 한다.

블레이저 PWA 및 블레이저 하이브리드 에디션도 발표되었는데, 전자는 프로그레시브 웹 앱(PWA)를 지원하고, 후자는 웹 기술(예: HTML 및 CSS)을 사용하여 사용자 인터페이스를 렌더링하는 플랫폼 기반 프레임워크이다.

'블레이저 유나이티드'는 블레이저 서버와 블레이저 웹어셈블리를 조합한 버전으로, 개발자가 렌더링 모드를 더 세밀하게 조정할 수 있게 해준다. 이 버전은 아직 출시되지 않았으며, .NET 8 로드맵의 일부이다.

.NET 5가 출시되면서 블레이저는 인터넷 익스플로러 및 레거시 버전의 마이크로소프트 엣지에서 작동을 중단했다.[7]

블레이저 소스 코드는 처음에 GitHub의 자체 저장소에 있었으나, 이후 ASP.NET Core monorepo에 병합되었다.

2. 1. 초기 개발

2017년, NDC 오슬로에서 마이크로소프트의 소프트웨어 엔지니어 스티브 샌더슨은[6] "블레이저"라고 불리는 실험적인 클라이언트 측 웹 애플리케이션 프레임워크를 공개했다. 이 시연에서는 WebAssembly를 사용하여 브라우저에서 실행되는 대화형 앱과 Visual Studio에서의 기본적인 개발 경험을 보여주었다. 샌더슨은 C#과 Razor 구문을 사용하여 대화형 컴포넌트를 구축하는 방법을 시연했다. 그 후 앱은 WebAssembly로 컴파일된 DotNetAnywhere라는 경량의 타사 오픈 소스 .NET 런타임에서 실행되는 .NET 어셈블리로 컴파일되었다.

스티브 샌더슨이 설명한 바와 같이, "Blazor"라는 이름은 "Browser(브라우저)"와 "Razor(레이저)"의 혼성어이다(사용된 Razor 구문에서 유래).

블레이저는 마이크로소프트에 의해 공식적인 오픈 소스 프로젝트로 인정받았고, 2018년에는 .NET Core 3.1의 일부로 블레이저 서버가 공개되었다. 이는 WebSocket을 통해 클라이언트 브라우저를 업데이트하는 서버 기반 대화형 웹 앱을 가능하게 했다. 그 직후, 블레이저 WebAssembly가 출시되었는데, 이 프로토타입과 달리, Mono .NET 런타임을 WebAssembly에서 사용했다. 이는 .NET MAUI (이전의 Xamarin)로 모바일 앱을 개발하는 데 사용되는 것과 동일한 런타임이다.

2. 2. 공식 출시 및 발전

블레이저는 2018년에 .NET Core 3.1의 일부로 블레이저 서버가 공개되면서 공식 출시되었다.[6] 블레이저 서버는 SignalR과 웹소켓을 사용하여 클라이언트 브라우저를 업데이트하는 서버 기반 대화형 웹 앱을 지원한다. 얼마 지나지 않아 Mono .NET 런타임을 WebAssembly에서 사용하는 블레이저 WebAssembly가 출시되었다.[6]

.NET 5가 출시되면서 블레이저는 인터넷 익스플로러 및 레거시 버전의 마이크로소프트 엣지에 대한 지원을 중단했다.[7]

2023년, .NET 8과 함께 블레이저는 서버 측 렌더링(SSR)을 지원하도록 변경되었다.[8] 이를 통해 블레이저는 MVC Razor 페이지의 대안으로 사용될 수 있게 되었다. 또한, 개발자는 "렌더 모드"를 통해 컴포넌트 또는 페이지별로 대화형 여부와 실행 위치(서버 또는 WebAssembly를 사용하는 브라우저)를 선택할 수 있게 되었다.

현재까지 발표된 블레이저의 주요 버전은 다음과 같다.

버전설명
블레이저 서버ASP.NET Core 서버에서 호스팅되며, SignalR을 사용하여 UI를 업데이트한다. .NET Core 3의 일부로 출시되었다.
블레이저 웹어셈블리싱글 페이지 애플리케이션(SPA)으로, WebAssembly를 사용하여 클라이언트 측에서 실행된다.
블레이저 유나이티드블레이저 서버와 블레이저 웹어셈블리의 조합. .NET 8 로드맵의 일부이며 아직 출시되지 않았다.


3. 구성 요소

구성 요소는 공식적으로 '''레이저 컴포넌트'''라고 불린다.[1]

레이저 컴포넌트는 주로 렌더링에 영향을 주기 위해 C#의 인라인 사용을 가능하게 하는 레이저 템플릿 구문과 혼합된 HTML로 구성된다.[1]

블레이저 컴포넌트 모델은 컴포넌트의 상태가 변경될 때, 일반적으로 사용자 작업에 대한 응답으로 렌더링된 마크업이 업데이트되도록 한다.[1]

마크업과 C# 코드는 동일한 `.razor` 파일에 배치할 수 있으며, 부분 클래스를 사용하여 별도의 코드 숨김 파일을 가질 수도 있다.[1]

컴포넌트는 .NET 클래스로 컴파일된다. 컴포넌트의 HTML 및 레이저 마크업은 렌더링 트리를 구축하는 코드로 변환되며, 이 트리가 실제 렌더링을 구동한다.[1]

3. 1. 구성 요소 예제

다음은 버튼을 클릭하면 값이 증가하는 간단한 카운터 구성 요소 예시다.

```razor

카운터



개수: @count





@code

{

private int count = 0;

private void Increment()

{

count++;

}

}

```

`` 태그는 허용되지 않는 문법이므로 제거했다. 코드 블록은 \`\`\`razor 형태로 표시하는 것이 적절하다.

4. 호스팅 모델

블레이저 앱은 여러 가지 방식으로 호스팅될 수 있다. .NET 8 현재의 호스팅 모델은 다음과 같다.


  • 블레이저 서버: ASP.NET Core 서버에서 호스팅되며, 원격 클라이언트는 씬 클라이언트(thin client)로 작동하여 처리의 대부분은 서버에서 수행된다. 클라이언트의 웹 브라우저는 작은 페이지를 다운로드하고 SignalR 연결을 통해 UI를 업데이트한다. 블레이저 서버는 .NET Core 3의 일부로 릴리스되었다.
  • 블레이저 웹어셈블리: 실행 전에 클라이언트의 웹 브라우저에 다운로드되는 싱글 페이지 애플리케이션(SPA)이다. 다운로드 크기는 블레이저 서버보다 크며 애플리케이션에 따라 다르며, 모든 처리는 클라이언트 하드웨어에서 수행된다. 이 앱 타입은 응답 시간이 빠르다. 이 클라이언트 측 프레임워크는 자바스크립트와는 대조적으로 WebAssembly로 기술되어 있다(함께 사용할 수 있다).

4. 1. Blazor Web App (Server)

'''블레이저 서버''' 앱은 ASP.NET Core 앱의 일부로 서버에서 호스팅된다. ASP.NET Razor 형식을 사용하여 ASP.NET Core 서버에서 호스팅되며, 원격 클라이언트는 씬 클라이언트(thin client)로 작동하여 처리의 대부분은 서버에서 수행된다. 클라이언트의 웹 브라우저는 작은 페이지를 다운로드하고 SignalR 연결을 통해 UI를 업데이트한다. 블레이저 서버는 .NET Core 3의 일부로 릴리스되었다.

.NET 8부터는 레이저 컴포넌트의 상호작용 여부와 방식을 구성하는 렌더링 모드 개념이 도입되었으며, 렌더링 모드에는 정적 서버, 대화형 서버, 대화형 WebAssembly, 대화형 자동 방식이 있다. 또한, 서버에서 미리 렌더링을 하여 초기 구체화 및 상호작용 시간을 줄일 수 있다. 향상된 탐색 기능은 정적 사이트에서의 탐색을 단일 페이지 애플리케이션처럼 부드럽게 만들어 준다.

4. 1. 1. 렌더링 모드

.NET 8에서 블레이저는 레이저(Razor) 컴포넌트가 대화형인지 여부와 해당 상호 작용을 구동하는 방식을 구성하는 렌더링 모드 개념을 도입했다.[1]

렌더링 모드는 설정된 렌더링 모드를 가진 최상위 부모 컴포넌트에서 컴포넌트 계층 내에서 상속된다.[1] 이는 자식 컴포넌트의 렌더링 모드가 기본값인 정적 서버(Static Server)가 아닌 한 자식 컴포넌트에서 재정의할 수 없다.[1]

  • '''정적 서버(Static Server)''' – 컴포넌트는 서버에서 대화형 기능 없이 정적으로 렌더링된다. 이것이 기본값이다.[1]
  • '''대화형 서버(Interactive Server)''' – 컴포넌트는 서버에서 대화형 모드로 실행된다. 상호 작용은 서버에서 제어되며 변경 사항은 SignalR을 사용하여 WebSocket을 통해 클라이언트에 푸시된다.[1]
  • '''대화형 WebAssembly''' – 컴포넌트는 WebAssembly를 사용하여 브라우저에서 대화형 모드로 실행된다.[1]
  • '''대화형 자동(Interactive Auto)''' – 블레이저 번들이 다운로드되는 동안 이 모드는 처음에 대화형 서버 렌더링 모드로 컴포넌트를 로드한다. 후속 방문 시에는 클라이언트에서 대화형 WebAssembly가 사용된다.[1]


Blazor Server와 Blazor WebAssembly를 모두 조합하여, 개발자가 렌더링 모드를 더 세밀하게 조정할 수 있는 "두 가지 장점"을 갖춘 솔루션을 가능하게 한다.[1] 이 접근 방식을 통해 Blazor WebAssembly가 필요로 하는 대규모 사전 다운로드와 Blazor Server가 필요로 하는 상시 연결의 SignalR의 단점을 극복한다.[1] 이 Blazor United는 .NET 8 로드맵의 일부이며, 2023년 현재 아직 출시되지 않았다.[1]

4. 1. 2. 사전 렌더링 (Prerendering)

대화형 구성 요소는 클라이언트에서 구체화되고 상호 작용이 시작되기 전에 서버에서 미리 렌더링된다. 이 동작은 기본적으로 켜져 있지만 끌 수 있다.

4. 1. 3. 향상된 탐색 (Enhanced navigation)

이 기능은 정적 사이트에서의 탐색을 단일 페이지 애플리케이션(SPA)처럼 훨씬 부드럽게 만들어준다.

한 정적 페이지에서 다른 페이지로 탐색할 때, 앱은 탐색을 가로채 대상 페이지의 내용만 가져온 다음, DOM에 변경 사항만 적용한다. 이렇게 하면 다른 페이지로 이동할 때 일반적으로 페이지가 완전히 다시 로드되면서 발생하는 깜빡임이 없다.

4. 2. WebAssembly (Standalone)

이것은 클라이언트 브라우저에서 실행되는 독립 실행형 대화형 WebAssembly 앱이다.

브라우저에서 앱으로 이동하면 앱 번들이 다운로드된 다음 로드되어 브라우저의 샌드박스 내에서 실행된다.

WebAssembly 앱은 프로그레시브 웹 앱으로 만들 수도 있다.

.NET 8 이전에는 ASP.NET Core 애플리케이션 내에서 블레이저 웹 어셈블리 앱을 호스팅하는 프로젝트 템플릿이 있었으며, 이 템플릿에는 웹 API가 포함되어 있었다. 이 기능은 여전히 ​​유지되지만, 이 템플릿은 블레이저 웹 앱 프로젝트 템플릿을 선호하여 제거되었다.

실행 전에 클라이언트의 웹 브라우저에 다운로드되는 싱글 페이지 애플리케이션(SPA)이다. 다운로드 크기는 Blazor Server보다 크며 애플리케이션에 따라 다르며, 모든 처리는 클라이언트 하드웨어에서 수행된다. 단, 이 앱 타입은 응답 시간이 빠르다. 이름에서 알 수 있듯이, 이 클라이언트 측 프레임워크는 자바스크립트와는 대조적으로 WebAssembly로 기술되어 있다(함께 사용할 수 있다).

프로그레시브 웹 애플리케이션(PWA)을 지원한다. 플랫폼 네이티브 프레임워크이지만(웹 프레임워크와는 대조적으로), 웹 기술(HTML 및 CSS 등)을 사용하여 사용자 인터페이스를 렌더링한다.

4. 3. Hybrid

블레이저 앱은 WebView를 사용하여 네이티브 앱 내에서 실행될 수 있다.[10] 렌더링은 웹 서버 없이 호스팅 프로세스에서 수행된다.

하이브리드 앱은 윈도우 프리젠테이션 파운데이션 또는 WinForms 응용 프로그램에서 호스팅할 수 있다.

이 접근 방식은 .NET MAUI를 사용하여 블레이저로 네이티브 모바일 앱을 구축하는 데 사용된다. 하이브리드 앱은 플랫폼 네이티브 프레임워크이지만, 웹 기술(HTML 및 CSS 등)을 사용하여 사용자 인터페이스를 렌더링한다.

4. 4. Server (Legacy)

ASP.NET Core 서버에서 ASP.NET Razor 형식을 사용하여 호스팅된다. 원격 클라이언트는 씬 클라이언트(thin client)로 작동하며, 처리의 대부분은 서버에서 수행된다. 클라이언트의 웹 브라우저는 작은 페이지를 다운로드하고 SignalR 연결을 통해 UI를 업데이트한다. Blazor Server는 .NET Core 3의 일부로 출시되었다.

서버 주도형 대화형 컴포넌트를 활성화하고, 변경 사항은 WebSockets를 사용하여 클라이언트로 전송하는 것이 의도된 사용 사례였다. 컴포넌트는 MVC Razor 페이지 내에서 렌더링되었다. 또한 WebAssembly 컴포넌트의 사전 렌더링도 가능하게 했다.

이 호스팅 모델은 공식적으로 "Blazor Server"라고 불렸으며, Blazor 웹 앱을 선호하여 더 이상 사용되지 않는다.

참조

[1] 웹사이트 Web Assembly and Blazor: Re-assembling the Web https://weblog.west-[...] "[[WP:SPS|Self-published]]" 2018-07-31
[2] 웹사이트 Blazor: .NET in the Browser https://tomassetti.m[...] Strumenta 2018-09-04
[3] 웹사이트 Blazor .NET In The Browser https://www.i-progra[...] "[[WP:SPS|Self-published]]" 2018-02-12
[4] 간행물 C# in the Browser with Blazor https://docs.microso[...] 2018-09-01
[5] 웹사이트 Get started building .NET web apps that run in the browser with Blazor https://devblogs.mic[...] "[[Microsoft]]" 2018-03-22
[6] 웹사이트 Web Apps can't really do *that*, can they? - Steve Sanderson https://www.youtube.[...] 2017-07-10
[7] 웹사이트 Updated Blazor browser support for .NET 5 https://github.com/d[...] "[[Microsoft]]" 2020-09-30
[8] 웹사이트 ASP.NET Core Blazor fundamentals https://learn.micros[...] 2024-12-02
[9] 웹사이트 ASP.NET Core Blazor render modes https://learn.micros[...] 2024-02-09
[10] 웹사이트 ASP.NET Core Blazor Hybrid https://learn.micros[...]
[11] 웹인용 Web Assembly and Blazor: Re-assembling the Web https://weblog.west-[...] "[[WP:SPS|Self-published]]" 2018-07-31
[12] 웹인용 Blazor: .NET in the Browser https://tomassetti.m[...] Strumenta 2018-09-04
[13] 웹인용 Blazor .NET In The Browser https://www.i-progra[...] "[[WP:SPS|Self-published]]" 2018-02-12
[14] 간행물 C# in the Browser with Blazor https://docs.microso[...] 2018-09-01
[15] 웹인용 Get started building .NET web apps that run in the browser with Blazor https://devblogs.mic[...] "[[마이크로소프트]]" 2018-03-22


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com