알쓸다잡 (알아두면 쓸데 있는 다양한 잡식)

2023년 11월 10일 금요일

Blazor with Angular, React, and Vue

Blazor vs Angular vs React vs Vue

In the fast-paced web development realm, selecting a framework or library can be key to creating high-quality applications. Angular, React, and Vue have long been the preferred choices for developers. However, a newcomer has recently arrived on the scene: Blazor. Developed by Microsoft, Blazor is a web framework that permits developers to construct dynamic web applications with C# instead of JavaScript. Unlike its competitors, Blazor runs .NET in the browser using Web Assembly, a low-level assembly-like language that can be run natively in modern browsers. With the ability to facilitate high-performance applications on web pages, Blazor is quickly gaining popularity among developers looking for a fresh approach to web development.

This article will explore web development and technology by looking closely at four popular frameworks — Blazor, Angular, React, and Vue. These frameworks provide a core structure that enables developers to create high-quality front-end web applications. Through this deep dive comparison, we’ll examine each framework separately to understand its strengths and weaknesses. So, whether you’re a well-rounded developer or just starting out, this article will help you gain a better understanding of these frameworks and will assist in making an informed decision on which one to choose for your next project.

What is Blazor?

Blazor is a cutting-edge web framework that enhances pre-existing web technologies like HTML and CSS. However, it offers a unique advantage in allowing developers to use C# and Razor syntax instead of the more traditional JavaScript. Blazor gets its name from a fusion of “Browser” and “Razor.” This emphasizes its capability to produce reusable and interactive web UI for client-side applications developed in .NET and executed using WebAssembly. By allowing both client and server code to be written in C#, developers can easily share code and libraries, making it possible to develop vibrant and modern single-page application (SPA) platforms using .NET from end to end.

What makes Blazor particularly remarkable is that it leverages the latest web standards and doesn’t require additional plugins or add-ons to run. This is thanks to the power of WebAssembly, which allows Blazor to run natively in modern web browsers. With this technology, developers can create high-performance web apps that are not only easy to maintain but also adhere to modern web development standards.

Now that we have mentioned WebAssembly a couple of times. Let’s understand it.

Understanding WebAssembly —

WebAssembly, or short-form WASM, is a new web standard that expands language diversity on the web platform. It joins the ranks of CSS, HTML, and JavaScript as the fourth language that can be run natively in modern web browsers. WASM is a low-level assembly-like language that uses a compact binary format, allowing developers to run code written in multiple languages, including Java, C/C++, Rust, and Java, on the web with near-native performance.

The main objective of WebAssembly is to enable high-performance applications on web pages. However, the language format is also designed for execution and integration in other environments, and it can even run alongside JavaScript. This flexibility makes it an incredibly powerful tool for developers who can leverage the strengths of multiple languages to create highly performant and scalable web applications.

Blazor Features —

Blazor has various benefits that make it an excellent choice for coding modern web applications.

Composable UI: Blazor provides a flexible model for building composable UI components, allowing developers to easily create complex interfaces.
Utilizes Latest Web Features: Blazor leverages the latest web features to deliver fast and efficient build times and an improved user experience.
Dependency Injection: Blazor provides built-in support for dependency injection, making it easier to manage and maintain code dependencies.
Open Web Platform: As part of the open web platform, Blazor integrates seamlessly with existing web technologies, such as HTML and CSS.
Cross-Browser Compatibility: Blazor has the ability to run on older browsers, making it accessible to a wider audience.
Rich IntelliSense and Tooling: Blazor comes with rich IntelliSense and tooling support, enabling developers to write code with ease and efficiency.
Full .NET Debugging: Blazor provides full .NET debugging and allows developers to quickly identify and fix issues.
Server-Side Rendering: With server-side rendering, Blazor delivers improved performance and faster load times.
No Plugins Required: Blazor runs natively in the browser, eliminating the need for plugins or add-ons.
Live Reloading: Blazor features live reloading in the browser during app development, providing a smoother development experience.

Comparing Blazor vs [Angular, React, and Vue]: Which one to use in 2023?

Blazor vs (Angular vs React vs Vue)

Finally, in this article, we will dive into the exciting topic of how Blazor, the latest addition to the world of web frameworks, compares and contrasts with other established players such as Angular, React, Vue, and even popular stacks like MEAN and MERN. Before delving into the differences between these platforms, it’s crucial to provide some background information on each of them.

Comparison: Blazor vs Angular

What is Angular in the context of the Blazor vs Angular comparison?

Angularis a well-known JavaScript-based framework developed by Google and released in 2016. The Blazor platform is engineered to streamline both single-page application (SPAs) development and testing by offering a framework for client-side Model-View-Controller (MVC) and Model-View-View Model (MVVM) architectures. It also includes robust features for internet applications, allowing developers to build attractive SPAs quickly.

When comparing Blazor vs Angular, it’s important to note that Angular introduced data binding, which allows automatic updates of the view whenever model data is changed and vice versa. This feature eliminates the need for developers to worry about DOM manipulation. Angular also brought the concept of directives, which enables developers to create their own HTML tags, among other capabilities.

