MudBlazor 가상화 처리

MudBlazor 가상화 처리 이전 시간에 MudBlazor 초기 설정하는 방법에 대해서 알아봤습니다.2025.01.10 - [코딩/Blazor] - MubBlazor 사용하기위 링크에도 있지만 가상화를 위해서는 반드시 HeadOutlet, Routes 는 InteractiveServer 로 설정해야합니다. MudDataGrid, MudTable 컨트롤을 사용해 virtualize 처리하는 방법입니다.@page "/weather"@attribute [StreamRendering]@using System.Collections.Generic가상화된 MudDataGrid x.Column1" /> x.Column2" /> x.Column3" /> ..

코딩/Blazor 2025. 1. 12. 00:05

MubBlazor 사용하기

MubBlazor 사용하기 MudBlazor 를 사용하기 위해 초기 셋팅하는 방법을 알아봅니다. 1. 'MudBlazor' Nuget 설치 2. Programs.cs 코드 추가builder.Services.AddMudServices(); 3. App.razor 에 css, js 추가css 추가 js 추가 전체 App.razor 코드 @* @rendermode="InteractiveServer" 로 설정 *@ @* 추가 *@ * HeadOutlet, Routes 는 가상화를 이용할 경우 InteractiveServer 로 설정해야합니다. 4. _Imports.razor 에 Global using 추가@using MudBlazor 5. Home.razor 코딩..

코딩/Blazor 2025. 1. 11. 00:12

Blazor .NET9 에서 CSP 설정

Blazor .NET9 에서 CSP 설정 .NET8 으로 개발한 사이트를 다른 사이트에서 iframe 내에서 사용하기 위해 CSP 설정을 하였는데.NET9 으로 버전을 올린 후 아래와 같은 에러가 발생되었습니다. Refused to frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors" 위 문제는 아래 링크를 보면 알 수 있듯이https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-9.0?view=aspnetcore-9.0 What's new in ASP.NET Core 9.0Learn about the ne..

코딩/Blazor 2025. 1. 4. 23:01

Blazor에서 MonacoEitor 사용하기

Blazor에서 MonacoEitor 사용하기 Blazor 에서 MonacoEditor 사용하는 방법입니다.Monaco Editor는 VS Code 의 모든 기능을 갖춘 코드 편집기입니다. https://github.com/Microsoft/monaco-editor GitHub - microsoft/monaco-editor: A browser based code editorA browser based code editor. Contribute to microsoft/monaco-editor development by creating an account on GitHub.github.com이를 기반으로 Blazor 에서 사용가능하도록 BlazorMonaco 패키지가 만들어졌습니다. https://githu..

코딩/Blazor 2024. 11. 16. 15:24

Blazor Serilog 에서 HTTP 로깅 제외하기

Blazor Serilog 에서 HTTP 로깅 제외하기 Serilog 를 이용해 Seq 서버에 로그를 남기고 있는데 UseSerilogRequestLogging설정을 해놓으니app.UseSerilogRequestLogging();HTTP GET / HTTP POST / blazor 관련 로그가 너무 많이 남고 있어 정작 봐야 할 로그가 보기가 힘들었습니다.[14:15:44 INF] Request starting HTTP/2 GET https://localhost:5001/ [14:15:44 INF] Executing endpoint '/Index'[14:15:45 INF] Route matched with {page = "/Index"}. Executing page /Index[14:15:45 INF]..

코딩/Blazor 2024. 10. 30. 22:32

쿠버네티스 환경의 Blazor 애플리케이션에서 Client 실제 IP 남기는 방법

쿠버네티스 환경의 Blazor 애플리케이션에서 Client 실제 IP 남기는 방법 쿠버네티스 환경에서 Client IP 를 확인해 보면 Pod 의 IP 가 남게됩니다.이는 로드 밸런서 뒤에서 Balzor 애플리케이션이 동작하고 있기때문입니다.이를 Client의 실제 IP 를 남겨 주기 위해서는 아래 코드를 추가해주면 됩니다.// 사용자 IP 처리ForwardedHeadersOptions forwardedOptions = new(){ ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto};forwardedOptions.KnownNetworks.Clear();forwardedOptions.KnownPro..

코딩/Blazor 2024. 10. 29. 17:52

Blazor reconnection 메세지 줄이는 방법

Blazor reconnection 메세지 줄이는 방법 App.razor 파일에 아래 내용을 추가합니다. (autostart="false" 로 반드시 설정해야 합니다.) @* autostart="false" 로 처리 *@ @* 스크립트 추가 *@ 위 설정 내용은 아래와 같은 의미를 가집니다.maxRetries: 100retryIntervalMilliseconds: 2000이는 클라이언트가 최대 100번까지, 각 시도 간에 2초 간격을 두고 재연결을 시도하게 합니다. 재연결 실패 메시지를 나타내기 전에 더 긴 시간 동안 재연결을 시도하도록 하는 합니다.serverTimeoutInMilliseconds: 30000keepAliveIntervalInMilliseconds: 10..

