monstrosite

이번 포스트에서는 Blazor를 사용하여 사용자의 랭킹을 보여주는 앱을 만들어보겠습니다. 해당 프로젝트를 생성할 때 기존의 Blazor Server 기반으로 생성하되,Authentication Type을 Individual로 설정하여 개개인에게 인증을 수행하도록 하겠습니다. 생성된 프로젝트를 보면, 다음처럼 기존의 방식과 차이가 있다는 것을 확인할 수 있습니다.그중에서 중요한 파일들을 몇개 확인해보면, 다음과 같습니다. 1) Startup 클래스 웹 페이지에서 제공하는 서비스들을 정의한 ConfigureServices 메서드에서 위의 3가지 동작을 수행하고 있습니다.각각 다음과 같습니다.AddDbContext : DB를 연결하는 방법을 명시, 현재는 Entity Framework 방식을 의미함UseSq..

이번 포스트에서는 Blazor 방식 웹 페이지에서 자바스크립트를 사용하는 방법을 알아보겠습니다.  우선, wwwroot 아래에 test.js라는 자바스크립트 파일을 하나 생성하겠습니다.  또, _Host.cshtml에서 해당 자바스크립트 파일을 사용하기 위해 자바스크립트 파일의 경로를 추가하겠습니다. 1) test - 자바스크립트 파일var func = (function () { window.testFunction = { helloWorld: function () { return alert("Hello World"); }, inputName: function (text) { return prompt(text, 'Input ..

이번 포스트에서는 웹 페이지들간의 상태를 공유하는 상태 관리에 대해 알아보겠습니다.상태를 공유한다는 것은 현재 웹 페이지의 변수를 다른 웹 페이지에서 사용가능하며변수의 상태 또한 동일하게 유지된다는 것을 의미합니다. 1) CounterState 클래스public class CounterState{ int _count = 0; public Action OnStateChanged; public int Count { get { return _count; } set { _count = value; Refresh(); } } void Refresh..

이번 포스트에서는 Razor 컴포넌트에서 제공되는 기능을 이용하여 입력폼을 만들어보겠습니다.입력폼은 기온과 설명을 입력받고 입력받은 내용을 테이블에 추가하는 동작을 수행합니다. 1) WeatherForecast 클래스 우선, 입력받을 내용을 프로퍼티로 갖고 있는 WeatherForecast 클래스를 수정하겠습니다.해당 클래스에서 사용할 프로퍼티는 2개로, 섭씨 온도와 해당 온도에 대한 설명을 담고 있습니다. 섭씨 온도에 대한 프로퍼티에 Attribute를 적용합니다.각각 다음과 같습니다.Required / ErrorMessage : 해당 프로퍼티가 설정되지 않으면 에러 메세지를 띄움Range / typeof(int) : 설정한 정수범위의 값만 입력받을 수 있음  섭씨 온도에 대한 설명의 프로퍼티에도 At..

이번 포스트에서는 웹 페이지의 동작 방식 중 하나인 SPA의 구조와사용자가 입력한 경로에 맞춰 올바른 컴포넌트를 동작시키는 Router에 대해 알아보겠습니다. 1) SPASPA는 Single Page Application의 약자로, 동적 페이지를 작동시키는 방식입니다.이때 모든 부분을 갱신하는 것은 자원의 낭비로 이어지므로Javascript와 DOM을 사용하여 필요한 부분만 갱신하는 것이 핵심입니다.  Blazor에서는 SPA를 동작시키는 경우, LayoutComponentBase를 통해 동작시킬 수 있습니다.  또한, LayoutComponentBase는 내부적으로 RenderFragment로 구성되어 있습니다.  LayoutComponentBase를 사용하는 MainLayout에서 사용하는 @Body..

이번 포스트에서는 C#에서 웹 서버를 구현할 때 클래스간의 의존성을 줄이는 방법인 Dependency Injection에 대해 알아보겠습니다.  1) 기존의 처리 방법클래스 간의 의존성을 줄이는 기존의 방법 중에 대표적으로 Interface가 있습니다.Interface를 통해 클래스 - 클래스간의 관계에서 중간단계를 추가하여 처리가 가능합니다.  그러나 Interface를 사용해도, 클래스의 인스턴스를 생성하여 로직을 처리해야 한다는 문제점은 변하지 않습니다. 따라서 위와 같은 문제점을 처리하기 위해 사용가능한 Dependency Injection을 알아보고Dependency Injection의 장점과 Dependency Injection별 생명주기 역시 알아보겠습니다. 2) Dependeny Injec..

이번 포스트에서는 Razor Component를 사용하는 방법 중 하나인 Templated Component를 알아보겠습니다.이름에서 알 수 있듯이 C++의 Template이나 C#의 Generic과 비슷하게 사용할 수 있습니다. 1) Templated ComponentTemplated Component는 간단하게 RenderFragment로만 이뤄진 Component라고 표현할 수 있습니다.따라서 Templated Component의 주요 목적은 로직의 동작보다는 여러 자료형의 인자를 사용하여 UI를 시각적으로 표현하는데 있습니다. 그렇다면 이제 Templated Component를 사용한 예제를 알아보겠습니다. 2) 예제2 - 1) TableTemplate 컴포넌트@using BlazorApp.Dat..

이번 포스트에서는 부모 Component와 자식 Component간에 변수를 연결해주는 방법인 Parameter에서 파생된 한번에 많은 변수를 넘기는 방법인 Cascading Parameter에 대해 알아보겠습니다. Cascading Parameter에 대해 간략하게 알아보면 다음과 같습니다.부모 Component는 CascadingValue 태그를 통해 구역을 설정하여 변수를 넘겨준다이때 Value와 Name 속성을 지정하여 변수의 이름과 값을 설정한다자식 Component는 CascadingParameter를 설정하여 받을 변수를 설정한다 Cascading Parameter는 자식 Component만이 아닌, 자손 Component에도 전달할 수 있다 위와 같이 Cascading Parameter는 ..

이번 포스트에서는 자식 Component와 부모 Component간에 로직을 구성하기 위한 3가지 방법인Parameter / Ref / EventCallback에 대해 알아보겠습니다.각각 다음과 같습니다.Parameter : 부모 Component에서 자식 Component로 멤버변수를 전달Ref : 부모 Component에서 자식 Component의 메서드를 호출EventCallback : 자식 Component에서 부모 Component의 메서드를 호출 1) 부모 Component -> 자식 Component1 - 1) Parameter1) User 이전의 User 컴포넌트를 위와 같이 수정하였습니다.현재 User 컴포넌트가 갖고 있던 users 변수를 자식 컴포넌트인 ShowUser의 User 변수..

이번 포스트에서는 Binding 개념에 대한 추가적인 부분을 알아보겠습니다.배워볼 부분은 다음과 같습니다.속성에 binding한 변수 적용하기조건부 속성(Conditional Attribute) 사용StateHasChanged 메서드를 통한 Razor Component 실시간 갱신 1) 속성에 Binding한 변수 적용 + 조건부 속성 사용 이전의 User 컴포넌트로 돌아가서 C# 스크립트 부분에 위와 같은 변화를 적용하였습니다.새로운 프로퍼티인 btnClass는 HTML 스크립트에서 사용할 속성을 의미합니다.그리고 메서드 RefreshButton은 해당 프로퍼티를 조건에 따라 변화시킵니다. RefreshButton 메서드를 OnInitialized / AddUser / RemoveUser 메서드에서도 ..