블레이저 (5) 썸네일형 리스트형 [블레이저] 컴포넌트와 클래스 컴포넌트와 클래스 .razor 컴포넌트는 HTML과 C# 코드를 하나의 파일에 사용할 수 있음 .razor 컴포넌트에는 HTML을 .cs 파일에는 C# 코드를 따로 분리하여 사용할 수 있음 Counter.razor @page "/counter" Counter Counter Current count: @currentCount Click me @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } } Counter 컴포넌트가 컴파일되면 @code { ... } 부분이 아래와 같은 클래스로 생성 public partial class Counter { private int currentCount = 0; pri.. [블레이저] 컴포넌트 컴포넌트 블레이저는 컴포넌트 기반의 프레임워크 예를 들면 현대차와 기아차에 동일한 컴포넌트(부품)이 들어간다고 생각 블레이저를 생성하면 Index.razor, Counter.razor, FetchData.razor 있는데 Counter.razor가 Index.razor, FetchData.razor에서 재사용될 수 있음. 즉 Counter.razor라는 부품을 다른 .razor 에 넣음 HTML 삽입 미리보기할 수 없는 소스 블레이저를 생성하면 기본적으로 제공하는 Counter.razor @page "/counter" Counter Counter Current count: @currentCount Click me @code { private int currentCount = 0; private void .. [블레이저] NavMenu 바꾸기(스크롤바 추가) HTML 삽입 미리보기할 수 없는 소스 참고: https://getbootstrap.com/docs/5.1/examples/sidebars/ Sidebars · Bootstrap v5.1 List group item heading Tues Some placeholder content in a paragraph below the heading and date. List group item heading Tues Some placeholder content in a paragraph below the heading and date. List group item heading Tues Some placeholder content in a par getbootstrap.com 예제 다운로드: https://ge.. [블레이저] Blazor Server 앱 프로젝트 구조 Program.cs 진입점이며 필요한 서비스 & 미들웨어(앱을 효율적으로 만들 수 있도록 기능을 지원)를 추가 생명주기 AddTransient: 브라우저(클라이언트)가 요청할 때마다 인스턴스 새로 생성 AddScoped: 브라우저(클라이언트)가 처음 요청시 한 번 생성하고 그 후에 요청시 기존 인스턴스 재사용 AddSingleton: 인스턴스 하나로 지속적인 재사용 wwwroot 정적 파일(웹 페이지를 렌더링할 때 고정된 js, css, image, ... 등등)을 보관하는 곳 App.razor 브라우저에서 요청한 주소가 있는지 확인하는 라우터 역할 기본적으로 라우터라고 함은 라우터에 데이터 패킷이 수신되었을 때 라우터가 데이터의 주소를 검사하고 나의 네트워크라고 판단하면 이를 수신하고, 다른 네트워크라.. [블레이저] Blazor Server 인트로 Blazor를 사용하는 이유 서버 개발: C#, Java, PHP, ... 등과 같은 프로그래밍 언어 사용 클라이언트 개발: Angular, React, Vue, ... 등과 같은 JavaScript 프레임워크 사용 서버 & 클라이언트 개발: Blazor는 C# 프로그래밍 언어를 사용하여 서버 & 클라이언트 개발 브라우저는 어떻게 C# 코드를 인식하는가? Blazor는 WebAssembly를 사용하고, WebAssembly는 브라우저에서 모든 유형(C, C#, Rust, ...)의 코드를 실행 블레이저 서버 호스팅 모델 클라이언트와 서버는 SignalR 이라는 방식으로 연결되어 양방향 통신 가능 이전 1 다음