코딩/Blazor 2024. 10. 24. 23:41

Blazor iFrame 내에 포함될 수 있게 하기 - Content Security Policy (CSP)

Blazor iFrame 내에 포함될 수 있게 하기 - Content Security Policy (CSP) Blazor 로 만들어진 사이트를 다른 사이트에서 iFrame 안으로 보여줄 때 필요한 옵션입니다.아래와 같이 Program.cs 파일에 작성하면됩니다.app.Use(async (context, next) =>{ context.Response.Headers.Add("Content-Security-Policy", "frame-ancestors *"); await next();});frame-ancestors 지시문은 현재 페이지를 어떤 페이지가 프레임으로 포함할 수 있는지 제어합니다.주로 클릭재킹공격을 방지하는 사용되며 구 버전의 X-Frame-Options 헤더를 대체하며, 더 세밀한 ..

코딩/Blazor 2024. 10. 21. 18:01

Blazor App 을 GitHub Action 으로 CI/CD 하기

Blazor App 을 GitHub Action 으로 CI/CD 하기 Balzor App 을 Github 에서 Action 기능으로 CI,CD 하는 방법을 알아봅니다. 프로젝트 생성 및 GitHub 레파지토리 구성하기Balzor 프로젝트를 만들고 Girhub 에 올립니다. GitHub Action 으로 Build 하기Action 탭으로 들어가서 아래 항목을 찾아 Configure 를 클릭합니다. dotnet.yml 작성해야하는데 기본 빌드는 구성되므로 편집을 하지 않고 커밋합니다.위 yml 파일을 커밋을 하게되면 자동으로 빌드가 진행됩니다.빌드가 완료되었습니다.Build 를 클릭해 보면 과정이 표시됩니다.일부로 빌드 에러가 발생되도록 하고 커밋 푸쉬합니다.소스가 푸쉬되면 빌드작업이 시작됩니다.빌드시 에러..

코딩/Blazor 2024. 10. 16. 23:59

Blazor 에서 OllamaSharp 이용해 Ollama 모델로 채팅하기

Blazor 에서 OllamaSharp 이용해 Ollama 모델로 채팅하기 OllamaSharp 을 이용하면 ollama 에 있는 모델을 로드하여 질의할 수 있습니다.Ollama 설치는 아래 포스팅을 확인합니다.2024.06.15 - [코딩/Python_AI] - 로컬에서 Llama3-8B 모델 돌려보기 - Ollama아래 코드는 Blazor 에서 OllamaSharp 을 이용해 로컬에 설치된 모델 중 하나를 선택하여 질의할 수 있게 합니다.Markdig, Prism 을 이용해 MarkDown 처리를 하였습니다. 먼저 OllamaSharp, Markdig Nuget Package 설치합니다.index.html 에 아래와 같이 Prism 라이브러리를 사용할 수 있게 합니다. ..

코딩/Blazor 2024. 9. 30. 23:56

Blazor FluentUI Emoji 사용하기 - Microsoft.Fast.Components.FluentUI.Emojis

Blazor FluentUI Emoji 사용하기 - Microsoft.Fast.Components.FluentUI.Emojis Microsoft.Fast.Components.FluentUI.Emojis에서는 각종 이모지를 제공합니다.아래 사이트로 들어가면 제공되는 이모지들을 확인할 수 있습니다.https://iconduck.com/sets/microsoft-fluentui-emoji-set Microsoft Fluent UI Emoji Set – Emoji Set – IconduckMicrosoft Fluent UI Emoji Set is an Emoji Set of 7,505 emojis. It is exclusively made up of color emojis. Every single icon is..

코딩/Blazor 2024. 6. 10. 23:19

Blazor FluentUI Icon 사용하기 - Microsoft.Fast.Components.FluentUI.Icons

Blazor FluentUI Icon 사용하기 - Microsoft.Fast.Components.FluentUI.Icons Microsoft.Fast.Components.FluentUI.Icons 에서는 각종 기본 아이콘을 제공합니다.아래 사이트에 가면 제공하는 아이콘들을 확인할 수 있습니다.https://bennymeg.github.io/ngx-fluent-ui/ Fluent UI Icons Library - Free & Open Source Icons from MicrosoftMIT open source fluent SVG icons from Microsoft, over 3300 beautiful icons.bennymeg.github.io 사용하는 방법입니다.1. 'Microsoft.Fast.Com..

코딩/Blazor 2024. 6. 10. 23:17

Blazor FluentUI Templates 사용하기

Blazor FluentUI Templates 사용하기 FluentUI 에는 프로젝트 만들 때부터 사용할 수 있는 Template을 제공합니다.이를 사용하기 위해선 아래 사이트로 들어가 https://www.nuget.org/packages/Microsoft.Fast.Templates.FluentUI/ Microsoft.Fast.Templates.FluentUI 3.0.1Project templates for creating a Blazor Server or Blazor WebAssembly app that uses the Fluent UI Web Components for Blazor library. These templates can be used for web apps with rich dynami..

코딩/Blazor 2024. 6. 10. 23:14

