[Blazor]Web Development With Blazor - (22.07.06 ~ ing)

2022.07.06

🦝 들어가며

🦝 감사의 말

주의사항
해당 글은 .NET 5 기반의 책을 기반 되었습니다.
.NET 7기반으로 책이 나왔습니다. Web Development with Blazor - Second Edition 2023년 03월 16일
Web Development with Blazor - Second Edition
하지만 또 .NET 8을지나 .NET 9가 Preview로 나왔습니다.
Web Development with Blazor - Third Edition 2024년 04월 29일
Web Development with Blazor - Third Edition

장사잘하네…

KakaoTalk_20220706_133601347

현재 한국에는 C# 즉 .NET 개발자가 많이 없다.
그만큼 문서도 찾기 어렵고 전문서적도 구하기가 어렵다
물론 영어는 엄청많다
최근 Blazor를 보면서 MSDN의 번역본을 읽는것도 한계가왔다
서점에가서 책을 사보려 했는데 1권도 국내에 없더라
생각도 못했다.
진짜 없더라….
설마 번역본도 없을꺼라곤….
이 책을 읽는데 많은 어려움이 있었으나
강제로 영어공부도 되고 쉽게 읽을 수 있는 시대를
만들어준 모든 감사함을 Papago에게 표하며
이런 책을 내주셔서 감사합니다. Thank you. Jimmy Engstrom

저의 이 블로그는 영어를 잘 모르는 사람이 읽고
Blazor를 많은 사람들이 이용할 수 있도록
도움이 되고자 작성 되었습니다.
최대한 .NET 6로 작성하려 하였으나, 책의 문맥상 어쩔수없이
.NET 5로된 코드를 넣기도 했습니다. 변경 가능하다면 댓글 남겨주세요.

🦝 이 책이 다루고 있는 것

총 3가지의 Section 으로 구성되어있다.
Basics 부분은 Chapter 1, 2이고
애플리케이션 구축부분은 Chapter 3.. 11 이다.
마지막으로 Debug와 Test 그리고 운영관련 내용은
Chapter 12, 13, 14, 15에 있다.

🦝 Chapter 1. Hello Blazor

첫번째장에서는 Server-Side Blazor와 Client-Side Blazor의 차이를 설명하고자 한다.
또한 기술이 어떻게 작동하는지에 대한 개요와 Blazor의 유래에 대한 역사를 간략히 볼 수 있다.
해당 기술을 이해하는데에는 호스팅 모델 간의 구조와 차이점을 알고 있는것이 필수적이다.
Blazor 앱 호스팅 모델
ASP.NET Core Blazor 호스팅 모델

🦝 Chapter 2. Blazor App 만들기

개발 환경을 구축을 하고 기본적인 설정을 하는 방법을 이해를 하며,
Blazor App(Server-side & Client-side)을 만들고 프로젝트 템플릿의 구조를 배우게 됩니다.

🦝 Chapter 3. Entity Framework Core 소개

Entity Framework Core 소개에서는 데이터를 저장할
데이터베이스를 만드는방법을 설명합니다.
(Blog Post, categories, and tags)
그리고 .NET Tool 을 사용하여 새로운 프로젝트를 만들게 됩니다.

🦝 Chapter 4. Basic Blazor Component (기초적인 Blazor Component)

Blazor의 Component, LifeCycle Event,
매개변수 추가 및 Component간 매개 변수 공유에 설명합니다.
또한 Reusable 즉 재사용 Component도 만듭니다.

🦝 Chapter 5. Advanced Blazor Component (고급적인 Blazor Component)

Blazor의 고급 Component는 하위 Component,
계단식 매개 변수 및 값과 같은 기능을 추가하고
작업 및 콜백 사용 방법을 다루게 됩니다.

🦝 Chapter 6. 유효성 검사

Validation이 포함된 Form을 만들고, Form의 검증방법과
자체 Validation Mechanism을 구축하는 방법을 살펴봅니다.
또한 이번 Chapter에서는 확인란을 선택할 때 파일 업로드, 텍스트,
숫자 및 “trigger” 코드로 처리할때 가장 일반적인 사용 사례를 설명합니다.

🦝 Chapter 7. API 만들기

Blazor WebAssembly를 사용할때 데이터를 얻기위해 API가 필요로합니다.
해당 Chapter에서는 API를 만드는 방법에대해 살펴봅니다.

🦝 Chapter 8. 인증과 권한부여

Blazor에 인증(Authentication) 및 권한(Authorization)을 추가하고
로그인 페이지로 리다이렉션(Redirect)과 같은 네비게이션이 예상대로 작동하는지 확인합니다.

🦝 Chapter 9. 코드 및 리소스 공유

공유 라이브러리에 필요한 모든 항목을 추가하여,
클라이언트와 서버에서 코드를 공유하는 방법을 살펴봅니다.
그리고 이번 장에서는 NuGet 패키지로 다른 사용자와
공유할 수 있는 라이브러리를 구축합니다.

🦝 Chapter 10. JavaScript Interop

Blazor를 사용할때 JavaScript의 라이브러리를 활용하고
C#에서 JavaScript로 호출할 수 있는 방법을 살펴봅니다.
또한 JavaScript가 Blazor 앱에서 C# 함수를 호출할 수 있는 방법 또한 살펴봅니다.
ASP.NET Core Blazor의 .NET 메서드에서 JavaScript 함수 호출
ASP.NET Core Blazor의 JavaScript 함수에서 .NET 메서드 호출

🦝 Chapter 11. 상태 관리

LocalStorage를 사용하거나, 종속성 주입을 사용하여
데이터를 메모리에 보관하는것과 같은 다양한 상태
관리방법(지속 데이터 - persisting data)을 살펴봅니다.
그리고 데이터베이스의 영구적인 데이터뿐만 아니라
여러 프로젝트 유형에 대한 종속성 주입의 작동 바식도 다룰 수 있습니다.
ASP.NET Core Blazor 종속성 주입

🦝 Chapter 12. Debugging

응용프로그램을 디버깅하고 확장된 Logging을 추가하여
문제점을 파악하는 방법을 살펴봅니다.
또한 웹 브라우저내에서 직접 C# 코드를 디버깅할 수도 있습니다.
ASP.NET Core Blazor 로깅

🦝 Chapter 13. Testing

Component가 제대로 작동하는지(계속 작동하는지) 확인할 수 있도록 자동화된 테스트를 살펴봅니다.
Blazor 애플리케이션을 테스트하는 기본 방법은 현재 없습니다.
허나 bUnit 이라는 커뮤니티 프로젝트가 존재합니다.
ASP.NET Core Razor에서 Blazor 구성 요소 테스트
bUnit
Playwright for .NET

🦝 Chapter 14. 운영 단계

운영환경에서 Blazor를 실행할 때 고려해야 할 다양한 사항을 살펴봅니다.

🦝 Chapter 15. Where to Go from Here

실전에서 사용할수있는 몇가지 자료, 그리고 이 책을 끝맽는 짧은 마지막 챕터 입니다.

🦝 책을 읽기전 개발환경 요구사항

