Blazor vs Razor: The Difference Solved

Blazor 구성 요소와 Razor 구성 요소에 대한 용어는 널리 같은 의미로 사용됩니다. 그러나 Blazor와 Razor는 서로 다른 두 가지입니다. Razor 대 Blazor에 대한 모든 것을 배우고 Ignite UI에서 각각을 사용하는 방법을 확인하십시오.

Jason Beres Last Updated Feb 18, 2025 6min read

.NET 6이 출시되고 C# 개발자가 단일 페이지 웹 애플리케이션을 작성하기 위한 솔루션으로 Blazor 대한 하이프 사이클이 발생함에 따라 "Blazor와 Razor의 차이점은 무엇입니까?"

Blazor와 Razor는 서로 다른 두 가지 기능을 나타내기 때문에 직접 비교할 수는 없지만 Blazor 구성 요소와 Razor 구성 요소에 대한 용어가 서로 바꿔 사용되는 경우가 많습니다.

이 기사에서는 Blazor와 Razor의 차이점을 정리하고 Ignite UI for Blazor에서 각각을 사용하는 방법을 보여줍니다. 또한 Ignite UI의 카드 보기 구성 요소를 사용하여 .NET 6 앱을 빌드하므로 실제 애플리케이션에서 Blazor 및 Razor 익숙해질 수 있습니다.

Try Ignite UI for Blazor

Blazor 란?

Blazor는 무료 오픈 소스 웹 프레임워크로, 개발자가 JavaScript 대신 C#, HTML 코드 및 Razor 구문을 사용하여 대화형 웹 UI를 만들 수 있도록 합니다. Blazor 작동 방식은 WebAssembly를 사용하여 클라이언트 기반 앱을 만들고 ASP.NET 를 사용하여 서버 측 애플리케이션을 만드는 것입니다. Server 앱은 SignalR을 사용하여 지속적인 연결을 통해 브라우저와 통신하는 반면 WebAssembly는 브라우저에서 직접 실행됩니다.

블로그에는 Blazor, Blazor WebAssembly 및 Blazor Server에 대한 자세한 개요가 있습니다. 따라서 더 자세히 알고 싶다면 Blazor Server vs. Blazor WebAssembly 블로그 게시물을 읽어보세요.

What Is Razor

Blazor는 프레임워크인 반면 Razor 또는 Razor Pages는 템플릿(보기) 엔진입니다. Razor 구문은 Razor 마크업, C# 및 HTML을 결합하여 동적 웹 콘텐츠를 만듭니다. 일반적으로 Razor는 ASP.NET MVC View에 전원을 공급하는 데 사용됩니다. 따라서 MVC 뷰를 작성할 때마다 일반적으로 Razor 구문을 사용하여 데이터를 태그에 바인딩합니다. MVC 앱에서 Razor 페이지는 서버에서 처리된 다음 단일 HTML 페이지로 클라이언트에 전송됩니다. 브라우저에서 페이지를 새로 고치면 서버에서 다시 처리되어 클라이언트로 다시 전송됩니다.

Razor vs Blazor: 차이점과 그들 사이의 연결 고리가 해결되었습니다.

Blazor는 Razor 구성 요소를 활용하여 동적 HTML을 생성하는 프레임워크입니다. Razor와 Blazor의 가장 큰 차이점은 Razor는 C#을 사용하는 마크업 언어이고 Blazor는 C# 코드를 실행하고 브라우저에서 Razor 뷰 엔진을 사용할 수 있는 프레임워크라는 것입니다.

그리고 Blazor 대 Razor 구성 요소는 어떻습니까?

Razor 구성 요소는 .razor 확장으로 구현된 모든 Blazor 앱의 기본 UI 요소를 나타내는 태그 및 코드의 단위입니다. 즉, Blazor는 Razor 구성 요소를 사용하여 UI를 생성하므로 Razor 구성 요소를 작성하고 Blazor 클라이언트 측 호스팅 모델로 활용할 수 있습니다.

Ignite UI에서 Blazor 및 Razor 사용하는 방법입니다.

시작하려면 컴퓨터에 NodeJS와 Visual Studio Code를 모두 설치해야 합니다.

1단계 - 새 Blazor 프로젝트 만들기

Visual Studio 2022를 시작하고 시작 페이지에서 새 프로젝트 만들기를 클릭하고 Blazor 웹 어셈블리 앱 템플릿을 선택한 후 다음을 클릭합니다. 프로젝트 이름과 설명을 제공한 후 만들기를 클릭합니다.

