Blazor 란?

1.Blazor

• C#과 .NET을 사용하여 웹 애플리케이션을 개발할 수 있는 프레임워크

• 웹 브라우저에서 실행되는 대화형 웹 UI를 쉽게 만들 수 있음

• 웹 개발에 JavaScript 대신 C#을 사용할 수 있음

2. 주요 특징

• C# 기반의 웹 개발
• JavaScript 대신 C#으로 클라이언트와 서버 측 로직을 작성할 수 있음

• WebAssembly 지원
• Blazor WebAssembly를 통해 C# 코드를 WebAssembly 형태로 브라우저에서 실행 클라이언트 측에서 별도의 서버 요청 없이 애플리케이션 실행

• 서버 측 렌더링 지원
• Blazor Server를 통해 서버에서 렌더링을 수행 클라이언트와의 연결을 유지하면서 실시간으로 UI를 업데이트

• 재사용 가능한 컴포넌트 구조
• 컴포넌트 기반 구조로 UI를 개발 재사용성과 모듈화가 용이

• .NET 생태계 활용 가능
• .NET의 다양한 라이브러리와 API를 그대로 사용, 기존 C# 개발자에게 익숙하고 생산성이 높음

3. Blazor의 구성 방식

• Blazor WebAssembly
• 애플리케이션이 WebAssembly로 컴파일되어 클라이언트(브라우저)에서 실행
• JavaScript 없이 브라우저에서 C#을 실행 클라이언트 측에서 빠른 응답성과 오프라인 기능을 제공
• 브라우저가 직접 UI를 렌더링 서버와의 연결이 필요 없이 독립적으로 동작

• Blazor Server
• 서버에서 애플리케이션을 실행하고, SignalR을 통해 클라이언트와 실시간으로 소통
• 브라우저에서 페이지 로딩 시 서버와 연결을 유지하며 UI 업데이트를 서버에서 수행하고 클라이언트에 반영
• 서버 리소스를 이용 WebAssembly보다 초기 로딩이 빠르고, 클라이언트 리소스가 적게 소모
 

4. Blazor의 장점

• C#을 통한 프론트엔드 개발
• Blazor WebAssembly
• JavaScript 없이 C#으로 클라이언트 측 애플리케이션을 작성 C#을 잘 아는 개발자에게 유리
• Blazor Server
• 서버 측에서 C#으로 UI를 처리하고, 클라이언트와 서버가 실시간으로 통신 JavaScript 없이도 웹 애플리케이션을 개발할 수 있음

• .NET 라이브러리 및 도구 사용 가능
• Blazor WebAssembly
• 기존 .NET 생태계의 라이브러리와 도구를 활용할 수 있어, .NET 개발자에게는 익숙한 환경을 제공
• Blazor Server
• 서버 측에서 .NET 생태계를 그대로 활용 웹 애플리케이션 개발 시 필요한 다양한 도구와 라이브러리를 그대로 사용할 수 있음

• 고성능 UI 업데이트
• Blazor WebAssembly
• 클라이언트 측에서 직접 UI를 렌더링 서버에 요청 없이 빠르게 UI를 업데이트할 수 있음
• Blazor Server
• 서버에서 UI를 렌더링하고 실시간으로 클라이언트에 업데이트를 전달하는 방식 UI 처리 속도나 성능에 있어서 서버 리소스를 적극 활용

• 컴포넌트 기반의 재사용성
• Blazor WebAssembly
• UI를 컴포넌트로 나누어 재사용 가능 C#으로 구성된 컴포넌트를 통해 개발 효율성을 높임
• Blazor Server
• 컴포넌트 기반 UI 개발 유지보수성과 확장성 있는 웹 애플리케이션을 개발할 수 있음
 

5.Blazor의 단점

