Blazor + Efcore로 웹사이트 만들기 (1)

Microsoft에서 만든 웹어셈블리 기술이 Blazor 입니다.

웹소켓 기술인 SignalR과 연계되어, 전통적인 서버사이드 방식 외에도 클라이언트 사이드 방식을 제공하여, 프론트엔드 영역으로까지 확장된 기술이라고 볼 수 있습니다.

국내에서는 거의 활용되고 있지 않지만, 가끔씩 만나볼 수 있습니다.

 

본 프로젝트의 의의는 C# 이라는 언어 하나만 가지고도 온전한 웹사이트를 구성할 수 있다는데 있습니다.

물론 그럼에도 불구하고 웹에 대한 이해는 반드시 필요합니다. (HTML, CSS, Javascript)

 

웹에 대한 이해를 바탕으로 C#으로 거의 모든 구성이 가능한 웹서비스, 블레이저(Blazor)를 만나봅시다.

 

먼저 vs2022에서 프로젝트를 생성해 봅시다.

 

Blazor Web App을 선택하고 다음 버튼을 눌러주세요.

 

 

프로젝트 이름과 솔루션 이름을 작성해 주세요.

저는 간단한 마케팅 사이트를 만들어보고자, Roslyn.Marketing 으로 정했습니다.

이제 다음 버튼을 눌러주세요.

 

 

 

프레임워크는 현시점 기준 가장 최신 버전인 .NET 8을 선택합니다.

인증 유형은 없음, HTTPS에 대한 구성은 해제해 주세요. 

(※ 개발의 편의성일 뿐이므로, 필요에 따라 체크해 주세요.)

 

렌더링 모드는 Server를 선택해 주세요.  제가 만들고자 하는 사이트는 SEO가 중요한 사이트라 서버사이드를 선택했습니다.

 

다음은 Interactivity location라는 항목이 보입니다.

이 항목은 Blazor 프로젝트에서 상호작용 코드 (interactivity code)를 어디에 위치시킬지를 지정하는 설정입니다.

두 가지 선택 옵션이 있습니다.

 

(1) Per page/component:
이 옵션을 선택하면 각 Blazor 페이지나 컴포넌트마다 해당 페이지 또는 컴포넌트에 특화된 상호작용 코드를 가질 수 있습니다.
장점: 각 페이지나 컴포넌트에 대한 로직이 해당 페이지 또는 컴포넌트와 밀접하게 연결되어 있어서 코드의 유지보수가 쉽습니다. 페이지나 컴포넌트 간에 상호작용 로직이 격리되어 있습니다.
단점: 중복된 코드가 발생할 수 있으며, 전역적으로 사용해야 하는 상황에서는 유연성이 부족할 수 있습니다.

 

(2) Global:
이 옵션은 프로젝트 전체에서 공유되는 전역적인 상호작용 코드를 지원합니다. 모든 페이지와 컴포넌트에서 사용할 수 있는 전역 서비스 또는 상호작용 코드를 정의할 수 있습니다.
장점: 코드의 중복을 피할 수 있으며, 프로젝트 전체에서 공유되는 데이터나 서비스를 쉽게 활용할 수 있습니다.
단점: 모든 페이지나 컴포넌트에서 공유되는 코드이기 때문에, 코드의 의도치 않은 변경이 발생할 수 있습니다.

 

그렇다면 어떤 옵션을 선택해야 할까요?

Per page/component: 페이지나 컴포넌트 간의 독립성이 중요하고, 각각의 페이지나 컴포넌트에 특화된 로직이 필요한 경우에 유용합니다.
Global: 프로젝트 전체에서 공유되는 상태나 서비스가 있고, 중복 코드를 피하려는 경우에 유용합니다.

 

기본값은 Per page/component 로 되어 있으니, 기본값으로 먼저 합시다.  아직 우리는 모르니깐요.

그리고 그 아래 include sample pages 라는 체크박스 항목이 보입니다.

당연히 체크해줍니다.

 

아직 우리는 아무것도 모르니깐요.

 

마지막에 있는 Do not use top-level statements 는 최상위항목 사용 여부인데, 마찬가지로 체크된 상태를 유지해 주세요.

이제 다음 버튼을 누르면 프로젝트가 구성된 모습을 볼 수 있습니다.

 

더 볼것도 없이 바로 실행해 봅시다.

 

실행 버튼을 눌러 프로젝트를 실행해 봅시다.

 

 

 

부트스트랩 기반 블레이저 사이트의 기본 화면 모습이 보입니다.