Ignite UI for Web Components 7.0.0: 새로운 소식은 무엇인가요?

Ignite UI for Web Components 7.0.0: 새로운 소식은 무엇인가요?

AI 코딩 기술부터 구성 요소 선택, 프레임워크 통합, 테마 설정, 번들 최적화부터 향상된 그리드 스크롤 성능 등 다양한 내용을 다룹니다.

7분 읽기

Ignite UI for Web Components 7.0은 이제 npm에서 이용 가능합니다. 이번 릴리스는 Web Components를 Infragistics AI 지원 개발 스토리에서 일류 시민으로 발전시켰으며, AI 에이전트를 위한 네 가지 전용 코딩 스킬, 그리드 PDF 익스포터, 그리고 총 블로킹 시간을 50–60% 줄이고 10만 행에서 초당 프레임을 두 배 이상 증가시키는 스크롤 성능 전면 개편을 제공했습니다. 업그레이드하러 달려가npm install igniteui-webcomponents@7.0.0 세요.

  • AI 코딩 기술: 네 개의 에이전트 스킬 파일이 npm 패키지 내에 포함되어 있습니다; 프레임워크 통합 스킬은 호스트별로 분기되며(Angular, React viaigniteui-react, Vue, 바닐라 JS), 그리고 에이전트들이 이 시스템 없이도 꾸준히 놓치는 통합 문제를 다룹니다.
  • 그리드 스크롤 성능: 10만 행에서 100–150% FPS 향상과 총 블로킹 시간 50–60% 감소, 이는 Angular 그리드에서 이식된 6가지 타겟팅 렌더링 및 변경 감지 최적화로 구동됨.
  • 그리드 PDF 익스포터: 데이터 그리드, 트리 그리드, 계층적 그리드를 자동 페이지 구분, 열 그룹 헤더, 요약 행을 포함한 다중 페이지 PDF로 내보낼 수 있습니다; 툴바 구성 요소에 단일 속성으로 추가되는 기능으로도 제공됩니다.
  • 주요 변경 사항: CSS 테마 커스텀 속성 접두사가 전역적으로 이름 변경됨 — 업그레이드 전에 스타일시트 덮개를 업데이트하기;Chat typingIndicator 렌더러 제거(슬롯 사용typing-indicator);Tooltip disableArrow 삭제; Node.js 최소 인원은 이제 22명입니다.
  • npm install igniteui-webcomponents@7.0.0
    npm install igniteui-webcomponents-grids@7.0.0— 그리드, 트리 그리드, 계층적 그리드, 피벗 그리드에 필요한 자료

​전체 변경 로그는 여기에서 확인하세요.

AI Coding Skills

Ignite UI for Web Components 7.0은 아래skills/ npm 패키지 안에 네 개의 AI 스킬 파일을 직접 제공한다. 각 스킬은 GitHub Copilot, Claude, Cursor 및 기타 LLM 코딩 에이전트에게 이 라이브러리를 통해 특정 작업을 처리하는 방법을 가르치는 구조화된 가이드 파일입니다.

네 가지 기술은 각각 고유한 에이전트 실패 패턴을 다룹니다. igniteui-wc-choose-components는 에이전트가 잘못된 컴포넌트(예: 네이티브<select>가 올바른 선택일 때igc-combo)를 찾는 것을 방지합니다. IgniteUI-WC-integrate-with-framework는 가장 구조적으로 복잡한 기술로, 호스트 환경별로 분기되며 에이전트가 이 기술 없이는 확실하게 실수하는 지식을 전달합니다. igniteui-wc-customize-component-theme은 CSS 커스텀 속성,::part() 노출, 그리고 테마 MCP 서버를 다룹니다. IgniteUI-WC-optimize-bundle-size는 에이전트를 선택적 등록에서defineAllComponents() 멀리하고 쪽으로 유도합니다.

기술이 없으면그 기술로Framework
에이전트가CUSTOM_ELEMENTS_SCHEMA 모든igc-* 태그에 템플릿 오류를 생략→ Angular스키마가 독립 실행형 컴포넌트 또는 NgModule에 자동으로 추가됩니다Angular
에이전트가 설정을 건너뛰isCustomElement → Vue가 모든 컴포넌트에 대해 "Unknown custom element"를 경고합니다vite.config.ts / vue.config.js configured correctlyVue
에이전트가 객체/배열을 HTML 속성으로 전달→ 조용히 무시하고, 컴포넌트는 데이터를 보여주지 않습니다복소 타입에 사용되는 JS 속성 할당; 속성 문자열은 프리미티브에만 해당됩니다모두
DOM 삽입 후 에이전트 호출defineComponents() → 요소 업그레이드는 절대 발생하지 않습니다등록은 템플릿이 렌더링되기 전에 진입 지점에서 이루어집니다Vanilla JS