• 초기 로딩 속도
• Blazor WebAssembly
• 애플리케이션의 초기 로딩 속도가 느릴 수 있음
• C# 코드를 WebAssembly로 변환하여 브라우저에서 실행 전송되는 파일 크기가 커지고 로딩 시간이 길어질 수 있음
• Blazor Server
• 서버와의 실시간 연결을 필요 네트워크 상태에 따라 응답 속도가 달라질 수 있음
• 클라이언트와 서버 간 연결이 불안정하면 성능에 영향을 미칠 수 있음

• 브라우저 호환성 및 지원 문제
• Blazor WebAssembly
• WebAssembly를 지원하는 최신 브라우저에서만 동작 구형 브라우저, 일부 모바일 브라우저에서는 성능이 저하되거나 제대로 동작하지 않을 수 있음
• Blazor Server
• 모든 브라우저에서 사용 가능
• 실시간 SignalR 연결을 필요로 하므로 네트워크 연결 상태가 좋지 않으면 성능 문제가 발생 SignalR : 실시간 웹 기능을 제공하는 .NET 라이브러리

• 서버와의 연결 문제
• Blazor WebAssembly
• 클라이언트 측에서 실행되므로 서버와의 연결이 필요하지 않지만, 서버에서 데이터를 가져오는 과정에서 시간이 소요될 수 있음
• Blazor Server
• 클라이언트와 서버 간에 실시간 SignalR 연결을 유지 서버에 과부하가 걸리거나 네트워크 상태에 따라 성능이 저하될 수 있음
• 많은 클라이언트를 처리할 경우 서버 리소스가 부족할 수 있음.

• 제한된 JavaScript 호환성
• Blazor WebAssembly
• JavaScript 라이브러리나 기능을 사용하려면 JavaScript와 상호 작용할 수 있는 방법이 필요 이 과정이 다소 복잡할 수 있음 일부 JavaScript 라이브러리와의 호환성 문제가 발생할 수 있음
• Blazor Server
• 서버에서 UI를 렌더링하고, 클라이언트에 실시간 업데이트를 보내는 방식 JavaScript가 거의 필요하지 않지만, 필요시 JavaScript와의 상호 작용을 위한 인터롭(Interop) 사용 Interop : 두 시스템이나 프로그래밍 언어 간의 통신을 가능하게 하는 기능

• 생태계와 커뮤니티의 상대적 부족
• Blazor WebAssembly
• React, Angular와 같은 JavaScript 프레임워크와 비교했을 때 Blazor의 생태계와 커뮤니티는 상대적으로 작음 많은 서드파티 라이브러리와 도구들이 Blazor에 최적화되어 있지 않을 수 있음
• Blazor Server
• Blazor WebAssembly보다는 비교적 성숙한 기술로 보이지만, 여전히 JavaScript 프레임워크와의 비교에서 생태계가 부족한 점은 마찬가지

• 파일 크기와 메모리 사용량
• Blazor WebAssembly
• WebAssembly로 변환된 .NET 런타임과 애플리케이션 DLL이 브라우저로 전송 파일 크기가 커지고 메모리 사용량이 많을 수 있음
• Blazor Server
• 클라이언트에서 서버로 실시간 데이터를 주고받으므로 초기 로딩 시간은 빠름 서버 리소스가 많이 소모될 수 있음

• SEO 제한 사항
• Blazor WebAssembly
• 클라이언트 측에서 렌더링된 콘텐츠는 SEO 최적화에 불리할 수 있음 대부분의 검색 엔진은 JavaScript로 렌더링된 콘텐츠를 인식하지 못하기 때문에, 서버 렌더링 방식이나 SEO 최적화가 필요
• Blazor Server
• 서버 측에서 렌더링되므로 SEO에 유리한 측면이 있지만, 실시간 데이터 전송과 관련된 최적화가 필요

• 학습 곡선
• Blazor WebAssembly
• JavaScript 프레임워크에 익숙한 웹 개발자에게는 새로운 C# 및 .NET 환경에 적응해야 하는 어려울 수 있음
• Blazor Server
• 서버 측 렌더링을 사용 여전히 C#과 .NET 환경에 익숙하지 않은 개발자에게는 새로운 개념이나 기술을 배우는 데 시간이 필요할 수 있음