Angular is a powerful and modern framework with a friendly ecosystem that supports web, mobile, and native desktop applications. The platform has a vast number of third-party tools and libraries that make development much more efficient. It’s no wonder that Angular garnered 57% of the most loved web framework votes in the 2019 Developer Survey Results.

Angular is widely used by many prominent companies and applications, including Google, Microsoft, IBM, and PayPal. Some of the popular applications running on Angular include Microsoft Office 365, Forbes, and NBA.com.

Blazor vs Angular: Key Differences and Similarities

Blazor and Angular are two popular open-source web frameworks. While Angular is based on JavaScript, Blazor allows for web development using C#. Now, let’s examine some of the significant distinctions between Blazor and Angular.

Framework

Angular is a JavaScript-based framework developed by Google in 2016. It simplifies the development of single-page applications (SPAs) and provides a framework for client-side MVC and MVVM.
Blazor is an emerging web framework that authorizes developers to create reusable and interactive web UI for client-side applications that are coded in .NET and executed on WebAssembly.

Tooling

Angular is ahead in terms of tooling, with support for VS Code for development. Blazor has recently implemented support for VS Code.

Libraries

Angular Material library is the most popular one, based on Google’s Material Design. Blazor is developing its own Material Design library, which requires significant effort to achieve the same development levels.

Ease of use

Angular supports PWAs (Progressive Web Applications), while Blazor server-side can’t be used as a PWA.
Blazor doesn’t have readymade styles for components like Angular.
Blazor provides a straightforward coding experience because it allows the creation of service methods through an API structure calling, which can be directly written from the topmost layers.

GitHub stars and forks

As of May 2023, Angular’s GitHub repository has around 70.4k stars and 19.8k forks, while Blazor’s repository has around 15.9k stars and 950 forks.

Build and debugging

Blazor is faster in terms of build and debugging, thanks to the Visual Studio and live reloading feature during development.

Stack Overflow inquiries

As of May 2023, Angular has accumulated a total of 226.5k inquiries on Stack Overflow, while Blazor has around 3k inquiries.

Performance:

Blazor is promising but is still being evolved constantly and has not yet accomplished enough development to compete with Angular.
Angular was initially created to bridge the gap between front-end and back-end development, as the two were often done by separate developers. As SPA became more popular, new frameworks like Blazor emerged to compete with Angular. Blazor allows developers to use C# alongside HTML and CSS to create SPAs under the .NET platform.

Comparison: Blazor vs React

What is React in the context of the Blazor vs React comparison?

React is a front-end JavaScript-based library that was introduced in 2013 by Facebook, and it is widely used to create interactive user interfaces. It is considered one of the top web frameworks, which is reflected in its usage for several Facebook applications, such as WhatsApp and Instagram. React is maintained by Facebook, as well as a large community of individual developers and companies. Some major companies that use React include Uber, Dropbox, Twitter, PayPal, Netflix, and Walmart, among others.

In terms of Blazor vs React, while React is primarily used as the view in an MVC architecture, it stands out by introducing component-based architecture. This approach is more manageable and easier to handle in web development. Moreover, React has gained popularity for speeding up the development process by enabling the creation of reusable components, allowing developers to focus on every detail on the page. Now, let’s examine some of the significant distinctions between Blazor and React.

Blazor vs React: Key Differences and Similarities

React and Blazor are both categorized as “Web App Builders” and are utilized for constructing user interfaces. React has been the most prevalent web framework, receiving over 74% of the votes in the Stack Overflow Developer Survey. In the context of comparing Blazor to React, it’s essential to recognize that unlike React, which is a comprehensive JavaScript library designed for constructing UI, Blazor is an experimental web UI framework that uses C#/Razor and HTML and executes in the browser via WebAssembly.

OPEN-SOURCE Tools

As of May 2023, React’s GitHub repository has around 173K stars and 34.4K forks, while Blazor’s repository has around 15.9k stars and 950 forks. While React continues to be one of the most popular front-end frameworks, Blazor has been gaining popularity among .NET developers as an alternative to JavaScript-based front-end frameworks. The Blazor team is actively working on improving the framework, and its community is growing rapidly.

Debugging and Production-Ready SPA

Blazor is a superior alternative if your team consists of C# developers and if you need the SPA to progress. However, client-side debugging is a critical element that Blazor currently lacks, but it may be added in the future. If your company requires a production-ready SPA, React is a better option than Blazor.

Statically Typed Languages

Blazor and React are both statically typed languages that are well-suited for large projects. Moreover, developers tend to favor Blazor over React.

Performance

Blazor performs better than React in terms of load time, as it doesn’t require a separate JavaScript file. However, React’s virtual DOM allows for faster updates and rendering, making it more efficient for larger and more complex applications. Ultimately, the choice between the two frameworks widely depends on the particular requirements of the project at hand.

Comparison: Blazor vs vue

What is Vue in the context of the Blazor vs vue comparison?

Evan You, who used to work for Google, created Vue in 2014 after working on several projects that used Angular. This is why Vue shares some similarities with Angular in certain aspects.