개발 환경

Visual Studio 2019 이상, Mac용 Visual Studio For Mac, Visual Studio Code

Windown 10 이상, MacOS 또는 Linux

책에서 사용하는 ASP.NET Core 5이다

허나 나는 ASP.NET core 6.0 를 쓸 것이다.

글쓴이의 요구사항

Tweet plz me @EngstromJimmy

I hope you have as much fun reading this book as i had writing it.

내가 책을 쓴만큼 너도 재미있게 읽어주길 바란다. 이미 재미있다.

https://github.com/EngstromJimmy 그의 Github

예제 코드 https://github.com/PacktPublishing/Web-Development-with-Blazor

다른 풍부한 책과 영상 카탈로그의 번들코드도 포함되어 있으니 참고하자.

컬러이미지는 ColorImages.pdf

🦝 Chapter 1

🦝 Introducting Blazor (Blazor의 탄생)

Blazor는 오픈 소스 웹 UI SPA 프레임워크이다.

SPA - Single Page Application
UI - User Interface
PROGRAMMING LANGUAGE - C#
WEB FRAMEWORK - Blazor

쉽게 말을하자면 Bindings, Event, Forms and validation,
Injection, debugging 등등 많은 기능을 완벽하게 지원을 한다.
즉 HTML, CSS 및 C#을 사용하여 대화형 SPA 웹 애플리케이션을
만들수 있단 뜻이다.

때는 2017년 NDC 오슬로에서 열린 개발자 콘퍼런스 에서 Steve Sanderson가 발표했다.
제목이 ‘Web Apps can’t really do that, can they?’
번역을해보면 웹앱은 할수없잖아 그치? 란다..

그는 Microsoft의 ASP.NET Team에 있을때다.
하지만 스티브는 데모를 보여주고 싶었고, 생각을 해낸 것이
웹어셈블리에서 C#을 실행하는게 가능할까? 였다 한다.
Github에서 ‘Dot Net Anywhere’ 라고 불리는 오래된 inactive 프로젝트를
발견을 했고 그것은 C 로 작성이 되었으며 C코드를 웹어셈블리로 컴파일 하기위해
(방금 우리가 한거처럼 유사한 형태로) 도구를 사용을 했다.

그는 브라우저 안에서 간단한 콘솔앱을 실행했다.
이미 이것만으로도 엄청난 데모였지만 더 나아가서
“ 이 위에 간단한 프레임워크를 만들 수 있을까? “ 라고 생각을했고,
Tolling 작업도 알아보았다.

Session이 시작되면 작업 샘플을 사용하여 새로운 프로젝트를 만들고,
Tooling 지원이 뛰어난 Todo-list를 만들고,
브라우저 내에서 프로젝트를 실행하였습니다.

Damaian Edwards, David Fowler (둘다 .NET team) 이라는 이름의 팀원들이
스티브가 시범을 보이려는것을 보여줫고, 머리가 터지고, 턱이빠지는것을 묘사했다.
그리고 그렇게 Blazor의 원형이 탄생한 것이다.

Blazor라는 이름은 브라우저(Browser)와 Razor(combine code와 HTML을 결합하는 기술)의
합성어에서 유래됬으며, L을 차가하면 더 좋게 들리지만 그외에 실질적인 약어는 없다.

각각 Blazor Server, including Blazor WebAssembly, WebWindow, and Moblie Bindings.
얘들은 몇가지 다른 형태가 있다.

🦝 Blazor Server

Blazor Server는 아래의 다이어그램처럼 SignalR을 사용하여 Client와 Server간 통신을 합니다.

K-006

Blazor Server 개요

SignalR은 다양한 데이터 전송 수단을 사용할 수 있으며, Server 및 Client 기능에따라
최적의 전송 프로토콜을 자동으로 선택을 합니다.
ASP.NET Core 개요SignalR

SignalR은 항상 HTML에 내장된 전송 프로토콜인 WebSockets을 사용하려합니다.
WebSocket이 활성화 되지 않다면 다른 포로토콜로 정상적으로 폴백(fall Back)이 됩니다.
(알아서 다른 프로토콜을 찾는다는 것이다.)

Blazor는 Componets(컴포넌트)라 불리는 재사용 가능한 UI요소를 사용하여 구축됩니다. (3장 Entity Framework Core에서 소개된다.)
각 Component는 C# 코드, 마크업을 포함하여 다른 Component를 포함할 수 있습니다.
Razor 문법을 사용하여 마크업과 C#코드를 혼합하거나 원하는 경우 C#의 모든 작업을 수행할 수도 있다.
Component의 경우 사용자의 상호작용(버튼클릭 혹은 트리거 등)을 통하여 업데이트 할 수 있습니다.

각 Component는 객체 상태와 모든 속성 및 값을 포함하는 DOM의 이진표현인 render tree로 렌더링됩니다.

render tree는 이전 render tree와 비교하여 변경된 사항을 추적한 다음
DOM을 업데이트를 하기위해 이진 형식을 사용하여 SignalR을 통해 변경된 사항만 전송을 합니다.

Client 측면에서는 JavaScript의 변경된 사항을 수신하고 해당 페이지를 업데이트합니다.
이걸 기존의 ASP.NET 과 비교를해보면, 전체 페이지가 아닌 Component 자체만 렌더링하고
전체 페이지가 아닌 실제 변경 사항만 DOM으로 전송을 합니다.

물론 Blazor Server에는 단점도 존재를 합니다.

렌더링 작업은 서버에서 수행되기에 항성 서버에 연결이 되어야 한다.
인터넷 연결이 잘못된 경우 사이트가 작동하지 않을 수 있다.
또한 Blazor Server를 사용하지않는 사이트와 큰차이로는
페이지를 전송을 한 후 다른 페이지가 요청이 있을때 까지 연결을 끊을 수 있는데,
Blazor를 사용하면 해당 연결(SignalR)이 항상 연결되있어야 한다.

연결이 되있어야 하니 offline/PWA 모드는 없다.

모든 클릭, 페이지 업데이트는 서버로 왕복해야 하므로 대기 시간이 길어질 수 있다.
Blazor Server는 변경된 데이터만 전송을 한다.
느린 응답 시간을 경험해 본 적이 없다. 라고 작자는 말한다.

서버에 연결해야 하기에 해당 서버의 로드가 증가하여 확장이 어렵다.
이 문제를 해결하기 위해 Azure SignalR 허브를 사용하면 지속적인 연결을
처리하고, 서버가 콘텐츠 전송에 집중할 수 있다.
Azure SignalR Service란?
ASP.NET Core용 SignalR에서 허브 사용

실행 할 수 있으려면 ASP.NET Core를 지원하는 서버여야 한다.

허나 Blazoer Server에는 다음과 같은 장점도 있다.

클라이언트가 다운받는 형태가 아주 작은형태로 전송된다 물론 충분히 코드가 포함되어 있다.

서버에서 실행중이므로 앱은 서버의 기능을 최대한 활용 할 수 있다.

사이트가 WebAssembly를 지원하지 않는 이전 웹브라우저에도 작동한다.

