반응형 프로그래밍/Blazor10 Blazor의 작은 아이콘 - 파비콘(Favicon) 변경하기 파비콘이란? 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지를 말한다. 즐겨찾기 아이콘(favorite icon)의 줄임말로 주로 웹 브라우저 상단에 있는 탭에 표시되는데 그 외에도 브라우저의 북마크바나 방문 기록, 검색 결과에서 페이지 url과 함께 표시되기도 한다. Blazor Server App의 파비콘을 변경해 보자! 우선 파비콘을 생성해 줄 꿀 같은 사이트로 접속해 보자 Favicon Generator for perfect icons on all browsers The ultimate favicon generator. Design your icons platform per platform and make them look great everywhe.. 2023. 5. 24. Blazor에서 OnInitialized() 함수가 두 번 호출되는 이유 문제 발견 OnInitialized() 함수에서 작성한 함수가 2번 연속으로 호출되는 이슈가 있어서 확인해 보니 실제로 2번 호출되는 게 맞았다. 구글링을 통해 Render-mode에 따라서 함수가 호출되는 횟수가 변경된다는걸 확인 Static : 일반 HTML파일처럼 정적 페이지를 로드하는 방식 Server : 실시간으로 변하는 Blazor를 그때그때 그리는 방식 (React 초기에 페이지 로딩이 느린 것과 동일한 방법으로 이해) ServerPrerendered : "Static"방식과 "Server"방식에 중간에 해당하는 방식, 초기 페이지 로딩속도를 빠르게 하기 위해서 정적 데이터로 정적 페이지를 로딩하고 그다음에 페이지의 변화가 있으면 SPA처럼 렌더링을 시키는 방식으로 작동한다. 그래서 OnIn.. 2023. 5. 18. Blazor에서 Timepicker UI 생성하기 날짜를 입력받는 Timepicker 생성하기 웹 페이지를 작성하다 보면 날짜를 입력받고 세팅해야 하는 상황이 생기기 마련입니다. 이때 Bootstrap에서 지원하는 datetime-local을 사용하면 간단하게 날짜를 입력받고 세팅하는 게 가능합니다. 예제 코드 @{ Show a Date and Time Control Birthday (date and time): Note: type="datetime-local" is not supported in Internet Explorer 11 or prior Safari 14.1. } @code // 초기화하지 않으면 UI에서 시간을 변경해도 정상적으로 작동하지 않는다. 꼭 초기화 해주자. private DateTime birthdaytime = DateTime.. 2023. 5. 18. Razor vs Blazor 둘은 어떻게 다른가? ASP.NET 환경에서 Razor와 Blazor Razor Razor는 HTML와 임베디드를 사용해서 웹 페이지를 동적으로 생성하는 걸 가능하게 하는 Server-side 마크업 언어(Markup Syntax)다. Razor는 Razor 페이지를 통해서 웹페이지를 생성한다. 웹 페이지 템플릿 파일은 C#과 VB으로 작성된다. VB코드로 작성된 razor 페이지의 확장자 .vbhtml C# 코드로 작성된 razor 페이지의 확장자 .cshtml Blazor Blazor는 .NET 프로그래밍 언어를 사용하여 클라이언트 사이드 반응형 애플리케이션을 빌드할 수 있도록 지원하는 웹 애플리케이션 프레임워크다. Blazor로 빌드된 single-page application(SPA)은 웹 브라우저 안에서 실행된다. .. 2023. 5. 17. Blazor 사용을 결정한 이유 Blazor란? 웹 브라우저에서 실행되는 .NET 웹 프레임워크이다. .NET에서 제공하는 것과 동일한 일관성, 안정성 및 생산성으로 풀스택 앱 개발을 번들로 제공한다. WebAssembly를 통해 구현되기 때문에 완전히 오픈소스로 제공된다. Blazor를 사용해서 풀스택 웹 앱을 만들 때의 장점 Blazor는 Vue나 React와 같이 Single-Page-Application(SPA)의 이점을 동일하게 가지고 있다. 게다가 클라사이드와 서버사이드의 코딩을 동일하게 .NET 기술을 통해서 구현이 가능하다. 즉 동일한 클래스들을 양쪽에서 재사용이 가능하다. 브라우저에서 .NET 코드를 실행할 수 있다. JavaScript보다 빠르다. 클라이언트와 서버의 코드 공유가 가능하다. 오프라인에서 실행이 가능하다.. 2023. 5. 16. Blazor에서 @code{}와 @{}에 대해서 @code{...} Razor 구성요소에서만 유효합니다.(.razor 파일) 이 블록을 사용하면 Razor 구성요소에 C# 멤버(필드, 속성 및 메서드)를 추가할 수 있습니다. //razor @code { // C# members (fields, properties, and methods) } @{...} (Razor code blocks) Razor 코드 블록은 @로 시작하고 {}으로 감싸집니다. 표현식과 다르게 코드 블럭 안에 있는 C# 코드는 렌더링 되지 않습니다. 뷰 안에 코드 블록과 표현식은 동일한 스코프를 공유하며 순서대로 정의됩니다. @{ var quote = "The future depends on what you do today. - Mahatma Gandhi"; } @quote @{ q.. 2023. 5. 15. 이전 1 2 다음