Create a Blazor WebAssembly App in Visual Studio 2022

2단계 –Ignite UI for Blazor 패키지 설치

솔루션 또는 프로젝트를 마우스 오른쪽 단추로 클릭하고 솔루션에 대한 NuGet 패키지 관리를 선택합니다. 그런 다음, 패키지 관리자 대화 상자에서 찾아보기 탭을 열고, Infragistics 패키지 원본을 선택하고, IgniteUI.Blazor NuGet 패키지를 설치합니다.

Step 3 – Register Ignite UI for Blazor component

Program.cs 파일을 열고 빌더 뒤에 다음을 추가하여 Ignite UI for Blazor 서비스를 등록합니다. Services.AddScoped... 줄:

builder.Services.AddIgniteUIBlazor();

4단계 - Imports.razor 파일 업데이트

Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

@using IgniteUI.Blazor.Controls

5단계 - Pages/_Layout.cshtml 파일 업데이트

에 스타일 시트를 추가합니다. <머리> 요소의 \www루트\index.html 파일:

<head>
	...
	<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>

Step 6 – Add Ignite UI for Blazor Component

Razor 페이지에 Ignite UI for Blazor 구성 요소를 추가합니다.

<IgbCard style="width:350px">
	<IgbCardMedia>
		<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
	</IgbCardMedia>
	<IgbCardHeader>
		<h4>Jane Doe</h4>
		<h6>Professional Photographer</h6>
	</IgbCardHeader>
	<IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
		Photography is a way of feeling, of touching,
		of loving. What you have caught on film is captured forever...
		it remembers little things, long after you have
		forgotten everything.</IgbCardContent>
	<IgbCardActions>
		<IgbButton>More Info</IgbButton>
	</IgbCardActions>
</IgbCard>

Step 7 – Build & Run your App

이제 모든 준비가 완료되었습니다! 실행 버튼을 클릭하여 Ignite UI에서 카드 보기를 실행하는 새 Blazor 앱을 빌드하고 실행합니다!

Building Enterprise Blazor Apps with App Builder

이제 개발 시간을 크게 단축하고 싶다면 App Builder ^тм와 같은 로우 코드 앱 메이커를 사용할 수 있습니다.

App Builder ^тм는 디자인에서 코드에 이르기까지 모든 것을 간소화하는 새로운 클라우드 기반 WYSIWYG 로우 코드 개발 플랫폼 및 드래그 앤 드롭 앱 빌더입니다. 소프트웨어의 주요 목적은 UI 디자인 및 앱 제작의 복잡성을 제거하는 동시에 사용자와 전체 개발 팀이 비즈니스 로직에 대한 도메인 전문 지식에 집중할 수 있도록 하는 것입니다. 직접 코딩하지 않고도 이전보다 훨씬 빠르게 Blazor (및 Angular)으로 비즈니스 앱을 구축할 수 있습니다. 또한 프로젝트를 zip 파일로 다운로드하거나 GitHub에 게시할 수 있는 옵션이 있습니다.

[View:https://youtu.be/WSQ38lLacH4:578:348]

시장에 나와 있는 다른 로우코드 도구와 비교할 때 주요 차별화 요소는 App Builder ^тм에 의해 백업됩니다. Design System, 실제 UI 구성 요소 및 60 + 이상의 UI 컨트롤. 가장 좋은 점 중 하나는 App Builder 클릭 한 번으로 Blazor (및 Angular)으로 프로덕션 준비 코드를 생성하여 코드를 검사하고 Blazor 앱(또는 Angular 앱)의 모양과 느낌을 쉽게 미리 볼 수 있다는 것입니다. 데이터 그리드, 차트, Swagger UI, UI 컨트롤, 사용자 지정 옵션, 테마, 브랜딩 등과 같은 최신 비즈니스 앱을 빌드하는 데 필요한 모든 기능을 갖춘 구성 요소를 생각하면 WYSIWYG 드래그 앤 드롭이 바로 App Builder ^тм 소프트웨어도 제공합니다.

최근에 우리는 App Builder로 Blazor 앱을 구축하고 10분 이내에 Blazor 코드를 생성하는 데 도움이 되는 포괄적인 자습서를 게시했습니다. 따라서 이 Blazor 단계별 가이드로 바로 이동할 수 있습니다.

Blazor