한 가지 통합 패턴이 돋보입니다: React. 다른 모든 호스트 프레임워크는igniteui-webcomponents 직시,defineComponents() 그리고igc-* HTML 태그. React 별도의igniteui-react 패키지는 완전 타입 React 래퍼를 제공합니다 (IgrButton,IgrInput,IgrCombo— 주목Igr 접두사), camelCase 소품, 그리고 표준 React 이벤트 처리가igcChange /igcInput 커스텀 이벤트 이름. 이 스킬은 에이전트를 올바른 패키지와 컴포넌트 프리픽스로 자동으로 라우팅합니다.

Angular / Vue / Vanilla JS — uses igniteui-webcomponents, igc-* tags

// Angular / Vue / Vanilla: same package, igc-* tags, defineComponents(), prefixed custom events
import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
defineComponents(IgcInputComponent);
// Template:

아키텍처: 린 브레인 + 실행 가능한 참조

서브디렉터리만igniteui-wc-integrate-with-framework 포함하references/ 는데, 이는 단일 플랫 파일이 너무 길어질 수 있는 차원 — 호스트 프레임워크 — 에서 분기되는 유일한 기술이기 때문입니다. 나머지 세 가지 스킬은 단일 뇌 파일 형태로, 각각 500줄 미만으로 좁은 영역에 적용된다.SKILL.md 모든 기술의 진입점은 에이전트의 라우팅 계층 역할을 합니다: 의도 탐지, 작업 분류, 상세 지식이 어디에 있는지 가리키는 포인터. API 문서의 잔뜩 쏟아지는 것이 아닙니다 — 4,000줄 분량의 문서 벽은 컨텍스트 윈도우 세금이지 기술이 아닙니다.

skills/
    igniteui-wc-choose-components/
    └── SKILL.md                  ← brain: match UI pattern to component name (<500 lines)
    igniteui-wc-integrate-with-framework/
    ├── SKILL.md                  ← brain: detect host framework + route to reference (<500 lines)
    └── references/
        ├── angular.md            ← CUSTOM_ELEMENTS_SCHEMA, defineComponents() in main.ts,
        │                            [] property binding, (igcChange) event syntax
        ├── react.md              ← igniteui-react package (Igr* wrappers), camelCase props,
        │                            native React events, no schema config needed
        ├── vue.md                ← isCustomElement in vite.config / vue.config,
        │                            @igcChange events, template refs for complex data
        └── vanilla-js.md         ← defineComponents() before DOM, HTML attributes vs
                                     JS property assignment for objects/arrays
    igniteui-wc-customize-component-theme/
    └── SKILL.md                  ← brain: CSS custom properties, ::part(), configureTheme() (<500 lines)
    igniteui-wc-optimize-bundle-size/
    └── SKILL.md                  ← brain: selective imports, lazy loading, tree-shaking (<500 lines)

스킬을 활성화하려면, 에이전트 툴링이 감시하는 디렉터리에 폴더를 복사하세요. Copilot은 저장소에서.github/skills/ 또는.claude/skills/ 저장소에서 스킬을 발견합니다. Claude 데스크톱과 Claude 코드 사용자는 프로젝트 지식 또는CLAUDE.md 참고할 수 있습니다. 개인 기술은 프로젝트 내에~/.copilot/skills/ 저장되거나~/.claude/skills/ 프로젝트 간에 공유될 수 있습니다.