코드가 서버에서 실행되며 서버에 남아 있으므로 코드를 디컴파일 할 수 없다.

코드는 서버(또는 클라우드)에서 실행되므로 조직 내의 서비스 및 데이터베이스에 직접 호출 할수 있다.

작자의 회사에는 이미 큰사이트가 준비되어 있기에 프로젝트에 Blazor Server를 사용하기로 결정했다.
고객 포털과 내부 CRM 툴이 있었다.
우리의 접근 방식은 한번에 하나의 Component를 가져와서 Blazor Component를 변경하는 것이었다 .
대부분의 경우 ASP.NET MVC위에 기능을 추가하는것보다 Blazor에서 Component를
리메이크(수정)하는게 훨신 빠르다는걸 금세 알게 되었다.

변환을 통해 최종적으로 사용자환경(UX)는 더욱 향상되었습니다.
페이지 로딩속도가 빨라지면 전체 페이지를 대신 필요에따라 페이지의 일부를 다시 로드할 수도 있습니다.
오히려 Blazor 때문에 새로운 이슈가 발생을 했다. 그건 너무 빠르다는것

아무 일도 일어나지 않았기 때문에 사용자들은 데이터가 저장되었는지 이해를 하지 못했습니다.
일이 일어났지만 사용자가 알아채기에는 너무 빨랐기 때문이지요.
갑자기, 우리는 UX와 사용자에게 무언가가 바뀌었다는 것을 어떻게 알려야 하는지에 대해
생각을 해야 했습니다. 물론 작자의 생각에는 Blazor의 매우 큰장점으로 인한 부작용이다 라고
생각한다.

Blazor Server만이 Blazor를 실행할 수 있는 유일한 방법은 아니다. WebAssembly를 통하여
Client에서 실행을 할 수도 있습니다.

🦝 Blazor WebAssembly

서버에서 Blazor를 실행하는 방식이 아닌. WebAssembly를 사용하여 웹 브라우저 내에서
실행할 수 있습니다.

현재 C#을 WebAssembly로 컴파일을 할 방법이 없다.
대신 Microsoft에서는 모노 런타임(C로 작성된)을 가져와서 WebAssembly로 컴파일 했다

Blazor의 WebAssembly 버전은 다음 그림처럼 서버 버전과 매우 비슷하게 움직입니다.
모든항목을 서버에서 WebAssembly로(브라우저) 옮기고 웹브라우저에서 실행을 합니다.

..Fihure 1.3..

render tree는 WebAssembly에서도 생성되고 서버에서 razor pages를 실행하는대신
웹브라우저 내에서 실행이된다.

SignalR 대신에 WebAssembly는 직접 DOM에 Access(접근)이 불가하기에
Blazor 는 직접 Javascript Interop으로 DOM을 생성하고 업데이트합니다.
여기서 WebAssembly로 컴파일이되는 mono runtime을 dotnet.wasm이라고 합니다.
페이지에서는 dotnet.wasm을 로드하는 javascript가 포함이 되어있습니다.

컴파일이 된 후 그다음에는 Blazor.boot.Json 파일을 다운로드 받습니다.
해당파일은 응용프로그램을 실행하는 데 필요한 모든 파일과 응용프로그램의
진입점을 포함하는 JSON파일 입니다.

Visual Studio에서 새로운 Blazor 프로젝트를 생성을하면
시작할때 생성되는 기본 샘플 사이트내부에. Blazor.boot.json 파일이있다.
해당 파일에는 다운로드해야 하는 63개가 dependencies되어 있다.

프로그램이 브라우저내에서 .NET Framework가 동작하기위해서 필요한 요소들을
쓰기위해 .Net DLLs 가 작동이된다.

코드를 직접 작성했거나 혹은 .NET Framework으로부터 App에 필요한 요소가 있다면
웹 브라우저에서 .NET DLLs가 실행이된다.

이말을 보자마자 아주그냥 욕이 튀어나욌다.
(I got a bit of a bad taste in my mouth)
이게 전부 브라우저 내에서 .Net runtime이 돌아간다고 ???????
하지만 곧 얼마나 놀라운지 깨달았다.

.NET Standard DLLs을 웹브라우저에서 마음껏 쓸수가 있었다.
다음에는 WebAssembly앱이 부팅될때 어떤일이 일어나고,
어떤 순서로 코드가 실행되는지 살펴보자.

가장 관심이 가지는부분은 다운로드가 되는 크기일텐데
단순 파일의 크기는 약 1.3MB이다. 이건 브라우저측면에서는 용량이 큰편인데.
이것은 SPA(Single - Page Application)에 가깝기에
클라이언트에게 전달된 모든 데이터의 크기이다.

유명한 다른 사이트들과 크기를 비교했는데 그 사이트들의 js파일만 포함한것이 아닌
Blazor를 위한 모든 DLL과 javascript파일도 포함시켯다.

다음은 작자가 연구한 결과의 그림이다.

downloadSize

🦝 Blazor WebAssembly VS Blazor Server

어떤걸로 할까요? ㅎㅎ
항상 상황에 따라 다릅니다.
2가지 모두 장단점을 확인을 했다.
Blazor로 포팅할 사이트가 있는경우, Blazor Server로
이동을 하고, 포팅이 완료가 되면 WebAssembly로 이동할지 여부를 새로 결정 할 수 있다.

만약에가사이트가 모바일 브라우저 또는 다른 신뢰할수가 없는 사이트에 연결을 해야할경우
Blazor Server에 지속적인 연결이 필요하므로 Blazor WebAssembly를 사용하여
PWA(오프라인 지원)을 사용하는 것이 좋습니다.

WebAssembly는 다소 시작시간은 느리지만 두개의 호스팅 모델을 결합하여 두개의 월드를
최대한 활용할 수 있는 방법이 있다.
그 내용은 9장에서 코드 및 리로스 공유에서 다룰 것이다.

이 질문에 대한 자세한 내용은 없으나, 장점과 단점에 대해 자세히 읽어보고 이러한 점이
프로젝트 및 사용사례에 어떤 영향을 미치는지 알아보고 써야합니다.
Blazor 서버 측과 클라이언트에서 실행할 수 있지만 데스크톱 및 모바일 앱은 어떻습니까?

Web Window와 Mobile Blazor Bindings 솔루션도 존재한다.

🦝 WebWindow

Steve Sanderson의 오픈소스 프로젝트인 WebWindow 라는 실험 기술이있다.
Blazor를 사용해서 Windows 응용프로그램을 만들 수 있다.
WebWindows는 이책 범위밖이지만 얼마나 좋은 기술인지 알리기위해
“Blazor의 가능성은 끝이없다”는 걸 보여주기 위해 언급한다.

https://github.com/SteveSandersonMS/Webwindow

🦝 Blazor Mobile Bindings

이 기술또한 책에서 언급할 내용과는 벗어나지만 언급할 가치가 있다.
이 프로젝트는 Mobile Applications을 만드는걸 가능하게 가능하게 하여
IOS와 Android 어플리케이션을 만드는데 영향을 준다.

