웹 Components-Excel Rick 스프레드시트를 설치하여 프런트엔드 개발자가 가장 짧은 시간 내에 고성능 UI 가져오기

전방 개발자가 고기능 격자와 도표 등 UI를 설치할 때 제3자 프로그램 라이브러리의 도입은 비용 측면과 자원 측면에서 검토해야 한다.하지만 지금은 기존 WEB 앱을 활용해 앙글라와 리액트 등 JS 프레임워크 도입을 추진하려면 개발 계획이 너무 방대해 달성하기 어려울 수 있다.
WEB 표준 기술을 활용한 웹 컴포니언츠라면 앞으로 어떤 프레임워크를 적용해도 활용할 수 있다.인프라 전문가가 제공하는 웹 Components를 지원하는 UI 구성 요소 그룹의 라이브러리Ignite UI for Web Components를 이용하여 고기능 UI를 간단하게 가져오는 방법을 소개한다.

웹 Components

웹 Components는 재활용 가능한 맞춤형 HTML 요소(맞춤형 베이스)를 제작할 수 있는 기술이다.<p> 태그나 <span> 태그처럼 <todo-list> 태그 형식으로 미리 정의된 사용자 정의 기초를 HTML에 설정할 수 있습니다.
또한 <todo-list title="タスク">처럼 속성을 설정하여 더욱 자유롭게 할 수 있다.사용자 정의 인프라는 스타일과 JavaScript를 숨기기 때문에 프로그램 전체의 스타일시트와 JavaScript 간의 상호적인 영향을 고려할 필요가 없습니다.

웹 Components/Ignite UI for 웹 Components의 이점

Web Components와 Ignite UI for Web Components의 장점을 몇 가지 측면에서 고려합니다.

도입 장벽이 매우 낮다.

개발된 응용 프로그램 중 한 페이지에 표 형식의 데이터 목록을 표시할 수 있으며, 이 페이지에 정렬 기능과 선별 기능을 추가해야 한다.웹 Components의 경우 이 페이지의 HTML에 사용자 정의 스프레드시트를 구성하고 JavaScript 파일을 읽기만 하면 가져오기를 완료할 수 있습니다.변경된 부분이 적고 위에서 말한 것처럼 스타일과 자바스크립트 처리가 숨겨져 있기 때문에 프로그램에 미치는 영향을 고려할 필요가 거의 없는 의미라도 간단하게 가져올 수 있다.

라이브러리 종속 없음

예를 들어 jQuery에 비해 jQuery 기반의 제3자 프로그램 라이브러리를 사용할 때도 jQuery 자체를 읽어야 한다.웹 Components는 프로그램 라이브러리에 의존하지 않기 때문에 HTML의 원본을 더욱 간단하게 저장할 수 있습니다.

Ignite UI 라이센스에서는 Anglar용 구성 요소, Blazor용 구성 요소 등을 사용할 수 있습니다.

Ignite UI 라이센스에는 Ignite UI for Web Components 외에도 Ignite UI for Angular와Ignite UI for Blazor 등 모든 Ignite UI 제품이 포함되며 개발된 어플리케이션 수에 제한이 없습니다.따라서 예를 들어 Ignite UI for Web Components에 전통적인 WEB 응용 프로그램의 특정 UI를 먼저 설치한 다음에 프레임워크를 Anglar로 갱신하고 Ignite UI for Anglar의 구성 요소로 웹 Compoonnts가 실시하는 구성 요소를 대체하면 추가 비용이 필요하지 않다.Ignite UI for Web Components를 사용한 경험이 있다면 다른 Ignite UI 구성 요소를 사용할 때도 이해가 상당히 원활해질 것입니다.

Ignite UI for Web Components Excel 쓰기 스프레드시트 제어

그러면 Ignite UI for Web Components의 Excel 쓰기 스프레드시트 제어를 HTML에 사용자 정의 스프레드시트로 구성하는 데 실제로 사용하는 프로세스를 살펴보겠습니다.
(제품을 구매하지 않았더라도 같은 절차에 따라 시험판을 사용할 수 있다.)
Node.js 및 Visual Studio Code가 설치된 개발 환경을 전제로 합니다.