Vue is an open-source framework for creating user interfaces and single-page applications, like Angular and React. However, Evan specifically designed Vue to avoid most of the difficulties that Angular presents. Popular websites such as 9gag, Alibaba, and Adobe use Vue, and it is currently the second most popular framework after React. In the context of Blazor vs Vue, Blazor is a relatively new framework that uses C# instead of JavaScript. In contrast, Vue has a larger community and is more established in the web development space. Now, let’s examine some of the significant distinctions between Blazor and Vue.

Comparing Blazor vs Vue: Key Differences and Similarities

Blazor and Vue.js have some similarities with other web frameworks like React and Angular. Below are some key similarities and differences between Blazor and Vue:

Building a New App

Creating a new Vue app is simple, as you only need to reference the scripts via a CDN. However, Blazor requires Visual Studio or creating a new project to start a new app.

UI Building

Vue.js uses templates for building UI, while Blazor uses Razor and C# to write components.

Handling Forms

Vue.js employs a v-model directive to handle forms, while Blazor has built-in functionality for handling forms.

Routing

Blazor has a @page directive for routing, while Vue.js offers a separate routing.

Language Dependence

The primary contrast between Vue.js and Blazor is that Vue.js relies on JavaScript, while Blazor does not.

Popularity

As of May 2023, Vue is the more popular framework on GitHub, with over 183K stars and 30.7K forks, while Blazor has about 14.8K stars and 1.5K forks. It’s worth noting that GitHub stars and forks are not the only indicators of popularity, but they can provide some insights into community engagement with the frameworks.

Age

Vue has been in the market for a longer time than Blazor, which is a newer framework.

Famous sites

Vue.js powers famous sites like 9gag, Alibaba, and Adobe and is the second most loved framework after React.

Framework Type

Vue.js is an open-source MVVM structure for building UIs and SPAs, while Blazor may yield better outcomes for teams with a C# foundation.

Performance

Blazor’s server-side architecture allows for fast initial load times and efficient server-client communication. On the other hand, Vue’s client-side rendering can provide snappy user interactions and fast navigation between pages. The choice between the two frameworks may depend on the particular requirements of the project and the priorities of the development team.

Comparison Table for Blazor vs React vs Angular vs Vue


Feature	React	Angular	Vue	Blazor
Type	Front-end Library	Framework	Library	Framework
Release Date	2013	2010	2014	2015
Developer	Facebook	Google	Evan You	Microsoft
License	MIT	MIT	MIT	Apache
Language	JavaScript	TypeScript	JavaScript	WebAssembly C#
DOM	Virtual DOM	Regular DOM	Virtual DOM	Incremental DOM
Test and Debugging	Uses Jest	Uses Jasmine	Vue DevTools	Blazor Testing Placeholder
Learning Curve	Easy to learn	Steep	Easy to learn	Smooth & Easy
Popularity, Growth & Community Support	The developer communities of Facebook and Uber have provided their support.	Supported by numerous developers, including those from Google and Wix.	Supported by Open-source project sponsored through crowd-sourcing	In addition to a strong and growing community of contributors, Microsoft has also provided its support.
Data Binding	One-way (Uni-directional)	Two-way (Bi-directional)	Two-way (Bi-directional)	One-way (Uni-directional)

What is the best framework to choose among Blazor vs Angular vs React vs Vue?

Blazor vs Angular vs React vs Vue

The world of web development offers a vast array of possibilities when it comes to frameworks and libraries, each with its own strengths and weaknesses. Deciding which one is the best for a specific use case can be overwhelming. When selecting a web development framework, various considerations must be taken into account, including its maturity level, features, architecture, and the paradigms and patterns it employs.

A skilled developer should strike a balance between proven approaches and new, cutting-edge technology while also considering other crucial factors before adopting tools that are still maturing. Risks associated with tools that lack considerable community support include instability and the likelihood of the tool being abandoned in the future.

Blazor is a new platform that offers tight integration with .NET and a chance to achieve what the three popular JavaScript frameworks (React, Angular, and Vue) provide in C#. However, it lacks all the features that the JavaScript libraries have, and it is not yet fully supported. Those with a background in JavaScript, developing web applications with frameworks such as React, Angular, and Vue is the preferred approach, as they enable web app development using JavaScript.

It’s important to keep in mind that JavaScript frameworks have evolved significantly over the years, while Blazor is still relatively new and lacks some of the features that JavaScript libraries offer. Nevertheless, React remains the most loved framework, while Angular and Vue continue to rank high in popularity. It’s worth considering the reasons why these frameworks are so popular when making a decision.

Blazor vs (Angular vs React vs Vue)

Contact us or book a free consultation with AnAr Experts to bring your app vision to life with beautiful designs, quality, and continuous testing.

출처 : https://anarsolutions.com/blazor-vs-angular-react-and-vue

2023년 9월 25일 월요일

C# - HtmlTemplate

[HtmlTemplate 예문]

