server/web server

[Web] Blazor에 자바스크립트(JS) 연동

웹 프로그래밍에서 많이 사용되는 자바스크립트를 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..

[Web] 다이얼로그박스 및 유효성 검사

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

[Web] 서비스 타입

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

[Web] Dependency Injection

의존성 및 문제점에 대해서 간단히 다루고 이를 해결하기 위한 '의존성 주입'에 대해 다룹니다. · 의존성? 의존성에 대해서는 많이 알려져있기때문에 간단하게 설명하면, '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()..

[Web] 템플릿 컴포넌트

모든 타입에 대해 재사용성을 높이고 편리하게 출력하기 위해 컴포넌트 자체를 템플릿으로 선언하여 사용할 수있습니다. 본 글에서는 데이터를 보여줄 테이블을 템플릿을 구현하였습니다. · 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..

[Web] Cascading 파라미터

스크립트에 포함된 변수를 다른 컴포넌트에서도 접근하도록 하기위해 바인딩을 사용하지만 컴포넌트 안에 또다른 컴포넌트가 포함될때 해당 컴포넌트에게까지 변수를 접근하도록 하기위해서 간편한 방법인 Cascading이 있습니다. 매우 간단한 내용입니다. · Cascading 상위 구성 요소에서 원하는 수의 하위 구성 요소로 데이터를 전달하는 편리한 방법을 제공합니다. ASP.NET Core Blazor 연계 값 및 매개 변수 상위 Razor 구성 요소에서 하위 구성 요소로 데이터를 전달하는 방법을 알아봅니다. learn.microsoft.com 더보기 @page "/user" @using BlazorApp.Data; Online Users Theme Color: @foreach(var option in _opti..

[Web] 컴포넌트 재사용

동일한 기능을 수행하는 컴포넌트를 다른 페이지에서 재사용하기위해 단순히 전체 스크립트를 복사-붙여넣기 하는 방식이 아닌 컴포넌트로 관리하여 다른 페이지에서 불러오면 되는 방식을 학습하였습니다. 파라미터, 레퍼런스, 콜백이벤트를 다룹니다. · ShowUser.razor @using BlazorApp.Data; 유저 수: @Users.Count() @foreach (UserData user in Users) { ❌ @user.Name } @code { // 파라미터를 명시하여 사용 [Parameter] public List Users { get; set; } // 자식 컴포넌트에서 부모의 컴포넌트 함수를 호출하기위한 액션함수 [Parameter] public EventCallback CallBackTest ..

[Web] 바인딩 변수 업데이트

바인딩 한 변수의 값을 변경하였는데도 화면에서는 바뀌지 않는 경우가 있습니다. 이런 상황에서 강제로 업데이트를 통해 현재의 변수값으로 보여주도록 하는 방법을 정리하였습니다. · 항상 동기화하지 않는다! 바인딩을 한 변수가 변경된다고해서 항상 화면에 업데이트 된 값으로 변경되는것은 아닙니다. @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..

[Web] 속성 바인딩

코드 영역의 변수나 리스트와 같은 자료구조뿐만 아니라 HTML에서 사용할 attrubute 또한 문자열 변수를 바인딩하여 속성 자체를 변경할 수 있습니다. · 속성 바인딩 더보기 @page "/user" @using BlazerApp.Data; Online Users 유저 수: @_users.Count() @foreach (UserData user in _users) { ❌ @user.Name } Add a User @code { List _users = new List(); string _inputName; string _btnClass = "btn btn-primary"; //버튼의 속성 //해당 페이지에 접속한경우, Unity의 Start와 비슷한 느낌 protected override void O..

[Web] List 바인딩

'바인딩'을 학습하고 나서 단순한 변수가 아닌 특정 요소를 여러개 담는 리스트를 사용하고 이를 바인딩하여 리스트내의 요소에 접근하고, 삽입 삭제 연산을 하는 웹을 구현하였습니다. @page "/user" @using BlazerApp.Data; Online Users 유저 수: @_users.Count() @foreach (UserData user in _users) { ❌ @user.Name } Add a User @code { List _users = new List(); string _inputName; //해당 페이지에 접속한경우, Unity의 Start와 비슷한 느낌 protected override void OnInitialized() { //더미 데이터 세개 추가 _users.Add(new ..

[Web] 바인딩

'데이터 바인딩'에 대해서 이해하고, 간단한 스크립트 예제를 정리하였습니다. · 데이터 바인딩? 데이터 바인딩은 앱 UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스입니다. 바인딩 설정이 올바르고 데이터가 적절한 알림을 제공하는 경우 데이터 값이 변경될 때 데이터에 바인딩된 요소에 변경 사항이 자동으로 반영됩니다. · 단방향 바인딩 @page "/binding" Binding @page "/binding" Binding

[Web] Blazor Server App 프로젝트 시작

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

[C#] LINQ(Language-Integrated Query) 2

더보기 using System.Security.Cryptography; namespace Study { class Program { public enum ClassType { Knight, Archer, Mage } public class Player { public ClassType ClassType; public int Level; public int Hp; public int Attack; public List Items = new List(); } static List _players = new List(); static void Main(string[] args) { Random rand = new Random(); for (int i = 0; i < 100; ++i) { Player playe..

[C#] LINQ(Language-Integrated Query) 1

💡 LINQ? C# 언어에 직접 쿼리 기능을 통합하는 방식을 기반으로 하는 기술 집합 이름입니다. 쿼리는 데이터 소스에서 데이터를 검색하는 식입니다. 쿼리는 일반적으로 특수화된 쿼리 언어로 표현됩니다. Language-Integrated Query (LINQ) (C#) Learn about Language-Integrated Queries (LINQs) and review an example of the complete query operation. learn.microsoft.com 📝 LINQ 사용 예제를 통해 LINQ를 어떤 상황에 사용하면 좋을지 비교하여 확인해보겠습니다. · 준비작업 아래의 스크립트를 이용하여 Player의 정보를 담는 리스트를 무작위로 생성합니다. namespace Study ..