Blazor Mobile Bindings는 Blazor와 마찬가지로 razor문법을 사용하지만
Components는 완전히 다르다.

Microsoft가 Blazor와 Blazor Mobile Bindings를 모두 지원하지만,
실제로 다른 웹버전(WebAssembly, Server & WebWindow)간에 코드를 공유할수는 없다.

https://docs.microsoft.com/ko-kr/mobile-blazor-bindings/.

이와 같이 Blazor와 함께 할 수 있는 것들이 있고 이것은 시작에 불과하다.

🦝 Blazor Hybrid

모바일 앱이나 데스크톱 애플리케이션을 개발 할 수 있는 에디션으로 프리뷰단계에서 지원되고 있다.
모바일 환경에서는 Xamarin(혹은 .NET MAUI) 앱 위에서 Blazor 코드가 실행되고 데스크톱 환경에서는
WPF (또는 Windows Forms) 프로그램 위에서 Blazor 코드가 실행된다. Blazor 코드가 실행되고 생성된
HTML, CSS는 웹뷰 컨트롤을 사용하여 출력하는 방식이다. (나무위키가 제일 짧고 잘 설명되있더라.)

1. 1. .NET 7 관련하여 소개가 되었다. Let’s Learn .NET - Blazor Hybrid

🦝 Summary

지금까지 Blazor로 사용 가능한 다향한 기술에 대해 알게 되었다.
예를 들면 Server Side, Client Side(WebAssembly), Desktop, Mobile 들을 말하는데
다음 프로젝트에 어떤 기술을 사용하여 진행을 할지에 대한 정보를 제공했다.

그다음으로 Blazor가 어떻게 탄생을 했고, SignalR과 WebAssembly처럼
Blazor에서의 기본기술에 대해 설명을 했다.
또한 render tree와 DOM이 업데이트되어. Blazor가 hood아래에서.
작동하는 방해에 대해서도 알게 되었습니다.

곧 찾아올 챕터에서는 작자가 새로운 WebAssembly 사이트를 만들기위해 필요지식을 제공을 해줄것이다.
(여기서의 모든것은 기존 서비스가 되고있는 사이트를 업그레이드, 혹은 새로운 사이트를 뜻한다.)

다음 챕터는 개발 환경을 구성하는 Blazor App 을 처음 사용하는 방법을 알아보자.

🦝 Further reading

.NET 개발자들은 Uno Platform 에 관심이 있을 것이다.
이걸 사용하면 XAML에서 UI를 만들고. WebAssembly를 포함해서 여러 플랫폼에 배포할 수 있다.

ZX Spectrum 에뮬레이터에 대한 Github는 여기서 다운받으세요
https://github.com/EngstromJimmy/ZXSpectrum

🦝 Chapter 2

🦝 Creating First Blazor App

2022-07-28

해당 챕터에서는 App을 설치를 하고 세팅하는 부분을 소개합니다.
단 책에는 .NET 5와 Visual Studio 2019로 작성되어있었다.
또한 .NET 7에 추가될사항이 공개가 되었다. 많은 변화가 있으니
VSCode로 대체하여 작성합니다. (블로그 작성자)
Blazor 웹앱 만들기 및 실행 를 참고합니다.

환경 설정

cmd 창에서 dotnet –list-sdks 를 쳐서 .NET 6가 설치되어있나 확인합니다.

dotnet --list-sdks

.NET 6가 버전리스트에 없을경우 최신 .NET 6.0 SDK를 설치하기 합니다.

Blazer Server App 만들기

VScode 에서 터미널을 열고 작업을 할 폴더를 선정 후

 dotnet new blazorserver -f net6.0

를 작성합니다.

만약에 메세지가 표시가 된다면 ‘예’를 눌러주세요.
missing-assets-visual-studio-code

그리고 실행합니다.

dotnet watch run

hello-blazor

이렇게 Blazer Server App 을 생성하셨습니다.
Blazor Server project는 모든 trigger(ex_버튼을 클릭하거나 등등)에 대한
행동이 SignalR 을 통하여 서버로 전송이됩니다.
서버는 Commpoent를 다시 렌더링하고 그것에 대한 변경사항을
클라이언트로 전송하고, UI를 업데이트 합니다.
Chromium기반 웹 브라우저 기준에서
(Microsoft Edge, Chrome, Naver Whale .. 등등)
F12 를 눌러서(개발자 도구) Network 탭으로 전환을 한 다음
F5키를 눌러 다시 페이지를 갱신합니다.
브라우저에서 다운되는 모든 파일이 표시됩니다.

Server App

브라우저는 페이지, css일부 그리고 Server에 대한 SignalR 연결을
다시 설정하는 역할을 하는 Blazer.server.js를 다운로드 합니다.
그런다음(연결을 위해) endpoint를 호출하여 연결을 설정합니다.
파라미터로 blazor?id=(문자형태로 표시된다.)에 대한 호출은 WebSocket 호출로,
Client와 Server가 통신하는 개방형 연결입니다.
Counter 페이지에서 button을 클릭하면 페이지가 다시 로드되지 않습니다.

trigger(클릭 이벤트)는 SignalR을 통해 Server로 전송이되고,
페이지는 서버에서 다시 렌더링되어 render tree와 비교되며
실제 변경내용만 WebSocket을 통해 다시 푸시가 됩니다.

버튼 클릭의 경우 3번의 연결이 이루어집니다.

페이지가 이벤트를 트리거합니다.(ex_ 버튼클릭)

서버가 변경사항에 responds를 합니다.

페이지는 Document Object Model(DOM)이 업데이트 되었음을
확인하는 response를 보냅니다.

Total 490 bytes가 버튼 클릭이벤트를 위해 왔다갔다 했다.
지금까지 솔루션과 Blazor Server 프로젝트를 만들고 사용해봤습니다.
다음은 Blazor Web Assembly앱을 추가하겠습니다.

Blazer WebAssembly App 만들기

VScode 에서 터미널을 열고 작업을 할 폴더를 선정 후

 dotnet new blazorwasm -f net6.0 --hosted

를 작성합니다.

Blazor Server 프로젝트에서는 사용 할수없던 2가지 선택사항이 있다.

ASP.NET Core hosted

이 프로그램을 ASP.NET 백엔드 프로젝트를 만들고 웹 어셈블리 앱을 호스팅합니다.
이 프로그램은 앱이 엑세스할 수 있도록 웹 API를 호스팅하고자 할때 유용합니다.

이걸 선택 해야합니다.

Progressive Web Application

maniest.jsom 파일과 service-worker.js 파일을 만들고,
PWA(Progressive Web Application)으로 사용할 수 있게 됩니다.

이건 선택하지 않습니다.

프로젝트를 생성합니다.
프로젝트의 형태가 Client와 Server 2개가 생길 것이다.

실행합니다.

dotnet watch run --project Server
혹은
//dotnet watch run --project Client

Webassembly hosted