using System;
using System.IO;
public class HtmlTemplate
{
private string _html;
public HtmlTemplate(string templatePath)
{
using (var reader = new StreamReader(templatePath))
_html = reader.ReadToEnd();
}
public string Render(object values)
{
string output = _html;
foreach (var p in values.GetType().GetProperties())
output = output.Replace("[" + p.Name + "]", (p.GetValue(values, null) as string) ?? string.Empty);
return output;
}
}
public class Program
{
void Main()
{
var template = new HtmlTemplate(@"C:\MyTemplate.txt");
var output = template.Render(new {
TITLE = "My Web Page",
METAKEYWORDS = "Keyword1, Keyword2, Keyword3",
BODY = "Body content goes here",
ETC = "etc"
});
Console.WriteLine(output);
}
}

Using this, all you have to do is create some HTML templates and fill them with replaceable tokens such as [TITLE], [METAKEYWORDS], etc. Then pass in anonymous objects that contain the values to replace the tokens with. You could also replace the value object with a dictionary or something similar.

출처 : https://stackoverflow.com/questions/897226/generating-html-using-a-template-from-a-net-application

dotliquid: .NET port of the liquid templating engine
Fluid .NET liquid templating engine
Nustache: Logic-less templates for .NET
Handlebars.Net: .NET port of handlebars.js
Textrude: UI and CLI tools to turn CSV/JSON/YAML models into code using Scriban templates
NTypewriter: VS extension to turn C# code into documentation/TypeScript/anything using Scriban templates

예문 : https://scribanonline.azurewebsites.net

출처 : https://github.com/scriban/scriban

2023년 9월 19일 화요일

javascript - UI 라이브러리 (w2ui)

[w2ui]

https://w2ui.com/web/home

[한국 달력에 맞게 수정]

[출처] https://wickedmagic.tistory.com/507