새 프로젝트, 설치 라이브러리

명령줄에서 다음 순서에 따라 새 항목wc-spreadsheet을 만들고 각종 프로그램 라이브러리를 설치합니다.마지막으로 Visual Studio Code를 사용하여 편집기에서 작업할 수 있도록 항목을 엽니다.

> mkdir wc-spreadsheet #新規ディレクトリの作成
> cd wc-spreadsheet #作成したディレクトリに移動
> npm init -y #npm を初期化
> npm install webpack webpack-cli typescript css-loader ts-loader --save-dev #開発に必要なライブラリのインストール
> node_modules/.bin/tsc --init #TypeScript の初期化
> npm install @webcomponents/custom-elements #カスタムエレメンツのポリフィルをインストール
> npm install igniteui-webcomponents-core igniteui-webcomponents-spreadsheet #Ignite UI for Web Components のインストール
> code . #Visual Studio Code で開く

ts 파일 생성/구축 설정

새 src 디렉터리, 새 Spreadsheet.ts 파일, 설정.내용은 다음과 같다: 매우 간단하다

import { IgcSpreadsheetModule } from 'igniteui-webcomponents-spreadsheet'; //Spreadsheet モジュールのインポート
import { ModuleManager } from 'igniteui-webcomponents-core'; //モジュールマネージャーのインポート

// モジュールマネージャーに Spreadsheet モジュールを登録
ModuleManager.register(
    IgcSpreadsheetModule
);

다음에 webpack.config.js라는 웹 패키지용 프로필을 프로젝트 경로에 설정합니다. 다음과 같습니다.

const path = require('path')

module.exports = {
    entry: path.resolve(__dirname, "./src/Spreadsheet.ts"),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'Spreadsheet.js'
    },
    module: {
        rules: [
            { test: /\.css$/, use: 'css-loader' },
            { test: /\.ts$/, use: 'ts-loader' }
        ]
    },
    resolve: {
        extensions: ['.js', '.ts', '.html', '.scss'],
        modules: ['node_modules'],
    },
}

마지막으로 package.json 파일을 편집하여 구축 스크립트를 포함하는 형식으로 다음과 같다.

"scripts": {
    "build": "webpack --mode=production"
},

구성 및 확인 작업 수행

명령줄에서 구축 명령을 실행합니다.

> npm run build

구축이 완료된 후 새로운 파일이 생성되었습니다dist/Spreadsheet.js.이 파일을 불러오고 HTML을 만듭니다.
적당한 곳(본 글은 프로젝트 노선)에서 새로 만들기index.html 문건은 다음과 같다.

<html>
    <head>
        <title>スプレッドシート - Ignite UI for Web Components</title>
    </head>
    <body>
        <igc-spreadsheet id="spreadsheet" height="500px" width="100%">
        </igc-spreadsheet>
        <script src="dist/Spreadsheet.js"></script>
    </body>
</html>

저장한 후 브라우저에서 index.html를 열면 다음과 같이 표시됩니다.

총결산

이처럼 브라우저에서 스프레드시트 기능을 구현하는 복잡한 UI 부품은 HTML에 매우 간단하게 구성할 수 있습니다.웹Components가 현재 WEB 개발에서 주로 이용되는 것은 아니지만 그 사상은 커다란 가능성을 숨기고 WEB 표준의 기술이라는 점도 주목한다.

온라인 무료 상담회를 실시하고 있다.

본 기사에서 소개한 웹 Components 도입에 대한 질문이 있으면 무료 온라인 상담회를 꼭 이용하세요.자사 제품 자체에 대한 상담뿐 아니라 시스템 개발 관련 다양한 상담에 가능한 답변을 드리도록 하겠습니다.다음 페이지에서 원하는 날짜와 시간을 지정하여 예약할 수 있습니다.
무료 상담회 예약 형식

Reference

이 문제에 관하여(웹 Components-Excel Rick 스프레드시트를 설치하여 프런트엔드 개발자가 가장 짧은 시간 내에 고성능 UI 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/mnakae/articles/fabcec48cd529f

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)