Server를 실행시키면 ASP.NET Core 프로젝트도 같이 실행이 된다.
기존 Blazor Server와 똑같이 동일한 방식으로 자동해야합니다.
F12 를 눌러서(개발자 도구) Network 탭으로 전환을 한 다음
F5키를 눌러 다시 페이지를 갱신합니다.
브라우저에서 다운되는 모든 파일이 표시됩니다.
이런 형태는 페이지가 다운로드가 되면 첫실행이 되면서
Blazor.webassembly.js 파일이 다운로드가 진행된다.
그다음 blazor.boot.json 파일을 다운로드 됩니다.
K-004

blazor.boot.json 이 가지고있는 중요한것은 entry assembly 이다.
이건 브라우저가 실행을 시작해야하는 DLL의 이름이다.
또한 앱이 실행하는데 필요한 모든 프레임워크 DLL을 포함합니다.
이제 우린 앱이 무엇을 시작해야 하는지 알 수 있습니다.
그러면 JavaScript는 dotnet.6.0.*.js를 다운로드합니다.
해당 js 파일은 blaozr.boot.json에 언급된 .NET Standard DLL,
Microsoft.NET Framework Code 및 사용할수 있는 모든 커뮤니티의
타사 DLL 등등 모든 리소스를 다운로드합니다.
그런다음 JavaScript는 웹 어셈블리에 컴파일된 Mono runtime 인
dotnet.wasm을 다운로드하여 앱을 부팅하게 합니다.

자세히보면 Loading.. 이란 글씨가 표시될 수 있다.
해당 글씨가 표시가 되고 Finishing Loading.. 이 되는 사이에
Json파일, JavaScript, Web Assembly, DLL 이 다운로드가 되고, 모든것이 부팅됩니다.

MicroSoft Edge기준 최적화되지 않은 코드로 디버그모드에서 실행하는데 1.8초가 걸린다.

참고사항

이 프로젝트에도 이름에 “Server” 가 포함되어 있으면 혼란스러울 것입니다.
프로젝트를 만들때 ASP.NET Core hosted를 선택을 했기 때문에 서버네? 할수 있는데
이것은 Client 측(WebAssembly)를 위한 백엔드를 호스팅하고 있습니다.
서버가 Blazor Server와는 관련이 전혀 없습니다.

웹 어셈블리앱을 실행하려면 MyBlogWebAssembly를 실행해야 합니다.

(blog - 우리는 dotnet new blazorwasm -f net6.0 –hosted 로 만들었다.)
MSDN - ASP.NET Core Host 를위한 패키지

K-003

Visual Studio 2022 & 2019에서 생성할경우

K-001

이렇게 쉽게 Blazor 를 검색하면 선택이 가능하다.

🦝 Figuring out the project structure

프로젝트 구조 파악

이제 서로 다른 파일과 프로젝트마다 어떻게 다른지 살펴볼 차례다.
방금 만든 두 프로젝트의 코드를 살펴보시기 바랍니다.

Program.cs

Program.cs는 가장 먼저 호출되는데 Blazor Server와 WebAssembly에도 차이가있다.

Web Assembly Program.cs .NET 6

Client Program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using blazor.Client;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

Server Program.cs

using Microsoft.AspNetCore.ResponseCompression;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseBlazorFrameworkFiles();
app.UseStaticFiles();

app.UseRouting();


app.MapRazorPages();
app.MapControllers();
app.MapFallbackToFile("index.html");

app.Run();

(* 해당 책은 .NET 5기반으로 작성되어, .NET 6 로 변경된 내용으로 설명합니다.)
만약 어렵다면 ASP.NET Core 5.0에서 6.0으로 마이그레이션하기 를 참고합니다.

builder가 가장 먼저 호출됩니다.
앱을 root component로 추가하고 전체 Single-Page Application 사이트가
App component 안에서 렌더링됩니다.
(이 내용의 component는 챕터 뒷부분에서 다시 다루겠습니다. )

그리고 HttpClient를 scoped dependency를 추가합니다.
챕터3 “Entity Framework Core 소개” 에서는 의존성 주입에 대해 깊게 파고들지만
지금 현재 이챕터에서는 페이지내부에 객체를 만들지않도록 객체(의존성)를 주입해
객체 및 유형 생성을 추상화처리 하는 방식입니다.

대신 객체가 Page/Classes 전달되기에 테스트가 쉬워지고
클래스는 우리가 모르는 종속성이 없습니다.

웹 어셈블리 버전이 브라우저에서 실행중이므로 데이터를 가져올 수 있는
유일한 방법은 외부호출(ex_ server)입니다. 따라서 HttpClient에 액세스 해야합니다.

WebAssembly는 데이터를 다운로드하기 위해 직접 호출하는 것이 허용되지 않습니다.
그렇기에 WebAssembly를 위한 특별한 구현체로 HttpClient는 데이터를 다운로드 하기위해
JavaScript interop 호출을 이용합니다.

앞에서도 말했듯이 WebAssembly는 sandbox에서 실행되며,
이 sendbox 밖에서 통신할 수 있으려면 적절한
Javascript/browser API를 거쳐야 합니다.

Blazor Server Program.cs .NET 6

Blazor Server 프로젝트는 약간 다르게 보입니다. (물론 동일하게 움직인다.)

Program.cs

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using blazor.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

물론 Web Assembly와 동일하게 가장 먼저 호출이 됩니다.

참고
기존에 .NET 5 에서는 Program.cs와 Startup.cs 가 나눠져 있었으나
builder 부분만 Program.cs에 있었고, Service부분과 app.부분이
1개로 합쳐졌다 보면 눈에 들어오기 시작할 것이다.

builder.Services 를 통하여 서비스를 등록합니다.
이러한 형태는 Blazor Server 에서만 구성합니다.
몇가지 방법이 있는데 하나씩 살펴 볼 것이다.

책의 문맥에 따라 .NET 5 로 작성합니다.

Startup.cs

//<Startup>
public Startup(IConfiguration configuration)
{
    Configuration = configuration;
}

Startup 메서드는 IConfiguration 구성객체를 가져오는 생성자이다.
Configuration property를 사용하면 모든 설정에 엑세스 할 수 있다.
그 다음은 서비스 구성입니다.

//<StartupConfigureServices>
public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages(); //1
    services.AddServerSideBlazor(); //2
    services.AddSingleton<WeatherForecastService>();
}

ConfigureServices 메서드는 애플리케이션에서 필요한 모든 종속성을 추가하는 방법입니다.
이경우 Blazor를 실행하는 페이지인 Razor Pages(이들은 .cshtml 파일)를 추가합니다.
그런다음 ServerSideBlazor를 추가하면 Blazor Server를 실행하는데 필요한 모든 개체에
액세스를 할수 있습니다.
그리고 다음페이지로 이동할때 사용되는 WeatherForcastService를 추가합니다.

다음은 필요한 모든것을 구성하는 방법 입니다.

// This method gets called by the runtime. Use this method 
// to configure the HTTP request pipeline.
//<StartupConfigure>
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}
//</StartupConfigure>

