728x90 반응형 Blazor11 Blazor Sever VS Blazor WebAssembly 장단점 출처: https://code-maze.com/blazor-webassembly-introduction/#difference 우리는 웹 어플리케이션을 개발할 때, 보통 java, .NET, Node.js 등의 framework 또는 language를 사용하여 server-side project를 만든다. 그리고 Angular, React, Vue.js와 같은 javascript framework를 사용하여 브라우저에 데이터를 보여준다. 하지만, 우리는 server-side application에서 사용한 언어를 client-side에는 사용할 수가 없다. server-side와 client-side는 기본적으로 단절되어있다. 우리가 만약, server language를 client에도 재사용한다면 좋지 .. 2021. 10. 2. Blazor WASM] Google Chart 그리기 소스링크 : https://github.com/BigExecution/BlazorWASM.git Blazor WebAssembly 앱 생성 시, 자동으로 세팅되는 Weather forecast 페이지 하단에 날짜별 온도를 나타내는 구글차트를 추가해보자. 1. index.html 파일에 google chart 스크립트 태그 추가 2. graph.js 파일 추가 function setGrowthGraph(data) { var dt = new google.visualization.DataTable(); dt.addColumn('string', 'Date'); dt.addColumn('number', 'Temp. (C)'); dt.addColumn('number', 'Temp. (F)'); dt.addRows(.. 2021. 9. 30. Blazor WASM] LayerAlertComponent, LayerConfirmComponent 소스링크 : https://github.com/BigExecution/BlazorWASM.git 버튼을 클릭하고, LayerAlert를 띄우는 Component를 만들어보자. Blazor WebAssembly 프로젝스 생성 시, 기본으로 추가되는 Counter의 Click me 버튼을 클릭했을때, 숫자 1 증가하였습니다. Alert을 띄워주도록 하자. 우선 LayerAlertComponent.razor를 추가한다. Components 폴더를 생성하고 하위에 공통으로 사용할 Component razor를 추가한다. LayerAlertComponent.razor를 추가한 뒤 소스는 아래와 같이 한다. @((MarkupString)Value) 확인 @code { [Parameter] public string .. 2021. 9. 28. Blazor WASM] REST API, DropDownList onchange 데이터 연동 소스링크 : https://github.com/BigExecution/BlazorWASM.git Blazor WASM] REST API, API로 리스트 가져와서 뿌려주기 소스링크 : https://github.com/BigExecution/BlazorWASM.git open api를 호출해서 대학정보를 가져와 리스트로 뿌려주자 1. 우선 Model을 만들자. Models 폴더를 추가 -> University class를 추가한다. 2. 그.. bigexecution.tistory.com 에 이어서 상단에 DropDownList를 추가해서 onchange시 데이터를 다시 가져와서 뿌려주자. 1. UniversityData.razor 페이지 상단에 DropDownList를 추가하고, onchange 이벤트.. 2021. 9. 16. Blazor WASM] REST API, API로 리스트 가져와서 뿌려주기 소스링크 : https://github.com/BigExecution/BlazorWASM.git open api를 호출해서 대학정보를 가져와 리스트로 뿌려주자 1. 우선 Model을 만들자. Models 폴더를 추가 -> University class를 추가한다. 2. 그 다음, REST API 호출 함수를 관리할 Service를 만들자. Services 폴더 추가 BaseService 클래스(BaseService.cs) 추가 UniversityService클래스(GitService.cs) 추가 IUniversityService인터페이스(IUniversityService.cs) 추가 BaseService 클래스에는 Get, Post 호출시 사용할 Generic을 활용한 공통함수가 들어있다. using S.. 2021. 9. 16. Blazor WASM] ILogger, 로깅 사용하기 Blazor WASM은 C# 코드 디버깅이 불편하기 때문에, 주로 Logging을 해서 데이터를 확인한다. 1. Microsoft.Extensions.Logging 네임스페이스를 추가한다. 2. ILogger를 주입한다. 3. LogInformation, LogWarning 함수를 이용해서 로깅처리를 한다. @page "/" @using Microsoft.Extensions.Logging; @inject ILogger _logger; Hello, world! Welcome to your new app. @code { protected override async Task OnInitializedAsync() { _logger.LogInformation("OnInitializedAsync - start");.. 2021. 9. 9. 이전 1 2 다음 728x90 반응형