var w2utils = (function () {
    var tmp = {}; // for some temp variables
    var obj = {
        version : "1.4.3",
        settings : {
            "locale" : "ko-kr",
            "date_format" : "yyyy-mm-dd",
            "date_display" : "yyyy, Mon d",
            "time_format" : "hh:mi pm",
            "currencyPrefix" : "$",
            "currencySuffix" : "",
            "currencyPrecision" : 2,
            "groupSymbol" : ",",
            "decimalSymbol" : ".",
            "shortmonths" : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            "fullmonths" : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
            "shortdays" : ["월", "화", "수", "목", "금", "토", "일"],
            "fulldays" : ["월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"],
            "dataType" : 'HTTP',
            "phrases" : {}
        },

---- 이하 생략 ----

getMonthHTML: function (month, year) {

// 캘린더의 타이틀 부분을 변경한다.

                        // months[month - 1] +', '+ year +
                        year + '년, ' + months[month - 1] +
                '</div>'+
                '<table class="w2ui-calendar-days" cellspacing="0">'+
                '    <tr class="w2ui-day-title">' + dayTitle + '</tr>'+
                '    <tr>';

            var day = 1;
            for (var ci=1; ci<43; ci++) {
                if (weekDay === 0 && ci == 1) {
                    for (var ti=0; ti<6; ti++) html += '<td class="w2ui-day-empty"> 5</td>';
                    ci += 6;
                } else {
                    if (ci < weekDay || day > daysCount[month-1]) {
                        html += '<td class="w2ui-day-empty"> </td>';
                        if ((ci) % 7 === 0) html += '</tr><tr>';
                        continue;
                    }
                }
                var dt = year + '/' + month + '/' + day;

                var className = '';

                if (ci % 7 == 0) className = ' w2ui-saturday';       // 토요일 날짜를 맨 뒤로 이동한다.
                if (ci % 7 === 1) className = ' w2ui-sunday';        // 일요일 날짜를 맨 앞으로 이동한다.
                if (dt == today) className += ' w2ui-today';

                var dspDay = day;
                var col     = '';
                var bgcol   = '';
                var tmp_dt = w2utils.formatDate(dt, this.options.format);
                if (this.options.colored && this.options.colored[tmp_dt] !== undefined) { // if there is predefined colors for dates
                    tmp   = this.options.colored[tmp_dt].split(':');
                    bgcol = 'background-color: ' + tmp[0] + ';';
                    col   = 'color: ' + tmp[1] + ';';
                }
                html += '<td class="'+ (this.inRange(tmp_dt) ? 'w2ui-date ' : 'w2ui-blocked') + className + '" style="'+ col + bgcol + '" date="'+ tmp_dt +'">'+
                            dspDay +
                        '</td>';
                if (ci % 7 === 0 || (weekDay === 0 && ci == 1)) html += '</tr><tr>';
                day++;
            }
            html += '</tr></table>';
            return html;
        },

[텍스트 필드 시간]

[출처] https://wickedmagic.tistory.com/508

[텍스트 박스 리스트]

[출처] https://wickedmagic.tistory.com/509

[팝업창 띄우기]

[출처] https://wickedmagic.tistory.com/510

[다른 페이지 URL로 팝업창 불러오기]

<body>
<div id="popup" style="display:none;width:600px;height:400px;overflow:hidden">
   <div rel="title">
       CHEER UP
   </div>
   <div rel="body" style="padding:10px;line-height:150%">
       <font color="#FF99FF">
           <b>[나연] 매일 울리는 벨벨벨 이젠 나를 배려 해줘 배터리 낭비하긴 싫어</b><br/>
       </font>
       [미나] 자꾸만 봐 자꾸 자꾸만 와 전화가 펑 터질 것만 같아<br/>
       [사나] 몰라 몰라 숨도 못 쉰대 나 때문에 힘들어 쿵 심장이 떨어진대 왜<br/>
       [미나] 걔 말은 나, 너무 예쁘대 자랑 하는건 아니구<br/>
       [쯔위] 아까는 못 받아서 미안해<br/>
       [사나] 친구를 만나느라 shy shy shy<br/>
       [쯔위] 만나긴 좀 그렇구 미안해<br/>
       [미나] 좀 있다 연락할게 later<br/>
       [모모] 조르지마 얼마 가지 않아 부르게 해줄게 Baby<br/>
       [정연] 아직은 좀 일러 내 맘 같긴 일러 하지만 더 보여줄래<br/>
       [지효] Cheer up baby Cheer up baby 좀 더 힘을 내<br/>
               
       여자가 쉽게 맘을 주면 안돼 그래야 니가 날 더 좋아하게 될걸<br/>
       <font color="#FF99FF">
           <b>[나연] 태연하게 연기할래 아무렇지 않게 내가 널 좋아하는 맘 모르게<br/>
                   
           just get it together and then baby Cheer up</b>
       </font>
   </div>
   <div rel="buttons">
        <button class="btn" onClick="jQuery('#popup').w2popup('close')">Close</button>
   </div>
</div>
</body>

※ 팝업 이벤트 옵션

title	팝업창의 제목 설정
body	팝업창의 내용 구성
buttons	팝업창의 HTML 버튼 구성
modal	모달 영역의 기능 설정, true인 경우 팝업창 이외의 영역 클릭 및 선택 불가, false인 경우 팝업창 이외의 영역 클릭시 팝업창이 닫힘
width	팝업창의 넓이를 설정한다.
height	팝업창의 높이를 설정한다.
style	CSS태그를 입력하면 body 영역에 지정한 CSS에 태그가 반영되어 스타일을 변경 할 수 있다.
color	팝업창이 오픈되었을때 모달 영역에 나타나는 색상을 지정한다.
opacity	팝업창이 오픈되었을때 모달 영역의 백그라운드의 투명도를 지정한다.
speed	팝업창이 오픈되었을때 속도를 조절한다.
transition	팝업창의 내용변경 이벤트
showClose	팝업창 닫기 × 아이콘 나타내기(true인 경우 × 아이콘이 존재하고, false인 경우 × 아이콘이 존재하지 않는다.)
showMax	팝업창 화면 크기 조절 □ 아이콘 나타내기(true인 경우 □ 아이콘이 존재하고, false인 경우 □ 아이콘이 존재하지 않는다.)
keyboard	팝업창을 키보드 ESC 버튼으로 팝업창 닫기(true 종료, false 팝업창 오픈)
onOpen	팝업창이 오픈 될때 실행되는 이벤트 지정
onClose	팝업창이 종료 될때 실행되는 이벤트 지정
onMax	팝업창이 작아질때 실행되는 이벤트
onMin	팝업창이 작아질때 실행되는 이벤트
onToggle	팝업창이 최대/최소 크기로 변경될때마다 실행되는 이벤트
onKeyboard	팝업창을 키보드 ESC 버튼을 눌러 종료하였을경우 실행되는 이벤트

[팝업창 닫기 버튼]

[출처] https://wickedmagic.tistory.com/511

[로딩중 화면 띄우기]

[로딩중 화면 텍스트 나타내기]

[팝업창 슬라이드 메시지 나타내기]

[그리드 선택 열 그룹화 하기]

[출처] https://wickedmagic.tistory.com/512

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<div id="grid" style="width:100%;height:920px;"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#grid").w2grid({
        name : "grid"
        , searches: [
            { field:"lname", caption:"Last Name", type:"text" }
            , { field:"fname", caption:"First Name", type:"text" }
            , { field:"email", caption:"Email", type:"text" }
        ]
        , show : { footer: true }
        , sortData : [ { field:"recid", direction:"asc" } ]
        , columnGroups : [
            { caption:"번호", span:1 }        // 병합되지 않고 공간을 차지한다.
            , { caption:"소속", span:2 }        // 그룹, 회사가 병합된다.
            , { caption:"", master:true }        // 병합
            , { caption:"", master:true }        // 병합
            , { caption:"개인정보", span:3 }    // 생일, 나이, 혈액형이 병합된다.
            , { caption:"", master:true }        // 병합
        ]
        , columns: [
            { field:"recid", caption:"", size:"50px", sortable:true, attr:"align=center", resizable:true }
            , { field:"group", caption:"그룹", size:"30%", sortable:true, resizable:true }
            , { field:"company", caption:"회사", size:"15%", sortable:true, resizable:true }
            , { field:"name", caption:"이름", size:"15%", sortable:true, resizable:true }
            , { field:"position", caption:"포지션", size:"15%", sortable:true, resizable:true }
            , { field:"birthday", caption:"생일", size:"15%", sortable:true, resizable:true }
            , { field:"age", caption:"나이", size:"10%", sortable:true, resizable:true }
            , { field:"blood", caption:"혈액형", size:"10%", sortable:true, resizable:true }
            , { field:"anote", caption:"비고", size:"90px", sortable:true, attr:"align=center", resizable:true }
        ]
        , records: [
            { recid:1, company:"JYP", group:"트와이스", name:"나연", autonym:"임나연", position:"리드댄서, 리드보컬, 맏내, 비주얼", birthday:"1995-09-22", age:"21", blood:"A형", anote:"♥" }
            , { recid:2, company:"JYP", group:"트와이스", name:"정연", autonym:"유정연", position:"리드보컬", birthday:"1996-11-01", age:"20", blood:"O형" }
            , { recid:3, company:"JYP", group:"트와이스", name:"모모", autonym:"히라이 모모", position:"서브보컬, 메인댄서", birthday:"1996-11-09", age:"20", blood:"A형", anote:"★" }
            , { recid:4, company:"JYP", group:"트와이스", name:"사나", autonym:"미나토자키 사나", position:"서브보컬", birthday:"1996-12-29", age:"20", blood:"B형", anote:"♥" }
            , { recid:5, company:"JYP", group:"트와이스", name:"지효", autonym:"박지효", position:"리더, 메인보컬", birthday:"1997-02-01", age:"19", blood:"O형" }
            , { recid:6, company:"JYP", group:"트와이스", name:"미나", autonym:"묘이 미나", position:"서브보컬, 메인댄서", birthday:"1997-03-24", age:"19", blood:"A형" }
            , { recid:7, company:"JYP", group:"트와이스", name:"다현", autonym:"김다현", position:"리드래퍼, 서브보컬", birthday:"1998-05-28", age:"18", blood:"O형" }
            , { recid:8, company:"JYP", group:"트와이스", name:"채영", autonym:"손채영", position:"메인래퍼, 서브보컬", birthday:"1999-04-23", age:"17", blood:"B형" }
            , { recid:9, company:"JYP", group:"트와이스", name:"쯔위", autonym:"저우 쯔위", position:"서브보컬, 리드댄서", birthday:"1999-06-14", age:"17", blood:"A형" }
            , { recid:10, company:"울림", group:"러블리즈", name:"베이비소울", autonym:"이수정", position:"리더, 리드보컬", birthday:"1992-07-06", age:"24", blood:"O형", anote:"★" }
            , { recid:11, company:"울림", group:"러블리즈", name:"유지애", autonym:"유지애", position:"서브보컬", birthday:"1993-05-21", age:"23", blood:"A형" }
            , { recid:12, company:"울림", group:"러블리즈", name:"서지수", autonym:"서지수", position:"서브보컬, 메인댄서", birthday:"1994-02-11", age:"22", blood:"O형" }
            , { recid:13, company:"울림", group:"러블리즈", name:"이미주", autonym:"이미주", position:"서브보컬, 메인댄서", birthday:"1994-09-23", age:"22", blood:"O형" }
            , { recid:14, company:"울림", group:"러블리즈", name:"Kei", autonym:"김지연", position:"메인보컬, 리드댄서, 애교", birthday:"1995-03-20", age:"21", blood:"O형", anote:"♥" }
            , { recid:15, company:"울림", group:"러블리즈", name:"Jin", autonym:"박명은", position:"메인보컬", birthday:"1996-06-12", age:"20", blood:"B형" }
            , { recid:16, company:"울림", group:"러블리즈", name:"류수정", autonym:"류수정", position:"리드보컬", birthday:"1997-11-19", age:"19", blood:"B형" }
            , { recid:17, company:"울림", group:"러블리즈", name:"정예인", autonym:"정예인", position:"서브보컬, 리드댄서", birthday:"1998-06-04", age:"18", blood:"B형" }
            , { recid:18, company:"쏘스뮤직", group:"여자친구", name:"소원", autonym:"김소정", position:"리더, 서브보컬", birthday:"1995-12-07", age:"21", blood:"A형" }
            , { recid:19, company:"쏘스뮤직", group:"여자친구", name:"예린", autonym:"정예린", position:"서브보컬, 리드댄서", birthday:"1996-08-19", age:"20", blood:"O형" }
            , { recid:20, company:"쏘스뮤직", group:"여자친구", name:"은하", autonym:"정은비", position:"리드보컬", birthday:"1997-05-30", age:"19", blood:"O형" }
            , { recid:21, company:"쏘스뮤직", group:"여자친구", name:"유주", autonym:"최유나", position:"메인보컬", birthday:"1997-10-04", age:"19", blood:"B형" }
            , { recid:22, company:"쏘스뮤직", group:"여자친구", name:"신비", autonym:"황은비", position:"메인댄서, 서브보컬", birthday:"1998-06-03", age:"18", blood:"AB형" }
            , { recid:23, company:"쏘스뮤직", group:"여자친구", name:"엄지", autonym:"김예원", position:"서브보컬", birthday:"1998-08-19", age:"18", blood:"O형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"아이린", autonym:"배주현", position:"리더", birthday:"1991-03-29", age:"25", blood:"A형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"슬기", autonym:"강슬기", position:"-", birthday:"1994-02-10", age:"22", blood:"A형", anote:"★" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"웬디", autonym:"손승완", position:"-", birthday:"1994-02-21", age:"22", blood:"O형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"조이", autonym:"박수영", position:"-", birthday:"1996-09-03", age:"20", blood:"A형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"예림", autonym:"김예림", position:"-", birthday:"1999-03-05", age:"19", blood:"O형" }
            , { recid:23, company:"RBW", group:"마마무", name:"솔라", autonym:"김용선", position:"리더, 보컬", birthday:"1991-02-21", age:"25", blood:"B형" }
            , { recid:23, company:"RBW", group:"마마무", name:"문별", autonym:"문별이", position:"메인래퍼, 메인댄서", birthday:"1992-12-22", age:"24", blood:"B형" }
            , { recid:23, company:"RBW", group:"마마무", name:"휘인", autonym:"정휘인", position:"메인보컬, 댄서", birthday:"1995-04-17", age:"21", blood:"B형", anote:"★" }
            , { recid:23, company:"RBW", group:"마마무", name:"화사", autonym:"안혜진", position:"보컬, 랩", birthday:"1995-07-23", age:"21", blood:"A형" }
        ]
    });
});
</script>
</body>
</html>