UseDeveloperExceptionPage는 개발환경에서 실행되는 동안
우리의 응용 프로그램이 더 많은 세부정보를 가진 개발자 예외 페이지를
보여주어 더쉽게 디버깅 할 수 있도록 도와줍니다.
개발중에 실행되지 않으면 예외 처리로 리다이렉션되어
보다 친숙한 오류 메세지로 표시가 됩니다.

또한 HSTS(HTTP Strict Transport Security)를 구성하여
응용 프로그램이 HTTPS를 사용하도록 하고 사용자가 신뢰할 수 없는 리소스 혹은
인증서를 사용하지 않도록 설정합니다. 그리고 사이트가 HTTPS로 리다이렉션되어
사이트를 안전하게 보호하도록 합니다.

UseStaticFiles() 를 사용하면 CSS 또는 이미지와 같은 정적파일을 다운로드 할 수 있다.
다른 Use* 메서드들은 Request Delegate 혹은 request pipeline 이나
Middleware pipeline에 추가합니다.
각 요청은(DeveloperException, httpRedirection, StaticFiles 등) 위에서 아래로
연속적으로 호출되고 다시 호출됩니다.

예외 처리가 가장 먼저 추가되는 이유는 이것이다.
K-005

그림처럼 다음에 오는 요청 대리자가 예외가 있더라도 Exception handler가
처리를 할 수 있습니다.(요청이 파이프라인을 통해 다시 이동하기 때문에)
예를 들어 이러한 요청 대리자가 정적 파일의 경우 요청을 처리하는 경우
재라우팅을 포함할 필요가 없으며 나머지 요청 대리자는 호출되지 않습니다.

정적파일에 대한 요청이라면 라우팅이 필요하지 않습니다.
경우에 따라 위임된 요청을 올바른 순서로 추가하는것이 중요합니다.

Note : 더 자세히 알아보려면 ASP.NET Core 미들웨어 를 참고하세요.

Configure 메서드가 끝나면 Routing 을 연결하고 endpoints를 추가합니다.
Blazor SignalR hub 의 endpoints를 생성하고 반환받을 항목을 찾지 못하면
앱의 라우팅을 처리할 _host 파일을 호출합니다.

_host 파일이 trigger가 되면 앱의 첫페이지가 로드됩니다.

🦝 Index/_host

다음으로 인덱스 또는 호스트 파일이 실행됩니다.
필요한 JavaScript를 로드하는데 필요한 정보가 포함되어 있습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorWebAssembly</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorWebAssembly.Client.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

_Host (Blazor Server)

Blazor Server 프로제게트에는 페이지 폴더에 Host.cshtml 파일이 있습니다.
이 페이지는 Razor Component와 동일하지 않는 Razor 페이지 입니다.

Razor Page 는 페이지를 만드는 방법 입니다.
레이저 문법을 사용할 수 있지만 Component로 사용할 수 없습니다.
(Component는 페이지의 일부 및 다른 Component의 내부로 사용 될 수 있다.)

Razor Component 는 앱 전체에서 사용할 수 있는 재사용 가능한 뷰를 만드는 방법 입니다.
Grid Component(ex_ 테이블 렌더링)를 빌드하여 앱에서 사용하거나
다른 사용자가 사용할 수 있도록 라이브러리로 패키징할 수 있습니다.
그러나, Component는 Component에서 @page 지시어를 추가하여 페이지로도 사용할 수 있다.
해당내용은 추 후 계속 설명하겠습니다.

대부분 Blazor Applications에서는 cshtml 페이지가 하나만 있어야 하며,
나머지는 Razor Component여야 합니다.
페이지 상단에는 @ 와같이 지시문이 있습니다. (ex_ page, namespace, using, addTagHelper)

@page "/"
@namespace BlazorTestServerSide.Pages
@using MyBlogServerSide
@addTageHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

이파일에는 주목할 만한 몇가지 측면이 있습니다.
@ directives 는 페이지의 URL을 설정하고, namespace를 추가하고,
tag helper도 추가하며 레이아웃 페이지를 사용하지 않도록 합니다.
해당내용은 Chapter 4의 Basic Blazor Component에서 다룹니다.
이 페이지의 Layout을 원하지 않는 이유는 레이아웃이 앱 Component에 로드되기 때문입니다.
표준 HTML 문서유형, metatag, title, style 이 있습니다.
Blazor에 특징으로 유일한 base Tag는

<base href="~/"/>

이건 당신의 페이지가 Blazor SignalrR 허브를 찾을 수 있도록 합니다.
base Tag가 없으면 폴더 내의 페이지로 이동하자마자 상대 URL이 더이상
Blazor 또는 SignalR 허브를 찾지 못하기 때문에 사이트가 중단됩니다.

다음으로 문법 태그에 App Component가 포함되어 있습니다.

<Component type="typeof(APP)" render-mode="ServerPrerendered"/>

여기서는 저너체 응용프로그램이 렌더링이 됩니다.
App Component가 이작업을 처리합니다.
이 방법은 Component Tag Helper를 사용하여 Blazor가 아닌 기존 App에
Blazor Component를 추가하는 방식이기도 합니다.

그것은 Component 앱이라 불리도록 만들 것 입니다.
여기에는 5가지의 다른 렌더링모드가 존재합니다.

ServerPrerendered Mode
서버의 모든 콘텐츠를 렌더링하고 페이지가 처음 다운로드될 때 콘텐츠의 일부로 전달합니다.
그런 다음 Blazor SignalR 허브를 연결하고 변경 사항이 서버에 푸시되는지 확인합니다.
그러나 서버는 또 다른 렌더링을 만들고 해당 변경 사항을 SignalR에 푸시합니다.
일반적으로 아무 것도 눈치채지 못하지만 서버에서 특정 이벤트를 사용하는 경우 두 번 트리거되어
불필요한 데이터베이스 호출을 할 수 있습니다.

Server Mode
두번째 옵션은 전체 페이지를 보내고 Component에 대한 자리 표시자를 추가하는 서버입니다.
그런다음 SignalR을 연결하고 변경이 완료가되면(ex_ DB에서 Select 를 날릴경우)
서버가 변경 사항을 전송하도록 합니다.

Static Mode
세번째 옵션은 Static 이며 Component를 렌더링을 한 후 다음 연결을 끊습니다.
즉, 이벤트를 수신하지 않고 Component를 더이상 업데이트하지 않습니다.
이것은 정적데이터에 대한 좋은 옵션이 될 수 있습니다.

WebAssembly Mode
네번째 옵션은 WebAssembly 애플리케이션에 대한 마커를 렌더링하지만 Component에서
아무것도 출력을 하지 않습니다.

WebAssemblyPrerendered Mode
다섯번째 옵션은 Component를 Static HTML로 렌더링한 다음
WebAssembly 앱을 해당 공간으로 부트스트랩합니다.

이건 앱이 더빨리 로드되는 것 처럼 느낄수 있습니다.

Note: 옵션 3~5에 대한 자세한 정보는 ASP.NET Core Razor 구성 요소 미리 렌더링 및 통합 를 참고하세요.

