웹 프로그래밍에서 많이 사용되는 자바스크립트를 Blazor에 연동하여 동작할 수 있도록 구현하는 방법을 다룹니다. Blazor C#으로는 구현이 어려운 기능을 자바스크립트로 구현하여 사용할 수 있기에 중요합니다. · JS파일 생성 및 등록 자바스크립트 파일을 생성합니다. wwwroot폴더 하위에 생성합니다. test.js라는 이름으로 생성하였습니다. Pages/_Host.cshtml에서 라고 설정하여 test.js 파일을 등록합니다. · JS 작성 var func = (function () { window.testFunction = { helloWorld: function () { return alert("Hello World"); }, inputName: function (text) { return p..

Blazor Web에서 기본적으로 지원하는 Form과 Form에 대한 유효한 값을 확인하는 Validation을 학습하고 정리하였습니다. · Validation? 입력필드에 대해서 유효성을 검사합니다. 예를 들어 사용자가 회원가입을 할 때 비밀번호를 입력하지 않을 때 경고문을 띄워주고, 이메일 형식을 사용하는 페이지에서 이메일형태가 아닌 아이디만 입력했을 때 알려주는 등의 기능들을 말합니다. · 구현 Blazor Server App의 기본 예제를 활용하여 구현합니다 · WeatherForecast.cs using System.ComponentModel.DataAnnotations; namespace Blazor_From_Validation.Data { public class WeatherForecast ..

Blazor Web에는 세가지의 서비스가 있습니다. 서비스 세개인 'Singleton, Transient, Scoped'의 차이점을 살펴보겠습니다. · Singleton 많이 알려진 싱글톤 타입과 동일하게 프로그램 내에 단 한개의 싱글 인스턴스만 존재하여 갱신되지 않습니다. · Transient '일시적인' 이라는 뜻으로 스크립트 또는 요청마다 갱신되어 새로운 인스턴스를 가지게 됩니다. · Scoped Singleton과 Transient의 중간 형태로 사용자가 웹에 접속한 시점에 갱신이 됩니다. Singleton과 다르게 전역으로 모두에게 동일한 인스턴스가 아닌 개개인마다 각각의 인스턴스를 가지도록 합니다. · 예시 세개의 서비스를 생성하고 GUID를 가지고 있도록하고 이것이 어떻게 바뀌는지 보도록 하..

의존성 및 문제점에 대해서 간단히 다루고 이를 해결하기 위한 '의존성 주입'에 대해 다룹니다. · 의존성? 의존성에 대해서는 많이 알려져있기때문에 간단하게 설명하면, 'A'가 변경될경우 'A'와 관련된 다른것들이 바뀌어야 한다는 것을 의미합니다. · 예시 요구사항은 다음과 같습니다. "식품 서비스 FoodService를 FastFoodService로 바꿔서 서비스해주세요." FoodService는 한식을 다루고, FastFoodService는 패스트푸드를 다룹니다. public class Food { public string Name { get; set; } public int Price { get; set; } } public class FoodService { public List GetFoods()..

모든 타입에 대해 재사용성을 높이고 편리하게 출력하기 위해 컴포넌트 자체를 템플릿으로 선언하여 사용할 수있습니다. 본 글에서는 데이터를 보여줄 테이블을 템플릿을 구현하였습니다. · TableTemplate @using BlazorApp.Data; @typeparam TItem TableTemplate @Header @foreach (var item in Items) { @Row(item) } @code { [Parameter] public RenderFragment Header { get; set; } [Parameter] public RenderFragment Row { get; set; } [Parameter] public IReadOnlyList Items { get; set; } } [Parame..

바인딩 한 변수의 값을 변경하였는데도 화면에서는 바뀌지 않는 경우가 있습니다. 이런 상황에서 강제로 업데이트를 통해 현재의 변수값으로 보여주도록 하는 방법을 정리하였습니다. · 항상 동기화하지 않는다! 바인딩을 한 변수가 변경된다고해서 항상 화면에 업데이트 된 값으로 변경되는것은 아닙니다. @page "/counter" @using System.Threading; Counter Counter Current count: @currentCount Click me Auto Increment @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } private void AutoIncrement() { var t..

웹서버를 간단하게 구축하기위해 Blazor을 학습하고 이를 정리합니다. 실습 환경은 VS2022 .NET7.0에서 진행하였습니다. ✅ 실습 준비 1. VS Installer에서 'ASP.NET 및 웹 개발'을 설치합니다. 2. VS2022에서 새 프로젝트를 만듭니다. 블레이저 서버 앱으로 생성합니다. 3. 생성된 프로젝트를 컴파일하여 데모 웹페이지가 잘 나오는지 확인합니다.