1. 프로젝트 개요

Ignite UI Angular Wrappers는 Infragistics에서 제공하는 Angular 컴포넌트 확장 라이브러리입니다. 이 라이브러리는 Ignite UI 컨트롤을 Angular 애플리케이션에서 손쉽게 활용할 수 있도록 지원합니다. 현재 해당 프로젝트는 공식적으로 사용 중단(deprecated) 상태이며, 대신 igniteui-angular 네이티브 Angular 컴포넌트 사용이 권장되고 있습니다. 그러나 기존 코드 구조나 아키텍처를 이해하는 데 있어 아직까지도 학습 가치가 있는 프로젝트입니다.

2. 프로젝트 설정

2.1 개발 환경

프로젝트를 시작하기 전에 다음 도구들이 설치되어 있어야 합니다:

• Node.js (버전 10 이상 권장)
• npm (Node.js 패키지 관리자)

2.2 프로젝트 클론

Git 저장소에서 프로젝트를 로컬 환경으로 복제합니다:

git clone https://github.com/IgniteUI/igniteui-angular-wrappers.git
cd igniteui-angular-wrappers

2.3 의존성 설치

프로젝트 실행에 필요한 패키지들을 설치합니다:

npm install

2.4 샘플 실행

설치가 완료되면 다음 명령어로 개발 서버를 시작합니다:

npm start

명령어 실행 후 로컬 서버가 실행되고 브라우저에서 샘플 애플리케이션을 확인할 수 있습니다.

3. 실전 적용 방법

3.1 컴포넌트 초기화

Angular 애플리케이션에서 Ignite UI 컨트롤은 사용자 정의 HTML 태그를 통해 초기화할 수 있습니다. 각 컨트롤에는 해당하는 태그가 존재하며, 태그 이름은 컨트롤 이름의 각 대문자를 하이픈(-)으로 구분하여 생성됩니다.

주요 컨트롤과 태그 매핑 예시:

• igCombo → <ig-combo>
• igGrid → <ig-grid>
• igTree → <ig-tree>

3.2 옵션 설정

컨트롤의 동작은 options 속성을 통해 구성하거나, HTML 태그에 직접 속성을 지정할 수 있습니다. 다음은 데이터 그리드 컴포넌트의 설정 예제입니다:

@Component({
  selector: 'app-root',
  template: `
    <ig-grid 
      [(options)]="tableConfig" 
      [(widgetId)]="componentId" 
      [dataSource]="sampleData">
    </ig-grid>
  `
})
export class MainComponent {
  private tableConfig: IgGrid;
  private componentId: string;
  private sampleData: any[];

  constructor() {
    this.sampleData = this.loadSampleData();
    this.componentId = 'dataTable1';
    this.tableConfig = {
      width: "100%",
      height: "500px",
      autoGenerateColumns: true,
      primaryKey: "id"
    };
  }

  private loadSampleData(): any[] {
    return [
      { id: 1, name: '사용자1', email: 'user1@example.com' },
      { id: 2, name: '사용자2', email: 'user2@example.com' }
    ];
  }
}

3.3 이벤트 처리

컨트롤에서 발생하는 이벤트를 처리하려면 HTML 템플릿에서 이벤트 바인딩을 활용합니다. 예를 들어, 그리드의 데이터 바인딩 완료 이벤트를 처리하는 방법은 다음과 같습니다:

<ig-grid (dataBind)="onDataLoaded()"></ig-grid>

컴포넌트 클래스에는 해당 이벤트 핸들러를 구현해야 합니다:

export class GridComponent {
  onDataLoaded(): void {
    console.log('데이터 로딩이 완료되었습니다.');
  }
}

4. 관련 기술 생태계

Ignite UI Angular Wrappers는 Angular 생태계의 일부로서, 다양한 관련 라이브러리와 함께 활용할 수 있습니다:

• Angular Material: Google의 Material Design 가이드라인을 기반으로 한 UI 컴포넌트 컬렉션
• NgRx: Angular 애플리케이션용 상태 관리 라이브러리
• Angular CLI: Angular 프로젝트 생성, 빌드, 테스트를 자동화하는 명령행 도구
• RxJS: 반응형 프로그래밍을 위한 라이브러리

이러한 도구들과 조합하면 유지보수가 용이하고 기능이 풍부한 Angular 애플리케이션을 구축할 수 있습니다.