우리는 다른 옵션에 대해 더 깊이 들어가지 않을 것입니다.
ServerPrerendered는 기술적으로 페이지를 화면에 표시하는 가장 빠른 방법입니다.
빨리 로드되는 페이지가 있다면 이것은 좋은 선택입니다.
페이지에서 컨텐츠를 빠르게 표시하고 서버가 데이터베이스에서 데이터를 가져오는 것을 완료했을때
데이터를 로드하는 빠른 로딩시간을 갖도록 하려면 Server가 더 나은 옵션입니다.
사이트가 빠르게 느껴져야 하기 때문에 Server 옵션을 선호합니다.
Server로 전환하는 것은 새로운 Blazor 사이트를 만들 때 가장 먼저 변경하는 것입니다.
페이지가 더 빨리 로드되는 것처럼 느껴지기 때문에 몇 밀리초 후에 데이터가 표시되도록 하는 것이 좋습니다.
_host파일에는 오류 메시지가 있는 경우 표시되는 UI의 작은 부분이 있습니다.

<div id="blazor-error-ui">
    <environment include="Staging, Production">
        <div class="error-message">
            <h1>오류</h1>
            <p>오류 메시지</p>
        </div>
    </environment>
    <enviroment include="Development">
        <div class="error-message">
            <h1>오류</h1>
            <p>오류 메시지</p>
        </div>
    </enviroment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">X</a>
</div>

JavaScript가 UI 업데이트와 관련되어 있기때문에 이 Errer UI(또는 변형된)를 유지하는 것이 좋습니다.
어떤 경우에는 페이지가 깨지고 JavaScript 실행이 중지되고, SignalR 연결이 실패할 수 있습니다.
그런 일이 발생하면 JavaScript 콘솔에 멋진 오류 메시지가 표시됩니다.
그러나 오류 UI 팝업을 표시하면 콘솔을 확인해야 함을 알 수 있습니다.
_host 페이지에서 마지막으로 다룰 것은 모든 마법이 일어나는 곳,
모든 것을 연결하는 JavaScript 입니다.

<script src="_framework/blazor.server.js"></script>

script는 서버에대한 SignalR 연결을 생성하고, 서버에서 DOM을 업데이트하고,
트리거를 서버로 다시 보내는 역할을 합니다.

Index (WebAssembly)

WebAssembly 프로젝트는 거의 비슷하게 보입니다.
MyBlogWebAssembly.Client 프로젝트에서 wwwroot/index.html 파일을 실행합니다.
이파일은 HTML 전용 이므로 Blazor Server 버전과 같이 맨 위에 지시문이 없습니다.
Blazor Server와 마찬가지로 base tag 는 찾을수 있습니다.

<base href="/" />

component tag(blazor Server 도 같이) 대신 여기에는 div 태그를 찾을 수 있고,
Program.cs 에 있습니다. App Component를 div 태그에 연결하는 cs(이전 Program.cs Section 참조)

<div id="app">Loading...</div>

앱이 시작되는 동안 표시될 컨텐츠를 원하는경우 Loading…을 다른것으로 바꿀 수 있습니다.

오류UI도 약간 다르게 보입니다. Blazor Server에서와 같이 development 나 production 가 없습니다.
여기서는 오류를 표시하는 한 가지 방법만 있습니다.

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">X</a>
</div>

마지막으로 JavaScript를 로드하는 script 태그가 있습니다. 이렇게 하면 모든 코드를 로드할 수 있습니다.
WebAssembly 코드를 실행하는데 필요합니다.

<script src="_framework/blazor.webassembly.js"></script>

Blazor Server용 Script가 Backend server 와 DOM간 통신을 하고,
WebAssembly Script는 WebAssembly .NET 런타임과 DOM 간에 통신을 합니다.

이 시점에서 앱이 시작되고 Blazor Server와 Blazor WebAssembly의 차이점은 더이상 존재하지 않습니다.
이제부터는 모두 Razor Component입니다. 첫번째로 로드가될 Component는 App 입니다.

App

App Component는 Blazor WebAssembly와 Blazor Server 모두 동일합니다.
Router Component를 포함합니다.

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

이 파일은 라우팅을 처리하여 표시할 올바른 Component를 찾습니다. (@page 지시문 기반)
만약 경로를 찾을 수 없으면 오류 메시지를 표시됩니다.
뒤 Chapter 8의 인증과 권한부여 파트에서 해당파일을 수정하면서 구현하겠습니다.

App Component에는 기본 레이아웃도 포함되어 있습니다.
Layout은 Component이지만 일반적으로 사이트에 대한 하나의 Layout 페이지가 있습니다.
이 경우는 기본값인 MainLayout을 부릅니다.

MainLayout

MainLayout은 페이지로 볼때 모든 Component에 대한 기본 레이아웃을 포함합니다.
메인 레이아웃에는 2개의 div 태그가 존재합니다. 하나는 sidebar 그리고 하나는 main 컨텐츠가 존재합니다.

@inherits LayoutComponentBase

<!-- 이건 server에만 생긴다. -->
<PageTitle>BlazorServer</PageTitle> 

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

이 HTML 문서에서 필요한것은 @inherits LayoutComponentBase과
@Body 부분입니다. 나머지는 부트스트랩입니다.
@inherits 지시문은 레이아웃을 사용하기 위한 모든 코드를 포함하는
LayoutComponentBase를 상속받는다는 의미입니다.
@Body 지시문은 Component가 렌더링되는 위치입니다. (페이지를 볼때)

Bootstrap

Bootstrap(부트스트랩)은 제일 유명한 CSS 프레임워크중 하나이고
반응형으로 렌더링되는 웹사이트를 만들기 위해 사용됩니다.

wwwroot/index.html 파일에서 Bootstrap에 대한 참조를 찾을 수 있습니다.
트위터를 위해 만들어졌습니다. 자세한 내용은 Bootstrap Homepage를 참조해주세요.

Layout 상단에보면 Razor Component인 NavMenu.razor 가 보입니다.
해당 파일은 Shared Components에 있습니다.

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorWebAssembly</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

이건 왼쪽 메뉴를 포함하며 표준 부스스트랩 메뉴입니다.
또한 햄버거메뉴에 대한 세가지 메뉴 항목과 논리가 있습니다. (모바일로 볼때)
이러한 경우 유형의 탐색 메뉴는 일반적으로 JavaScript로 수행되지만,
이 메뉴는 CSS와 C#만으로 수행됩니다.

프레임워크에 내장된 또다른 Component인 NavLink를 찾을 수 있습니다.
anchor tag를 렌더링하지만 현재 경로도 확인합니다.
현재 링크와 동일한 경로의 URL에 있는 경우에 태그에 active 클래스를 자동 추가합니다.

도움이 될 몇가지 기본으로 제공되는 Component를 더 실행합니다. 템플릿에도
일부 페이지가 있지만 지금은 그대로 두고 다음 Chapter에서 Component로 이동할때
확인을 해보도록 하겠습니다.

🦝 Summary

