코다의 코딩공부 코다의 코딩공부

1. Templated 템플릿은 C++의 템플릿과 동일한 의미를 지닌다. C#으로 치면 제네릭형식이다. List test; 그리고 Templated는 RenderFragment로 이루어진 Razor Component이다. 이 말이 어려우니 일단 예시로 살펴보자. 2. 사용예시 FetchData.razor @page "/fetchdata" @using BlazorApp.Data @inject WeatherForecastService ForecastService @*Templated Component*@ @* RenderFragment로 이루어진 Razor Component*@ Weather forecast This component demonstrates fetching data from a service..

1. 사용하는 이유 User.razor ShowUser.razor를 컴포넌트로 사용하고 싶을 때는 위와 같은 한 줄의 코드로 연동을 할 수 있다. ... 그런데 위와같이 컴포넌트가 필요할 때 마다 User.razor와 연동을 하게 된다면 이는 제법 번거로운 작업이 될 수 있다. 그래서 다수의 컴포넌트에 대해 공통된 연동 작업을 한 번에 처리하기 위해 Cascading Parameter를 사용한다. 2. 사용방법 User.razor @code { string _selectedColor = "Green"; List _options = new List() { "Green", "Red", "Blue" }; 우선 위의 두 코드블럭을 기존의 User.razor에 추가한다. 인자 중에서 Name과 Value가 있는데..

1. 컴포넌트화 아래의 코드를 분석할 필요는 없다. User.razor @page "/user" @using BlazorApp.Data Online User Users: @_users.Count() @foreach (UserData user in _users) { ban @user.Name } Add a User @code { List _users = new List(); string _inputName; string _btnClass = "btn btn-primary"; protected override void OnInitialized() // User에 접근해서 페이지를 열면 초기화되는 함수 { _users.Add(new UserData() { Name = "Rookiss" }); _users.Ad..

1. 한방향 바인딩 Blazor에서 바인딩은 html코드와 C#코드를 연동하는 행위를 뜻한다. 우선 Pages폴더 내에 Binding.razor 파일을 생성해준다. Binding.razor @page "/bingding" Binding Value : @_value @code { int _value = 15; } @code부분에서 C#코드 등을 정의하고 그 외에는 HTML코드이다. 그리고 '@'의 뜻은 C#과 관련된 코드라는 뜻이다. 그리고 위의 코드에서 @_value는 @code에 정의되어있는 _value의 변수를 가져온다는 뜻이다. NevMenu.razor Binding 그리고 NevMenu.razor는 미리 생성된 파일인데 위의 코드를 추가해준다. 실행결과. NevMenu.razor를 통해 sideb..

1. Blazor Client vs Blazor Server Blazor Client 실행결과) Blazor Client프로젝트를 생성하고 실행하면 Blazor Server와 똑같은 웹페이지가 출력됨을 볼 수 있다. 그리고 폴더와 파일의 구성도 비슷하고 파일의 내용도 다 비슷한데 다른 ASP.NET Core와 달리 Startup.cs가 없다는 것을 알 수 있다. 2. Blazor Client철학 최초에 게임을 다운로드 받을 때의 1회에만 서버에서 요청을 하고 게임을 실행할 때 부터는 네트워크와 연결을 끊고 독립적으로 게임을 실행하는 경우가 있다. 이렇듯 서버와 거의 상호작용없이 독립적으로 프로그램을 처리하는 경우에 사용하는 것이 Blazor Client이다. 예를들어, 스팀에서 싱글 플레이어 게임을 다운..

1. Blazor Server 흐름분석 Blazor Server프로젝트를 생성하면 위와같은 폴더와 파일들이 생성이되는데 이를 실행하면 아래의 웹 페이지가 출력이된다. 코드의 흐름을 보면 다음의 순서와 같다. Program.cs using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.Hosting; using Microsoft..

1. WebAPI 분석 웹 API는 M, C는 있지만 V는 없는 패턴이다. V : HTML형식으로 UI를 그려줌 UI를 없애는 이유는 UI가 그릴필요가 없는 경우가 있기 때문이다. 예를들어, 서버에서 유니티로 데이터를 전송하는 경우에 HTML로 UI를 그리는게 아니고 유니티 내에서 UI를 그리는 경우가 있다. 이런 경우에 HTML로 UI를 그리는 것은 불필요하기 때문에 없애주는 것이다. 결국 데이터만 보내주고 View는 알아서 그리라는 것이다. 2. WebAPI 구현 HelloMessage.cs using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace HelloEmpty...

1. Razor Page 구성 MVC패턴에서는 M, V, C의 3가지 구성요소로 이루어져있었다. M : 원본 데이터를 표현 V : 웹 사이트에 출력되는 걸 표현 C : 기능 표현 그리고 Razor Page는 M-VC모델이라고 봐도되는데 VC의 역할을 하는 것이 Page이다. 2. Razor Page 구현 저번의 MVC처럼 이번에도 HelloEmpty프로젝트를 통해 Razor Page를 구현해본다. 그러면 위의 사진처럼 2개의 파일이 생성되는데 index.cshtml이 View의 역할을 하고, index.cshtml.cs가 Controller의 역할을 한다. index.cshtml @page @model HelloEmpty.Pages.IndexModel @Model.HelloMsg.Message @Mode..