ASP.NET Core 웹 UI 선택

ASP.NET Core는 완전한 UI 프레임워크입니다. 앱의 웹 UI 요구 사항에 맞게 결합할 기능을 선택하세요.

새 프로젝트 개발의 경우 ASP.NET Core Blazor를 사용하는 것이 좋습니다.

ASP.NET Core Blazor

Blazor 는 전체 스택 웹 UI 프레임워크이며 대부분의 웹 UI 시나리오에 권장됩니다.

사용 Blazor의 이점:

• 재사용 가능한 구성 요소 모델입니다.
• 효율적인 차이 기반 구성 요소 렌더링.
• WebAssembly를 통해 서버 또는 클라이언트에서 구성 요소를 유연하게 렌더링합니다.
• C#에서 풍부한 대화형 웹 UI 구성 요소를 빌드합니다.
• 서버에서 구성 요소를 정적으로 렌더링합니다.
• 보다 원활한 탐색 및 양식 처리를 위해 서버 렌더링 구성 요소를 점진적으로 개선하고 스트리밍 렌더링을 사용하도록 설정합니다.
• 클라이언트 및 서버에서 공통 논리에 대한 코드를 공유합니다.
• JavaScript를 사용한 Interop입니다.
• 구성 요소를 기존 MVC, Razor Pages 또는 JavaScript 기반 앱과 통합합니다.

아키텍처 및 이점에 대한 Blazor전체 개요는 ASP.NET Core Blazor 및 ASP.NET Core Blazor 호스팅 모델을 참조하세요. 첫 번째 앱을 시작하려면 첫 번째 Blazor Blazor 앱 빌드를 참조하세요.

ASP.NET Core Razor Pages

Razor Pages는 서버 렌더링 웹 UI를 빌드하기 위한 페이지 기반 모델입니다. Razor 페이지 UI는 브라우저 요청에 대한 응답으로 페이지의 HTML 및 CSS를 생성하기 위해 서버에서 동적으로 렌더링됩니다. 페이지는 표시될 준비가 된 클라이언트에 도착합니다. Razor Pages에 대한 지원은 ASP.NET Core MVC에서 구축됩니다.

Razor 페이지 혜택:

• UI를 빠르게 빌드하고 업데이트합니다. 페이지에 대한 코드는 페이지와 함께 유지되지만 UI와 비즈니스 문제는 별도로 유지됩니다.
• 앱을 테스트하고 확장할 수 있습니다.
• ASP.NET Core 페이지를 ASP.NET MVC보다 더 간단한 방식으로 정리합니다.
  • 특정 논리 보기 및 모델 보기를 자체 네임스페이스 및 디렉터리에 함께 유지할 수 있습니다.
  • 관련 페이지 그룹을 고유한 네임스페이스와 디렉터리에 유지할 수 있습니다.

첫 번째 ASP.NET Core Razor Pages 앱을 시작하려면 자습서: ASP.NET Core에서 Razor Pages 시작하기를 참조하세요. ASP.NET Core Razor Pages의 전체 개요와 관련 아키텍처 및 혜택을 확인하려면 ASP.NET Core의 Razor Pages 소개를 참조하세요.

ASP.NET Core MVC

ASP.NET Core MVC는 서버에서 UI를 렌더링하고 MVC(Model-View-Controller) 아키텍처 패턴을 사용합니다. MVC 패턴은 앱을 모델, 뷰 및 컨트롤러의 세 가지 주요 구성 요소 그룹으로 구분합니다. 사용자 요청은 컨트롤러로 라우팅됩니다. 컨트롤러는 모델을 사용하여 사용자 작업을 수행하거나 쿼리 결과를 검색하는 일을 담당합니다. 컨트롤러는 사용자에게 표시할 보기를 선택하고 필요한 모든 모델 데이터를 제공합니다.

ASP.NET 핵심 MVC 이점:

• 대형 웹 앱을 빌드할 수 있는 확장 가능하고 완성도 높은 모델을 기반으로 합니다.
• 명확한 문제 분리를 통해 최상의 유연성을 제공합니다.
• Model-View-Controller 책임을 분리하면 낮은 수준의 구현 세부 정보에 긴밀하게 결합되지 않고도 비즈니스 모델을 개선할 수 있습니다.

ASP.NET Core MVC를 시작하려면 ASP.NET Core MVC 시작하기를 참조하세요. ASP.NET Core MVC의 아키텍처 및 이점에 대한 개요는 ASP.NET Core MVC 개요를 참조하세요.

프런트 엔드 JavaScript 프레임워크를 사용하여 SPA(핵심 단일 페이지 애플리케이션) ASP.NET

Angular, React 및 Vue와 같은 인기 있는 JavaScript 프레임워크를 사용하여 ASP.NET Core 앱에 대한 클라이언트 쪽 논리를 빌드합니다. ASP.NET Core는 Angular, React 및 Vue에 대한 프로젝트 템플릿을 제공하며 다른 JavaScript 프레임워크에서도 사용할 수 있습니다.

앞에 나열된 클라이언트 렌더링의 혜택 이외의, JavaScript 프레임워크와 함께 사용하는 ASP.NET Core SPA의 혜택:

• JavaScript 런타임 환경은 이미 브라우저와 함께 제공됩니다.
• 대규모 커뮤니티 및 완성도 높은 에코시스템을 제공합니다.
• Angular, React 및 Vue와 같은 인기 있는 JS 프레임워크를 사용하여 ASP.NET Core 앱에 대한 클라이언트 쪽 논리를 빌드합니다.

단점:

• 더 많은 코딩 언어, 프레임워크 및 도구가 필요합니다.
• 일부 논리가 중복될 수 있어 코드를 공유하기가 어렵습니다.

시작하려면 다음을 참조하십시오.

• Angular를 사용하여 ASP.NET Core 앱 만들기
• React를 사용하여 ASP.NET Core 앱 만들기
• Vue를 사용하여 ASP.NET Core 앱 만들기
• Visual Studio의 JavaScript 및 TypeScript

여러 웹 UI 솔루션 결합: ASP.NET Core MVC 또는 Razor Pages plus Blazor

MVC, RazorPages 및 Blazor는 ASP.NET Core 프레임워크의 일부이며 함께 사용하도록 설계되었습니다. Razor Pages 및 MVC 앱에 Razor 구성 요소를 통합할 수 있습니다. 보기 또는 페이지를 렌더링할 때 구성 요소를 동시에 미리 렌더링할 수 있습니다.

MVC 또는 Razor Pages 자체 혜택 외에 MVC 또는 Razor Pages와 Blazor의 결합이 제공하는 혜택:

• 미리 렌더링하면 서버에서 Razor 구성 요소가 실행되고 보기 또는 페이지로 렌더링되어 인식된 앱 로드 시간이 향상됩니다.
• 구성 요소 태그 도우미를 사용하여 기존 보기 또는 페이지에 대화형 작업을 추가합니다.

ASP.NET Core MVC 또는 Razor Pages를 Blazor시작하려면 ASP.NET Core 구성 요소를 ASP.NET Core Razor 앱에 통합을 참조하세요.

다음 단계

자세한 내용은 다음을 참조하세요.

• ASP.NET Core Blazor
• ASP.NET Core Blazor 호스팅 모델
• ASP.NET Core Razor 구성 요소를 ASP.NET Core 앱에 통합
• gRPC 서비스와 HTTP API 비교