이번장 Chapter 2에서는 개발환경을 설정하고, Blazor WebAssembly와
Blazor Server 모두 실행하면서 첫번째 Blazor App을 만들었습니다.
클래스들과, Component들 그리고 Layout이 호출되는 순서를 배웠습니다.
그러므로 이제 코드를 쉽게 따라갈 수 있습니다. 또한
Blazor Server와 Blazor WebAssembly 프로젝트간 몇가지 차이점에 대해 다뤘습니다.
다음장에서는 Blazor에서 잠시 Entity Framework Core 5를 살펴보고
데이터베이스를 설정합니다.
만약 독자분들중 Entity Framework에 대해 이미 알고있다면,
4장으로 건너 뛰어도 됩니다. 여기에서 템플릿의 Component를 자세히 살펴보고 난 후
첫번째 Component를 만듭니다.

🦝 Chapter 3

🦝 Introducing Entity Framework Core(EF Core)

이번 장에서는 Entity Framework를 살펴보고 Blog 게시물을 저장하는
데이터베이스를 만듭니다. 대부분의 응용프로그램은 데이터를 다양한
형식으로 사용하기 때문에 이 장의 목표는 Blazor 응용 프로그램에서
데이터베이스의 데이터를 사용할 수 있도록 하는 것입니다.
또한 데이터에 접근할 수 있는 API를 만들것입니다.
이 장의 끝에는 우리가 .NET CLI를 사용해서 새로운 프로젝트를 만들고,
새 NuGet 패키지를 추가하며 마이그레이션을 만드는 방법을 살펴보겠습니다.

이번 장에는 다음내용을 다룹니다.

data project 생성

Blazor에 DbContext 추가

Entity Framework Core를 참고하셔도 됩니다.

기술 요구사항

이전 장을 잘 따라왔는지 확인을 해보세요.
이번 장부터는 Ch2폴더를 생성하고 시작합니다.

Entity Framework Core 5를 사용해서 데이터베이스 프로젝트를 만들것입니다.
Entity Framework Core 사용에 있어서 관심이 없다면 건너 뛸 수도 있습니다.
Github repo 에서 Ch3 폴더를 다운로드하여 다시 시작 할 수 있습니다.
Entity Framework에 대해서는 자세히 다루지는 않지만,
새로운 기능중 일부를 다룰 것입니다. 해당 Chapter의 최종코드는
https://github.com/PacktPublishing/Web-Development-with-Blazor 에서 참고하실 수 있습니다.

🦝 Creating a data project

to be continued…

Creating a new project

Adding NuGet Packages

Creating data classes

Creating the Database Context

Creating a migration

Creating an interface

Implementing the interface

🦝 Adding the DbContext to Blazor

🦝 Summary

🦝 작업을 하면서..

🦝 필수 사전지식

ASP.NET Core의 Razor Pages 소개

ASP.NET Core용 Razor 구문 참조

Razor는 웹 페이지에 .NET 기반 코드를 포함하는 태그 구문입니다. Razor 구문은
Razor 태그, C# 및 HTML로 구성됩니다. Razor를 포함하는 파일의 확장명은
일반적으로 .cshtml입니다. Razor는 Razor 구성 요소 파일(.razor)에도 있습니다.

🦝 변화와 알아야할 사항들

Blazor (Blazor 관련 강연 및 강의 내용)

What is Blazor [1 of 11] | Blazor for Beginners
State management in Blazor - NDC Porto 2022
What’s next for Blazor, and .NET on WASI - NDC Porto 2022 추천
Making Blazor work with everything, plus WebAssembly on the server
Future Possibilities for .NET Core and WASI (WebAssembly on the Server) | OD108 추천
NET MAUI Blazor - Build Hybrid Mobile, Desktop, and Web apps
Blazor WebAssembly & Web API on .NET 6 – Full Course
.NET MAUI - Full Course for Beginners

.NET 7 Preview

ASP.NET Core updates in .NET 7 Preview 1
ASP.NET Core updates in .NET 7 Preview 2
ASP.NET Core updates in .NET 7 Preview 3
ASP.NET Core updates in .NET 7 Preview 4
ASP.NET Core updates in .NET 7 Preview 5
ASP.NET Core updates in .NET 7 Preview 6
ASP.NET Core updates in .NET 7 Preview 7

사용된 색상

#9688F2
#7EBCF2
#6AD991
#F25050
#F2F2F2

사용된 이모지

🦝

Note: 만들고나니 내것이 아니었다.

Share on

Twitter Facebook LinkedIn

Yoon Sik Lim

🦝 들어가며

🦝 감사의 말

🦝 이 책이 다루고 있는 것

🦝 Chapter 1. Hello Blazor

🦝 Chapter 2. Blazor App 만들기

🦝 Chapter 3. Entity Framework Core 소개

🦝 Chapter 4. Basic Blazor Component (기초적인 Blazor Component)

🦝 Chapter 5. Advanced Blazor Component (고급적인 Blazor Component)

🦝 Chapter 6. 유효성 검사

🦝 Chapter 7. API 만들기

🦝 Chapter 8. 인증과 권한부여

🦝 Chapter 9. 코드 및 리소스 공유

🦝 Chapter 10. JavaScript Interop

🦝 Chapter 11. 상태 관리

🦝 Chapter 12. Debugging

🦝 Chapter 13. Testing

🦝 Chapter 14. 운영 단계

🦝 Chapter 15. Where to Go from Here

🦝 책을 읽기전 개발환경 요구사항

🦝 Chapter 1

🦝 Introducting Blazor (Blazor의 탄생)

🦝 Blazor Server

🦝 Blazor WebAssembly

🦝 Blazor WebAssembly VS Blazor Server

🦝 WebWindow

🦝 Blazor Mobile Bindings

🦝 Blazor Hybrid

🦝 Summary

🦝 Further reading

🦝 Chapter 2

🦝 Creating First Blazor App

환경 설정

Blazer Server App 만들기

버튼 클릭의 경우 3번의 연결이 이루어집니다.

Blazer WebAssembly App 만들기

참고사항

Visual Studio 2022 & 2019에서 생성할경우

🦝 Figuring out the project structure

프로젝트 구조 파악

Program.cs

Web Assembly Program.cs .NET 6

Blazor Server Program.cs .NET 6

🦝 Index/_host

_Host (Blazor Server)

Index (WebAssembly)

App

MainLayout

Bootstrap

🦝 Summary

🦝 Chapter 3

🦝 Introducing Entity Framework Core(EF Core)

기술 요구사항

🦝 Creating a data project

Creating a new project

Adding NuGet Packages

Creating data classes

Creating the Database Context

Creating a migration

Creating an interface

Implementing the interface

🦝 Adding the DbContext to Blazor

🦝 Summary

🦝 작업을 하면서..

🦝 필수 사전지식

🦝 변화와 알아야할 사항들

Blazor (Blazor 관련 강연 및 강의 내용)

.NET 7 Preview

사용된 색상

사용된 이모지

Share on

Leave a comment

You may also enjoy

[NotionAPI] NotionAPI simple code

[gRPC]python gRPC client

[WinUI3] .NET 8 - WinUI Project Install Error & Fixed

[windows11] 추가 옵션 표시를 기존으로