Blazor FluentUI 사용하기 - Microsoft.Fast.Components.FluentUI

Blazor FluentUI 사용하기 - Microsoft.Fast.Components.FluentUI MS에서 만든 Blazor 용 UI Component입니다. https://github.com/microsoft/fluentui-blazor GitHub - microsoft/fluentui-blazor: Microsoft Fluent UI Blazor components library. For use with .NET 6.0 or higher Blazor applicMicrosoft Fluent UI Blazor components library. For use with .NET 6.0 or higher Blazor applications - GitHub - microsoft/fluentui-blaz..

코딩/Blazor 2024. 6. 10. 23:10

C# Blazor LiquidTechnologies ModalDialog 에서 Back Button 클릭 시 Popup 닫기

C# Blazor LiquidTechnologies ModalDialog 에서 Back Button 클릭 시 Popup 닫기 지난 포스팅에서 LiquidTechnologies.Blazor.ModalDialog 패키지를 이용해ModalDialog 처리하는 방법을 알아봤었습니다.2024.04.22 - [코딩/Blazor] - C# Blazor Dialog 처리하기 (LiquidTechnologies.Blazor.ModalDialog)그런데 브라우저의 Back Button 버튼 클릭시 띄워진 ModalDialog 창이 사라지지 않는 증상이 발생되었습니다.아래 그림을 보면 알수 있듯이 팝업이 띄워진 상태에서 뒤로가기 버튼을 클릭했을 때 팝업이 사라지지 않고계속 떠 있습니다.이를 처리하는 방법은 App.razor..

코딩/Blazor 2024. 5. 15. 22:33

C# Blazor 더블 클릭 방지하기

C# Blazor 더블 클릭 방지하기 Button 클릭시 로직을 처리하는 경우 버튼의 더블 클릭을 방지하기위해 로딩창을 띄웁니다. 하지만 사용자가 빠르게 Double Click 를 하는 경우 로딩창이 뜨기전에 이벤트가 발생하게되어 이벤트 로직이 두번 수행되는 경우가 있습니다. 이를 방지하는 방법을 알아봅니다. @page "/counter" Counter Counter Click IsBusy (@currentCount) @code { private bool isBusy = false; [Parameter] public int Increment { get; set; } = 1; private int currentCount = 0; public async Task IncrementCountIsBusy() { ..

코딩/Blazor 2024. 4. 23. 16:32

C# Blazor Session Storage 처리하기

C# Blazor Session Storage 처리하기 이전 시간에는 Local Storage 를 알아봤습니다. 2024.04.23 - [코딩/Blazor] - C# Blazor LocalStorage 사용하기 이번에는 웹페이지에 접속할때만 사용되는 Session 데이터를 처리하는 방법입니다. Session 데이터는 웹페이지를 벗어나면 데이터가 사라집니다. 1. Blazored.SessionStorage 패키지 설치 2. Program.cs 에 아래 코드 추가 using Blazored.SessionStorage; builder.Services.AddBlazoredSessionStorage(); 3. 화면에서 저장 @inject Blazored.SessionStorage.ISessionStorageSer..

코딩/Blazor 2024. 4. 23. 16:15

C# Blazor Local Storage 사용하기

C# Blazor Local Storage 사용하기 웹페이지 상에서 Local Storrage 를 사용하여 데이터를 저장하고 불러오는 방법을 알아봅니다. 1. Blazored.LocalStorage 패키지 설치 2. Program.cs 에 아래 코드 추가 using Blazored.LocalStorage; builder.Services.AddBlazoredLocalStorage(); 3. 화면에서 저장하기 @inject Blazored.LocalStorage.ILocalStorageService localStorage 주입된 내용을 가져와 아래 처럼 사용하여 저장을 처리합니다. await localStorage.SetItemAsync("key", localStorageKey); Index.razor @p..

코딩/Blazor 2024. 4. 23. 16:07

C# Blazor Toast Message 표시하기

Blazor Toast Message 표시하기 Blazored.Toast 패키지를 이용해 Toast Message 표시하는 방법입니다. 1. Blazored.Toast Nuget Package를 설치합니다. 2. Program.cs 에 코드 추가합니다. using Blazor.ToastTest; builder.Services.AddBlazoredToast(); using Blazor.ToastTest; using Blazored.Toast; using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; var builder = WebAssemblyHostBuilder.CreateDefa..

코딩/Blazor 2024. 4. 22. 10:12

C# Blazor LifeCycle 확인

Blazor LifeCycle 확인 Blazor 에서 제공되는 이벤트 함수들이 있는데 해당 이벤트들을 실제로 로그를 찍어본 결과 입니다. @page "/lifecycletest" LifeCycleTest ---------------------------------------------- LifeCycleTest Click me (@currentCount) @logMessage @code { [Parameter] public int Increment { get; set; } = 1; private int currentCount = 0; private string logMessage = string.Empty; private void IncrementCount() { currentCount += Increm..

코딩/Blazor 2024. 4. 22. 09:41

KeiStory