[그리드 타이틀을 가운데 정렬]

div.w2ui-col-header {
text-align:center;
}

[그리드 상세 검색 기능]

[출처] https://wickedmagic.tistory.com/514

※ w2ui 그리드 조회 검색 타입.

타입	연산자	설명
text	is, begins, contains, ends	· 가장 기본적으로 특정 문자열이 존재하는지 검색한다.
int	is, in, not in, betwwen	· 특정 숫자값을 조회할때 사용한다. · 숫자만 입력가능
float	is, between	~~소수점(수정예정)~~
hex	is
money	is, between	· 통화형식으로 데이터를 찾는다. · 기본값은 $달러로 되어있다. · 숫자만 입력가능
currency	is, between	· 통화형식으로 데이터를 찾는다. · 기본값은 $달러로 되어있다. · 숫자만 입력가능
percent	is, between	· 백분율(%) 데이터를 찾는다. · 숫자만 입력가능
alphanumeric	is, begins, contains, ends	· 문자와 숫자 구분없
date	is, between	· 특정날자의 데이터를 조회한다.
time	is, between	· 특정시간의 데이터를 조회한다.
list	is	· 사용자가 정의한 미리 배열로 지정한 리스트 목록과 일치하는 데이터를 조회한다.
combo	is, begins, contains, ends
enum	in

