Razor 및 Blazor는 Visual Studio 개발 환경에서 웹 앱을 만들기 위한 두 가지 가장 인기 있는 웹 UI 프레임워크입니다. 이 블로그 게시물은 구문, 상호작용, 장점 및 단점을 기반으로 한 이 두 .NET 기술의 유사점과 차이점을 검토할 것입니다. 일부 코드 예제를 포함한 몇 가지 사용 사례도 보여줄 것입니다.

ASP.NET Core에서의 Razor와 Blazor란 무엇인가요?

Razor

Razor는 개발자가 HTML 및 내장된 .NET 서버측 코드를 사용하여 동적으로 웹 페이지를 생성할 수 있는 서버 측 마크업 언어입니다. Razor는 Razor Pages라는 C# 또는 VB로 작성된 웹 페이지 템플릿 파일에서 웹 페이지를 생성합니다. VB 코드로 작성된 Razor 페이지에는 .vbhtml 파일 확장자가 사용되고, C# 코드로 작성된 Razor 페이지에는 .cshtml 파일 확장자가 사용됩니다.

모던 ASP.NET 웹 애플리케이션은 Razor를 지원하며, 전통적인 ASP.NET 마크업 대신 Razor가 애플리케이션 보기 컴포넌트를 생성하는 데 사용할 수 있습니다.

Blazor

Blazor는 개발자들이 .NET 프로그래밍 언어를 사용하여 대화형 클라이언트 측 인터페이스를 구축할 수 있게 해주는 웹 애플리케이션 프레임워크입니다. Blazor로 구축된 웹 애플리케이션은 웹 서버가 아닌 웹 브라우저 클라이언트 내에서 실행되는 싱글 페이지 애플리케이션(SPA)입니다. 브라우저 측 앱 실행은 모든 모던 웹 브라우저에서 .NET 소스 코드를 실행할 수 있는 교차 플랫폼 명령어 세트 라이브러리인 WebAssembly를 통해 가능합니다.

Blazor를 사용하면 개발자들이 JavaScript를 통합하지 않고 C#, HTML 및 CSS로 재사용 가능한 대화형 클라이언트 측 웹 컴포넌트를 생성할 수 있습니다. 또한, 이러한 컴포넌트가 C#으로 작성되었기 때문에 개발자들은 구현 세부사항을 클라이언트와 서버 간에 소스 코드 및 라이브러리로서 필요에 따라 자유롭게 이동할 수 있습니다.

Blazor는 Razor 컴포넌트를 사용합니까?

Blazor는 Razor 구문을 완벽하게 지원합니다. Razor의 전체 마크업 기능 세트(반복문, 조건문 등)를 사용하여 Blazor 앱을 구축할 수 있습니다. 다음 예시를 고려해 보세요.

@page "/HelloWorld"

<h1>
   Example Component
</h1>

@foreach (var person in People)
{
    <h2>@person.FirstName</h2>
}

@page "/HelloWorld"

<h1>
   Example Component
</h1>

@foreach (var person in People)
{
    <h2>@person.FirstName</h2>
}

이 Razor 구성 요소는 foreach 루프를 사용하여 People라는 컬렉션을 반복하며, 각 사람의 이름을 <h2> 태그 안에 출력합니다.

Razor와 Blazor의 연결

Blazor와 Razor 사이에 관계가 있다는 사실을 명확하게 볼 수 있습니다. 결국 Blazor의 이름 자체가 '브라우저'와 'Razor'라는 단어의 결합에 의해 만들어진 것입니다.

Razor와 Blazor는 HTML과 C#을 사용하여 웹 애플리케이션을 만드는 데 사용됩니다. 오픈 소스이자 무료이므로 개발자들은 즉시 제한 없이 그것들을 사용할 수 있습니다. ASP.NET 웹 애플리케이션 개발 시, ASP.NET Core와 ASP.NET MVC와 더 유사하기 때문에 Razor 구문을 사용합니다.

Blazor는 Razor 구문으로 작성된 하나 이상의 컴포넌트에서 유연하고 대화형의 사용자 인터페이스를 구축합니다.

이 시점에서 우리는 Blazor에서 Razor가 사용되는 방식이 전체 페이지를 구축하는 것이 아닌 컴포넌트(버튼, 페이지 요소 등)를 구축하는 데 사용된다는 중요한 구분을 해야 합니다.

또한, Blazor 내의 Razor 파일(파일 확장자가 .cshtml인 파일)은 공식적으로 Razor 컴포넌트로 알려져 있으며, Blazor 컴포넌트라고 하지는 않습니다(비록 많은 개발 커뮤니티에서는 이 두 단어를 서로 바꿔 사용하기도 합니다).

Razor Pages 및 Blazor 서버의 작동

Razor는 MVC 애플리케이션 내에서 전체 페이지를 브라우저에 제공합니다.

실행 중인 Razor Pages

사용자가 버튼을 클릭하거나 링크를 클릭할 때, 브라우저는 서버에 요청을 보내며, 서버는 데이터베이스에 도달하여 .cshtml Razor Views(또는 Razor Page)를 검색하고, 데이터와 마크업을 섞어 전체 페이지를 다시 렌더링하여 브라우저에 반환합니다.

Blazor는, 반면에, Razor 구문으로 작성된 일련의 작은 컴포넌트를 사용하여 전체 웹 페이지를 생성할 수 있게 해줍니다.

실행 중인 Blazor

이것은 Blazor WebAssembly(Blazor WASM)의 작동을 보여줍니다.

