'웹 프로그래밍/Blazor' 카테고리의 글 목록

웹 프로그래밍/Blazor (48)

[Blazor] Blazor MonacoEditor 사용방법

웹 프로그래밍/Blazor 범범조조 2023. 2. 6. 19:42

참고 https://github.com/serdarciplak/BlazorMonaco 개요 Blazor 에서 MonacoEditor 사용하는 방법에 대해서 정리 진행합니다. 개발환경 테스트 개발 환경은 다음과 같습니다. .NET 6 Visual Studio 2022 1. BlazorMonaco Nuget 설치 제일 먼저, Blaozr 프로젝트에 NuGet 패키지를 추가합니다. dotnet add package BlazorMonaco // or Install-Package BlazorMonaco 위 명령어를 통해서 다운로드 할 수도 있고, Visual Studio 에서 직접 NuGet 패키지 설치 진행해도 됩니다. 2. 스크립트 추가 저는 Blazor Server 프로젝트를 생성 후, 테스트 진행하였습니다..

[Blazor] Grafana DashBoard iframe URL http 로 가져오는 방법

웹 프로그래밍/Blazor 범범조조 2023. 1. 6. 19:12

Blazor Http로 실행 Blazor는 기본적으로 https, http 모두 실행되게 되어 있습니다. 아래는 LaunchSetting.json 입니다. { "profiles": { "GrafanaIframeTest": { "commandName": "Project", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" }, "dotnetRunMessages": true, "applicationUrl": "https://localhost:7051;http://localhost:5207" } } 위 JSON 파일에서 applicationUrl을 보면 https와 http가 있습니다. Blazor를 ..

[Blazor] iframe 태그 이용하여 grafana DashBaord HTTPS URL 불러오기

웹 프로그래밍/Blazor 범범조조 2023. 1. 6. 01:34

개요 Blazor 에서 iframe 태그를 이용하여 grafana DashBoard 를 불러올 수 있는지 PoC 진행하였습니다. grafana DashBoard URL이 HTTPS 인 경우, 불러오는 방법에 대해서 정리 진행하였습니다. URL이 HTTP 인 경우에 불러오는 방법은, 따로 정리하여 포스팅 진행할 예정입니다. 개발환경 개발 환경은 다음과 같습니다. Visual Studio 2022 .NET 6 Blazor Server Blazor 예제 코드 Blazor Server 로 프로젝트를 생성하게 되면, 기본으로 Counter.razor 페이지가 생성됩니다. 해당 페이지의 코드를 아래와 같이 추가하였습니다. @page "/counter" Counter Counter Current count: @cur..

[Blazor] ToDoList 만들기

웹 프로그래밍/Blazor 범범조조 2022. 12. 15. 19:55

개요 Blazor 학습 목적으로 컴포넌트 단위로 나눠서 ToDoList 만들기 진행하였습니다. 참고 저 같은 경우에는 ToDoList 를 어떻게 만들까 고민하다가, 지인을 통해 https://codesandbox.io/s/mashup-todolist-fwv17?fontsize=14 해당 사이트에서 보여주는 ToDoList 를 똑같이 만들어 보는게 좋다고 하여, Blazor 를 이용하여 최대한 동일하게 만들어 보려고 노력 하였습니다. Blazor 코드 저는 우선 개발을 컴포넌트 단위로 나눠서 개발 진행하였습니다. 하나의 페이지에, C# 코드를 한번에 넣을 수도 있지만 그렇게 되면 코드의 복잡성이 매우 올라가고, 가독성에도 좋지 않아서 최대한 Component 로 만들 수 있는 것들은 Component 로 ..

[Blazor] LocalStorage 사용법

웹 프로그래밍/Blazor 범범조조 2022. 12. 10. 07:02

참고 https://www.prowaretech.com/articles/current/blazor/wasm/localstorage-utility 개요 Blazor 에서 LocalStorage 사용하는 방법에 대해서 정리 진행합니다. 개발 환경 개발 환경은 다음과 같습니다. .NET 6 Visual Studio 2022 LocalStorage 란? 로컬 스토리지는 웹 스토리지 객체 중 하나입니다. 로컬 스토리지는 데이터를 브라우저에 반영구적으로 저장하며, 브라우저를 종료 후 재시작해도 데이터가 남아있습니다. 또한, 다른 창과 브라우저를 통해서도 접근이 가능합니다. Blazor 서버 프로젝트 생성 Blazor 서버 프로젝트를 생성합니다. ILocalStorage.cs 인터페이스 추가 ILocalStorage..

[Blazor] JWT 예제

웹 프로그래밍/Blazor 범범조조 2022. 12. 10. 02:01

참고 https://www.prowaretech.com/articles/current/blazor/wasm/jwt-authentication-simple#! 개요 Blazor WebAssembly 프로젝트를 생성 후, JWT 예제를 구현하는 방법에 대해서 정리 진행합니다. 개발 환경 개발 환경은 다음과 같습니다. .NET6 Visual Studio 2022 Blazor WebAssembly Blazor WebAssembly 프로젝트 생성 먼저 Blazor WebAssemby 프로젝트 생성을 합니다. Server Project 에 NuGet Package 추가 Service 프로젝트에 Microsoft.AspNetCore.Authentication.JwtBearer NuGet 패키지를 추가합니다. Clie..

[Blazor] JWT

웹 프로그래밍/Blazor 범범조조 2022. 12. 9. 22:57

참고 https://blog.miniorange.com/what-is-jwt-json-web-token-how-does-jwt-authentication-work/ https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-JWTjson-web-token-%EB%9E%80-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC JWT란 JWT(JSON Web Token)는 일반적으로 클라이언트(App FrontEnd) 와 서버 (App BackEnd) 간에 정보를 공유하는 데 사용되는 개방형 산업 표준입니다. JWT 는 Token 자체를 정보로 사용하는 Self-Contained 방식이며, 필요한 모든 정보를 Token에 저장하기 때문에 서버와의 커뮤니케이션에서 오버헤드를 최..

[Blazor] 모범사례 5 - CssBuilder 및 StyleBuilder를 사용하여 클래스 및 스타일 조작

웹 프로그래밍/Blazor 범범조조 2022. 11. 26. 18:39

Blazor 다섯 번째 모범사례는 CssBuilder 및 StyleBuilder를 사용하여 클래스 및 스타일 조작 사용방법 입니다. 보통 CSS 혹은 Style 을 사용하려면, CSS 파일 안에 Style 속성을 지정하여 태그나 속성 값을 매칭해 스타일을 적용하는 방식으로 사용합니다. 하지만, Blazor 에서는 CssBuilder, StyleBuilder 를 이용하여 스타일을 적용할 수 있습니다. 5.1 BlazorComponentUtilities NuGet 설치 CssBuilder, StyleBuilder 를 사용하기 위해서는 BlazorComponentUtilities NuGet Package 를 설치하면 됩니다. 때문에 BlazorComponentUtilities NuGet Package 를 설치..

[Blazor] 모범사례 4. 올바른 매개변수

웹 프로그래밍/Blazor 범범조조 2022. 11. 24. 03:02

Blazor 네 번째 모범사례는 올바른 매개변수 사용방법 입니다. Blaozr 를 개발을 진행하면 보통 컴포넌트 단위로 개발을 진행하고, 실제 부모가 되는 곳에 컴포넌트를 사용하여 부모 -> 자식 컴포넌트로 값들을 전달하는 형태로 개발합니다. 때문에, Blazor 에서는 위 구조를 지키기 위해 Parameter 속성을 이용하여 매개변수 값들을 전달할 수 있습니다. Blazor 에서 올바른 매개변수 사용하는 방법은 다음과 같습니다. 4.1 AKButton.razor 컴포넌트 생성 우선 AKButton.razor 컴포넌트를 생성 후, 다음 코드를 작성합니다. @namespace AKLab01.Blaozr.Components AKButton @Text 위 컴포넌트는 단순히 button 태그에 class 속성과..

[Blazor] input tag CircleCheckBox 만들기

웹 프로그래밍/Blazor 범범조조 2022. 11. 23. 23:00

개요 현재 Blazor 에서 TodoList 를 개발 하고 있습니다. 여기서 CheckBox 는 Input 태그를 이용하여 CheckBox Type 을 지정해 주었습니다. 기본 모습은 사각형 모양의 체크 박스입니다. HTML 에서 Input Tag 를 이용하여 CircleCheckBox 를 구현할 수 있습니다. 어떻게 구현하는지 예제 코드를 작성하여 보여드리도록 하겠습니다. HTML 코드 Input 태그를 이용하여 위와 같이 input 태그에서 type을 checkbox 로 지정해 주었습니다. 그리고 class 속성으로 rounded-checkbox 로 지정하였습니다. 이제 CSS 를 추가하여 CheckBox 를 원형으로 변경해 보도록 하겠습니다. .rounded-checkbox { width: 35px..

[Blazor] 모범사례 3- CSS를 사용한 구성 요소 파일 및 스타일 지정

웹 프로그래밍/Blazor 범범조조 2022. 11. 20. 21:24

Blazor 세 번째 모범사례는 CSS를 사용한 구성 요소 파일 및 스타일 지정 입니다. 쉽게 얘기하면, 컴포넌트, C# 코드, CSS 영역을 모두 분리하는 구조를 의미합니다. 다음과 같은 구조입니다. 위처럼 컴포넌트, C# 코드, CSS 영역 을 나눠서 개발을 진행하는 것이 좋습니다. 예제로 AKButton.razor, AKButton.razor.cs, AKBUtton.razor.css 프로젝트 파일에 다음 코드들을 추가하였습니다. 3.1 AKButton.razor @namespace AKLab01.Blaozr.Components AKButton Button Secondary Outline Primary 3.2 AKButton.razor.cs namespace AKLab01.Blaozr.Componen..

[Blazor] 모범사례 2 - 구성 요소에 대한 명확한 폴더 및 네임스페이스 구조

웹 프로그래밍/Blazor 범범조조 2022. 11. 20. 00:27

Blazor 두 번째 모범사례는 구성 요소에 대한 명확한 폴더 및 네임스페이스 구조를 갖는 것 입니다. 즉, 1번에서 생성한 Razor 클래스 라이브러리에 앞으로 추가된 Components 폴더를 만들고 하위 디렉터리로 Button, DataGrid 등등.. 명확하게 폴더를 나누고 네임스페이스를 지정해 주는 것입니다. 2.1 하위 Components 폴더 생성하기 1번에서 생성했던, Razor 클래스 라이브러리에 Components 라는 폴더를 생성합니다. 그리고 하위 폴더에는 Button, DataGrid 2개의 폴더를 생성합니다. 테스트를 진행하기 위해, Button 폴더에 AKButton.razor 컴포넌트를 생성합니다. 2.2 Components/Button/AKButton.razor 에 네임스페..

1
2
3
4

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바