※ 연산자

-. is : 조회 값이 해당열의 텍스와 완전 일치하는 값들만 조회한다.

-. begins : 조회 값이 해당열의 텍스트 맨 앞에 들어가 있는 값들만 조회한다.

-. contains : 조회 값이 해당열의 텍스트에 일치하는 값이 있으면 조회한다.

-. ends : 조회 값이 해당열의 텍스트 맨 끝에 들어가 있는 값들만 조회한다.

-. in : 조회 값이 해당열의 데이터가 일치하는 값들만 조회한다.

-. not in : 조회 값이 해당열의 데이터가 일치하지 않는 값들만 조회한다.

-. betwwen : 해당열의 데이터 중에서 입력한 두개의 조회값에 포함되는 값만 조회한다.

[그리드 상세검색 한글 변환하기]

[출처] https://wickedmagic.tistory.com/515

getSearchesHTML: function () {
            var html = '<table cellspacing="0">';
            var showBtn = false;
            for (var i = 0; i < this.searches.length; i++) {
                var s = this.searches[i];
                s.type = String(s.type).toLowerCase();
                if (s.hidden) continue;
                var btn = '';
                if (showBtn == false) {
                    btn = '<button class="btn close-btn" onclick="obj = w2ui[\''+ this.name +'\']; if (obj) { obj.searchClose(); }">X</button';
                    showBtn = true;
                }
                if (typeof s.inTag   == 'undefined') s.inTag     = '';
                if (typeof s.outTag == 'undefined') s.outTag     = '';
                if (typeof s.type    == 'undefined') s.type     = 'text';
                if (['text', 'alphanumeric', 'combo'].indexOf(s.type) != -1) {
                    var operator = '<select id="grid_'+ this.name +'_operator_'+ i +'" onclick="event.stopPropagation();">'+
                        '    <option value="is">'+ w2utils.lang('~인(is)') +'</option>'+
                        '    <option value="begins">'+ w2utils.lang('시작단어~(begins)') +'</option>'+
                        '    <option value="contains">'+ w2utils.lang('~내용~(contains)') +'</option>'+
                        '    <option value="ends">'+ w2utils.lang('~마지막단어(ends)') +'</option>'+
                        '</select>';
                }
                if (['int', 'float', 'money', 'currency', 'percent', 'date', 'time'].indexOf(s.type) != -1) {
                    var operator = '<select id="grid_'+ this.name +'_operator_'+ i +'" '+
                        '        onchange="w2ui[\''+ this.name + '\'].initOperator(this, '+ i +');" onclick="event.stopPropagation();">'+
                        '    <option value="is">'+ w2utils.lang('~인(is)') +'</option>'+
                        (['int'].indexOf(s.type) != -1 ? '<option value="~인(in)">'+ w2utils.lang('이면서(in)') +'</option>' : '') +
                        (['int'].indexOf(s.type) != -1 ? '<option value="~이 아닌(not in)">'+ w2utils.lang('제외한(not in)') +'</option>' : '') +
                        '<option value="between">'+ w2utils.lang('~중에서(between)') +'</option>'+
                        '</select>';
                }
                if (['select', 'list', 'hex'].indexOf(s.type) != -1) {
                    var operator = '<select id="grid_'+ this.name +'_operator_'+ i +'" onclick="event.stopPropagation();">'+
                        '    <option value="is">'+ w2utils.lang('is') +'</option>'+
                        '</select>';
                }
                if (['enum'].indexOf(s.type) != -1) {
                    var operator = '<select id="grid_'+ this.name +'_operator_'+ i +'" onclick="event.stopPropagation();">'+
                        '    <option value="~인(in)">'+ w2utils.lang('in') +'</option>'+
                        '    <option value="~이 아닌(not in)">'+ w2utils.lang('not in') +'</option>'+
                        '</select>';
                }
                html += '<tr>'+
                        '    <td class="close-btn">'+ btn +'</td>' +
                        '    <td class="caption">'+ s.caption +'</td>' +
                        '    <td class="operator">'+ operator +'</td>'+
                        '    <td class="value">';

[그리드 checkbox 사용하기]

[출처] https://wickedmagic.tistory.com/517

함수호출	설명
selectAll( )	· 해당 그리드의 모든 열을 선택한다.
selectNone( )	· 해당 그리드의 모든 열의 선택을 해제한다.
select( )	· 지정한 특정 열만을 선택한다. · 콤마( , )를 사용하여 구분함으로서 한번에 여러개를 선택하는것도 가능하다.
unselect( )	· 지정한 특정 열의 선택을 해제한다. · 콤마( , )를 사용하여 구분함으로서 한번에 여러개를 해제하는것도 가능하다.

[그리드 내용 수정하기]

[출처] https://wickedmagic.tistory.com/521

w2ui의 그리드에서 editable:속성 을 지정하는것으로 그리드의 내용을 수정할 수 있다.

editable 속성	설 명
checkbox	체크박스를 생성하고 화면에 나타낸다. true몇 체크, false면 해제이다.
text	선택한 공간의 내용을 수정한다.
int	선택한 공간의 내용을 수정한다. 숫자만 수정이 가능하다.
money	해당공간에 돈의 단위를 수정 할 수 있게 한다. 기본 단위는 $달러 이다.
percent	해당공간의 백분율을 수정할 수 있게 한다.
color	RGB 컬러를 선택할 수 있다.
date	해당 컬럼의 날짜를 수정할 때 사용한다.
time	해당 컬럼의 시간을 수정할 때 사용한다.
list	해당 컬럼을 수정할 경우 예로 보여줄 리스트 항목을 보여준다. 리스트 항목에 없는 내용또한 작성할 수 있다.
select	해당 내용의

2023년 11월 10일 금요일

Blazor with Angular, React, and Vue

Blazor with Angular, React, and Vue

Blazor vs Angular vs React vs Vue

What is Blazor?

Understanding WebAssembly —

Blazor Features —

Comparing Blazor vs [Angular, React, and Vue]: Which one to use in 2023?

Comparison: Blazor vs Angular

What is Angular in the context of the Blazor vs Angular comparison?

Blazor vs Angular: Key Differences and Similarities

Framework

Tooling

Libraries

Ease of use

GitHub stars and forks

Build and debugging

Stack Overflow inquiries

Performance:

Comparison: Blazor vs React

What is React in the context of the Blazor vs React comparison?

Blazor vs React: Key Differences and Similarities

OPEN-SOURCE Tools

Debugging and Production-Ready SPA

Statically Typed Languages

Performance

Comparison: Blazor vs vue

What is Vue in the context of the Blazor vs vue comparison?

Comparing Blazor vs Vue: Key Differences and Similarities

Building a New App

UI Building

Handling Forms

Routing

Language Dependence

Popularity

Age

Famous sites

Framework Type

Performance

Comparison Table for Blazor vs React vs Angular vs Vue

What is the best framework to choose among Blazor vs Angular vs React vs Vue?

Blazor vs Angular vs React vs Vue

2023년 9월 25일 월요일

C# - HtmlTemplate

Related projects

2023년 9월 19일 화요일

javascript - UI 라이브러리 (w2ui)

MSSQL - Cursor vs Temp Table