Blazor WASM 애플리케이션에 대한 첫 번째 호출은 정의한 모든 컴포넌트를 포함한 전체 프로그램을 반환하여, JavaScript를 사용하여 만든 싱글 페이지 애플리케이션과 유사합니다.

이제 브라우저가 이러한 요소에 접근할 수 있게 되었으므로, 정보 및 이벤트에 반응하여 이를 표시, 숨기거나 업데이트할 수 있습니다.

이렇게 Blazor 앱은 Vue 또는 Angular와 같은 '현대적인' JavaScript 라이브러리/프레임워크를 사용하여 개발할 애플리케이션과 더 유사합니다. Blazor 애플리케이션은 데이터를 검색 및 전송하기 위해 브라우저 내에서 실행하는 동안 백엔드와 네트워크 호출을 수행합니다.

이제 Blazor 앱과 Razor View 엔진의 장단점에 대해 논의해 봅시다.

Blazor와 Razor의 장단점

.NET Framework 기반의 대화형 웹 앱을 생성하는 데 있어 Blazor와 Razor는 모두 매우 선호됩니다. 이러한 기술들은 표준 JavaScript 프로젝트에서 주로 사용되는 프로그래밍 언어로서 C#을 활용하는 것에서 새로운 전환을 제공합니다.

Razor 또는 Blazor를 사용하여 웹 애플리케이션을 구성할 때 고려해야 할 몇 가지 장단점을 소개합니다.

Blazor의 장점

• 클라이언트 측 Blazor는 WebAssembly를 사용하여 브라우저에서 .NET 코드를 직접 실행하며(이를 통해 네트워크 대역폭 낭비를 줄이고 더 빠르게), 동적 웹 콘텐츠를 제공합니다.
• 서버 측 언어와 동일한 구문과 논리를 사용하여 모든 .NET 라이브러리 및 도구와 호환됩니다.

Blazor의 단점

• Blazor를 사용한 클라이언트 측 .NET 애플리케이션 실행 for .NET 도구 및 디버깅 지원이 제한적입니다.
• 클라이언트 측 Blazor의 성능 이점은 서버 측 구현에서는 존재하지 않습니다.

Razor의 장점

• Razor는 웹 페이지에 C# 코드를 논리적(조건적)으로 삽입할 수 있게 해줍니다.
• Razor는 매우 유연하여 다양한 앱을 만드는 데 사용할 수 있습니다.
• Razor의 구조는 잘 조직되어 있습니다.

Razor의 단점

• 동적이고 클라이언트 측 상호작용을 구현하기 위해 JavaScript가 필요합니다.
• 다수의 자체 포함 페이지는 Razor로 관리하고 유지하기 어려울 수 있습니다.

IronPDF의 뛰어난 기능은 HTML을 PDF로 변환하는 IronPDF입니다. 이는 레이아웃과 스타일을 그대로 유지합니다. 이 기능은 보고서, 청구서, 문서와 같은 웹 기반 콘텐츠에서 PDF를 생성하기에 이상적입니다. HTML 파일, URL 및 HTML 문자열 모두를 PDF로 변환할 수 있습니다.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();
        
        // Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");
        
        // Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");
        
        // Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();
        
        // Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");
        
        // Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");
        
        // Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Module Program
    Sub Main(args As String())
        Dim renderer = New ChromePdfRenderer()

        ' Convert HTML String to PDF
        Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
        Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

        ' Convert HTML File to PDF
        Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
        Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

        ' Convert URL to PDF
        Dim url = "http://ironpdf.com" ' Specify the URL
        Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
        pdfFromUrl.SaveAs("URLToPDF.pdf")
    End Sub
End Module

Imports IronPdf

Module Program
    Sub Main(args As String())
        Dim renderer = New ChromePdfRenderer()

        ' Convert HTML String to PDF
        Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
        Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

        ' Convert HTML File to PDF
        Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
        Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

        ' Convert URL to PDF
        Dim url = "http://ironpdf.com" ' Specify the URL
        Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
        pdfFromUrl.SaveAs("URLToPDF.pdf")
    End Sub
End Module

이 C# 프로그램은 HTML 콘텐츠를 PDF 문서로 변환하기 위해 IronPdf 사용을 보여줍니다. HTML 문자열, HTML 파일 및 URL에서의 변환을 지원합니다.

결론

Razor는 API 로직 및 서버 측 템플릿 처리가 가능하지만, JavaScript 기반이 아닌 클라이언트 측 로직은 처리할 수 없습니다. Blazor를 통해 프로그래머는 C#만으로 클라이언트 및 서버 측 기능을 모두 처리할 수 있습니다. Razor는 서버 측 코드를 HTML에 통합하는 템플릿을 위한 마크업 구문입니다. 반면 Blazor는 Blazor WebAssembly 또는 Blazor Server에서 실행될 수 있는 SPA 프레임워크입니다.

IronPDF를 발견하세요는 Razor 응용 프로그램 및 Blazor 응용 프로그램에서 PDF 파일을 생성, 읽기, 업데이트 및 조작하는 가장 쉬운 방법입니다. IronPDF는 Razor 또는 Blazor 웹 앱을 Excel, PDF, 바코드, QR 코드 및 이미지를 사용하여 만드는 데 도움이 되는 다섯 가지 유용한 라이브러리를 포함한 Iron Software의 Iron Suite의 일부입니다.

Iron Suite는 개인 사용에 무료로 제공됩니다. 상업적 라이선스를 획득하는 방법에 대한 자세한 정보는 Iron Suite 라이선스 정보를 방문하세요.