# Unix / macOS
cp -r node_modules/igniteui-webcomponents/skills/* .github/skills/
# Windows (PowerShell)
Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\* .github\skills\
# Windows (Command Prompt)
xcopy /E /I node_modules\igniteui-webcomponents\skills .github\skills

여기 AI 지원 개발 문서가 있습니다.

Grid Scroll Performance

IgcGrid​IgcTreeGrid,, 그리고IgcHierarchicalGrid 7.0에서 6개의 렌더링 및 변경 감지 최적화를 목표로 했습니다. 10만 행 데이터셋과 100번의 스크롤 연산 결과: ~40–55 FPS vs. ~15–25 FPS 이전(100–150% 개선), 총 블로킹 시간은 ~8–12초에서 ~3–5초로 줄어들었습니다(50–60% 감소).

벤치마크 하드웨어에 대한 영향(10만 행, 100 스크롤 연산)을 측정한 총합:

Metric전에후에Delta
Long Tasks Count~80–120~30–50−50%에서 −60%
Avg Long Task Duration~80–120ms~55–75ms−30%에서 −40%
Total Blocking Time~8–12 sec~3–5 sec−50%에서 −60%
Frames per second~15–25 fps~40–55 fps+100%에서 +150%까지

이러한 개선을 위해 API 변경은 필요하지 않습니다. 최적화는 데이터 소스에 바인딩된 모든 그리드에 자동으로 적용됩니다.

여기 Grid 가상화 및 성능 문서가 있습니다.

Grid PDF Exporter

이제 그리드 데이터는 Web Components 그리드 계열에서 직접 PDF로 내보낼 수 있어 서드파티 라이브러리 배선이 필요 없습니다.

이 도구는IgcPdfExporterService 데이터 그리드, 트리 그리드, 계층적 그리드를 목표로 하며, 기본적으로 자동 페이지 구분, 열 그룹 헤더, 요약 행, 가로 방향 정렬을 갖춘 다중 페이지 문서를 생성합니다. 현재 필터, 정렬, 열 가시성 상태를 존중하여 문서가 화면에 보이는 것과 일치하도록 하거나, 해당 플래그IgcPdfExporterOptions를 오버라이드하여 뷰 상태와 상관없이 전체 데이터셋을 내보내는 방식입니다.

그리드 부품은 별도의 패키지로 배송됩니다. 그리드나 익스포터 API를 사용하기 전에 코어 패키지와 함께 설치하세요:

완전한 프로그래밍 제어를 위해서는 익스포터 서비스에 직접 배선을 연결하세요:

import { IgcPdfExporterService, IgcPdfExporterOptions } from 'igniteui-webcomponents-grids/core';
const exporter = new IgcPdfExporterService();
const options = new IgcPdfExporterOptions('SalesReport');
options.pageOrientation = 'landscape';
options.pageSize = 'a4';
options.showTableBorders = true;
const grid = document.querySelector('igc-grid');
exporter.export(grid, options);

대부분의 그리드에서는 도구 모음 구성 요소에서 PDF 버튼을 직접 활성화하는 것이 더 쉬운 방법이며, 수동 서비스 배선이 필요하지 않습니다:

Here’s the Grid PDF Exporter documentation.

Breaking Changes & Migration

CSS 테마 커스텀 속성 접두사가 전역적으로 이름 변경됨
영향을 받는 모든 컴포넌트 — 컴포넌트 테마 변수를 덮어쓰는 스타일시트
변경 사항: 구성 요소 테마의 글로벌 CSS 커스텀 속성 접두사가 Ignite UI for Angular, React, Blazor 명명 규칙에 맞게 이름이 변경되었습니다.
마이그레이션: 스타일시트에서 테마 오버라이드를 검색--igc-* 하고 새 접두사로 업데이트하세요. 전체 이름 변경 테이블은 변경 로그에 있습니다.
변경 로그에서 전체 접두사 이름 변경 테이블을 →

Chat:typingIndicator 템플릿 렌더러 삭제됨
영향을 받는 대상:IgcChatComponent
변경된 점: 렌더러 API가typingIndicator 제거되었습니다.
마이그레이션: 슬롯으로typing-indicator 교체하세요.

툴팁:disableArrow 속성 삭제
영향을 받는 대상:IgcTooltipComponent
무엇이 바뀌었는지: 이전에 폐기되었던disableArrow 부동산이 제거되었습니다.
마이그레이션: 화살표 가시성을 제어하기 위해 CSS 커스텀 속성이나 CSS 부분을::part(arrow) 사용하세요.

최소 Node.js 22개가 되었습니다
영향을 받는 경우: 빌드 환경, CI 파이프라인
변경된 점: 패키지가 더 이상 22 미만의 Node 버전을 지원하지 않는다는 점입니다.
마이그레이션: 7.0.0을 설치하기 전에 실행node --version 하고 업그레이드하세요.

위에 나열된 네 가지 변경 외에는 이번 릴리스에 추가적인 획기적인 변경사항이 없습니다.

시작하는 방법

오늘 Ignite UI for Web Components 설치하거나 업그레이드하세요:

# Requires Node.js >= 22
# Core components
npm install igniteui-webcomponents@7.0.0
# Grid components (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid)
npm install igniteui-webcomponents-grids@7.0.0
IgniteUI-WebComponents on NPM

Web Components 제품 업데이트
데모 요청