CRUD 란 무엇입니까?

CRUD는 데이터 컬렉션에 대해 수행할 수 있는 CREATE, READ, UPDATE, DELETE 작업을 나타내는 컴퓨터 프로그래밍의 약어입니다. 컴퓨터 세계에서 CRUD 애플리케이션에 대해 이야기하는 것은 사용자에게 읽기 전용 데이터를 제공하는 애플리케이션과 비교했을 때 주요 차이점입니다.

Angular CRUD

Angular CRUD 또는 Angular의 CRUD 작업에 대해 이야기하는 동안 데이터 저장소가 원격 서버에 있다는 점에 유의하는 것이 중요합니다. Angular 애플리케이션은 데이터 계층에 직접 액세스할 수 없으므로 CRUD 작업에 대한 엔드포인트를 제공하는 웹 API를 통해 데이터 계층과 통신해야 합니다. 즉:

API	작업	HTTP 메소드
"API/엔티티"	모든 엔터티 읽기	얻다
"API/엔티티/ID"	해당 ID를 가진 엔터티를 읽습니다.	얻다
"API/엔티티/업데이트"	해당 ID로 엔터티 업데이트	넣기/패치
"API/엔티티/생성"	새 엔터티 만들기	우편
"API/엔티티/삭제"	해당 ID를 가진 엔터티를 삭제하세요.	삭제

CRUD 작업은 HTTP를 통해 API와 통신하는 데 사용되는 HTTP 메서드에도 개념적으로 매핑됩니다.

위에 언급된 API와 함께 작동하는 전체 코드는 Angular 서비스에서 추상화될 수 있습니다. 이러한 서비스는 주입 가능하며 동일한 데이터베이스에 대해 CRUD 작업을 수행해야 하는 모든 구성 요소에서 재사용할 수 있습니다. 좋은 방법은 이러한 서비스를 가능한 한 일반적으로 작성하여 많은 구성 요소와 다른 서버에서도 재사용하기에 적합하도록 만드는 것입니다.

이러한 서비스의 일반적인 예는 다음과 같습니다.

@Injectable()
export class CRUDService {
  /** See https://angular.io/api/common/http/HttpClient */
  constructor(private http: HttpClient) { }

  /** Gets all entities from server */
  public getData() {
      return this.http.get(`${this.serverURL}\api\entities`);
  }

  /** Gets entity with corrresponding id */
  public getRecord(id) {
      return this.http.get(`${this.serverURL}\api\entities\${id}`);
  }

  /** Creates entity from body */
  public add(entity) {
      return this.http.post(`${this.serverURL}\api\entities\create`, entity);
  }

  /* Updates entity with data from body */
  public update(entity) {
      return this.http.put(`${this.serverURL}\api\entities\update`, entity);
  }

  /** Deletes the corresponding entity */
  public delete(entity) {
      return this.http.delete(`${this.serverURL}\api\entities\delete`, entity);
  }
}

위 서비스에서 누락된 것은 필터링/정렬/페이징 등에 대한 구성입니다. 엔드포인트의 정확한 API 구현에 따라 서버에 대한 요청에는 필터링/정렬/페이징을 처리하기 위한 선택적 매개변수가 필요할 수 있습니다. 코드 예제와 함께 제공되는 데모는 원격 데이터 작업을 참조하세요.

더 많은 예제와 지침은 공식 Angular 문서의 HTTP 서비스 튜토리얼을 참조하세요.

그리드를 사용한 CRUD 작업

그리드에서 CRUD를 활성화한다는 것은 사용자가 그리드 내에서 이러한 CRUD 작업을 수행할 수 있는 UI를 제공한다는 의미입니다. 이는 매우 쉽습니다. 그리드는 셀 편집, 행 편집, 행 추가 및 행 삭제 UI를 즉시 제공하며 이를 직접 수행할 수 있는 강력한 API를 제공합니다. 다음으로, 각 편집 작업의 결과를 가져와 CRUD 서비스의 해당 메서드에 전달하여 원본 데이터베이스의 모든 변경 사항을 보존하려고 합니다. 이를 완료하면 그리드가 CRUD를 활성화했다고 말할 수 있습니다.

이 섹션은 그리드에서 CRUD 작업을 활성화하는 방법에 대한 튜토리얼로 작성되었으며, 코드에 붙여넣고 복사할 수 있는 코드 조각이 함께 제공됩니다.

How to

먼저 rowEditing 동작을 활성화하고, 편집 작업에 필요한 UI를 가져오고, IgxActionStrip (IgxActionStrip에 대한 자세한 내용 참조)의 이점을 활용하고, 이벤트 핸들러를 연결해 보겠습니다.

<igx-grid 
    primaryKey="ID"
    [rowEditable]="true"
    (rowAdded)="rowAdded($event)"
    (rowDeleted)="rowDeleted($event)"
    (rowEditDone)="rowEditDone($event)">

  <igx-action-strip #actionstrip>
      <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
  </igx-action-strip>

Angular 구성 요소에서 DI를 사용하여 데이터 서비스를 주입합니다. 이제 서비스를 사용하여 데이터 계층에 대해 전체 CRUD 작업을 수행할 준비가 되었습니다.

constructor(private crudService: CRUDService) { }

public rowDeleted(event: IRowDataEventArgs) {
    this._crudService.delete(event.data).subscribe((rec) => {
        // notification or do any adittional handling
        this.snackbar.open(`Row with ID of ${rec.ID} was deleted.`);
    });
}

public rowAdded(event: IRowDataEventArgs) {
    this._crudService.add(event.data);
}

public rowEditDone(event: IGridEditDoneEventArgs) {
    this._crudService.update(event.newValue);
}

위의 예에서는 해당 메서드만 호출하고 이벤트 인수에서 읽은 데이터를 전달합니다. 대부분의 API 엔드포인트는 업데이트/추가/삭제된 엔터티를 반환하며 이는 요청이 성공했음을 나타냅니다.

좋은 방법은 유효성 검사를 추가하여 모든 작업이 성공적으로 완료되었거나 오류가 발생했음을 사용자에게 알리는 것입니다. 이러한 경우 오류에 대한 핸들러를 전달하고 알림도 완료할 수 있습니다.

this._crudService.delete(event.data).subscribe({
    next: (data: any) => {
      console.log('success');
    },
    error: err => {
      console.log(err);
    },
    complete: () => {
      console.log('Complete notification')
    }
});

Note

위의 예는 작업 편집을 위한 기본 그리드 UI를 기반으로 합니다. 또 다른 유효한 접근 방식은 자체 외부 UI를 제공하는 것입니다. 이러한 경우 UI와의 사용자 상호 작용에 응답하는 것은 그리드 편집 API를 통해 작동해야 합니다(그리드에 PrimaryKey가 설정되어 있는지 확인). 참조는 API 섹션을 참조하세요.

Note

모범 사례를 따르고 서버 데이터베이스와 비교하여 로컬 데이터의 차이를 방지하십시오. 예를 들어, 먼저 서버에 레코드 삭제 요청을 하기로 결정할 수 있지만 요청이 실패하면 로컬 그리드 데이터의 데이터를 삭제하지 마십시오.

this._crudService.delete(event.data).subscribe({
    next: (data: any) => {
      this.grid.getRowByKey(event.data[this.grid.primaryKey]).delete();
    },
    error: err => {
      console.log(err); // notify and don't delete the grid row
    }
});

Demo

지침에 따라 구축된 데모를 확인하세요. 이를 가지고 놀면서 시나리오에 가장 적합한 사용자 정의 예제를 시도해 보십시오.

사용자 정의

풍부한 Grid API를 사용하면 필요에 맞게 거의 모든 방식으로 편집 프로세스를 사용자 정의할 수 있습니다. 여기에는 다음이 포함되지만 이에 국한되지는 않습니다.

일괄 편집: 일괄 편집을 활성화하여 모든 업데이트를 일괄 처리하고 단일 요청으로 모든 것을 커밋합니다.
템플릿 작성: 셀 편집을 위해 템플릿을 추가하거나 행/셀 편집, 행 추가 및 행 삭제를 위해 자체 외부 UI를 사용합니다.
이벤트: 편집 흐름을 모니터링하고 그에 따라 반응합니다. 편집 중에 발생한 모든 이벤트에 대한 이벤트 핸들러를 연결하면 다음을 수행할 수 있습니다.
- 셀당 데이터 검증
- 행당 데이터 유효성 검사
- 사용자에게 예상되는 입력 유형을 묻는 메시지 표시
- 비즈니스 규칙에 따라 추가 처리 취소
- 변경 사항을 수동으로 커밋
풍부한 API

일괄 편집

클라이언트에 업데이트를 유지하고 단일 요청으로 모든 업데이트를 커밋하려면 일괄 편집을 활성화하세요. batchEditing 옵션을 true로 설정하면 일괄 업데이트가 활성화됩니다.

<igx-grid [batchEditing]="'true'" ...>

자세한 내용과 데모 샘플을 보려면 일괄 편집으로 이동하세요.

템플릿

일반 편집 항목에서 기본 셀 편집 템플릿에 대해 자세히 알아보고 확인할 수 있습니다.

셀이 편집 모드에 있을 때 적용되는 사용자 정의 템플릿을 제공하려면 igxCellEditor 지시문을 사용할 수 있습니다. 이렇게 하려면 igxCellEditor 지시문이 표시된 ng-template 전달하고 사용자 정의 컨트롤을 cell.editValue에 올바르게 바인딩해야 합니다.

<igx-column field="class" header="Class" [editable]="true">
    <ng-template igxCellEditor let-cell="cell" let-value>
        <igx-select class="cell-select" [(ngModel)]="cell.editValue" [igxFocus]="true">
            <igx-select-item *ngFor="let class of classes" [value]="class">
                {{ class }}
            </igx-select-item>
        </igx-select>
    </ng-template>
</igx-column>

자세한 내용과 데모는 셀 편집 항목을 참조하세요.

이벤트

그리드는 편집 경험을 더 효과적으로 제어할 수 있는 다양한 이벤트를 표시합니다. 이러한 이벤트는 행 편집 및 셀 편집 수명 주기 동안(편집 작업을 시작, 커밋 또는 취소할 때) 발생합니다.

이벤트	설명	인수	취소 가능
`rowEditEnter`	만약에`rowEditing` 활성화되어 행이 편집 모드로 들어갈 때 실행됩니다.	IGridEditEventArgs	`true`
`cellEditEnter`	셀이 편집 모드로 들어갈 때 발생합니다(이후`rowEditEnter`)	IGridEditEventArgs	`true`
`cellEdit`	값이 변경되면 셀 값이 커밋되기 직전에 실행 됩니다(예:`Enter`)	IGridEditEventArgs	`true`
`cellEditDone`	값이 변경되면 셀이 편집되고 셀 값이 커밋 된 후에 실행됩니다.	IGridEditDoneEventArgs	`false`
`cellEditExit`	셀이 편집 모드를 종료할 때 발생합니다.	IGridEditDoneEventArgs	`false`
`rowEdit`	만약에`rowEditing` 활성화되면 편집 모드의 값이 커밋되기 직전에 실행 됩니다(예:`Done` 행 편집 오버레이의 버튼)	IGridEditEventArgs	`true`
`rowEditDone`	만약에`rowEditing` 활성화되면 행이 편집되고 새 행의 값이 커밋된 후에 실행 됩니다.	IGridEditDoneEventArgs	`false`
`rowEditExit`	만약에`rowEditing` 활성화되면 행이 편집 모드를 종료할 때 실행됩니다.	IGridEditDoneEventArgs	`false`

자세한 내용과 데모 샘플을 보려면 이벤트로 이동하세요.

Editing API

그리드의 데이터 업데이트는 그리드에 의해 노출되는 메서드를 통해 수행됩니다.

그리고 update에 의해 노출된 메소드 IgxGridCell 그리고 IgxGridRow 인스턴스:

// Through the grid methods
this.grid.updateRow(newData, rowKey);
this.grid.updateCell(newData, rowKey, columnField);
this.grid1.deleteRow(0);
this.grid.addRow(data);

// Through the methods exposed by cell/row
this.grid.getCellByColumn(rowIndex, columnField).update(newData);
this.grid.getCellByKey(rowKey, columnField).value = newData;
this.grid.getRowByKey(rowID).update(newData);
this.grid.getRowByKey(rowID).delete();

그리드 API 사용에 대한 자세한 내용과 정보는 셀 편집 CRUD 작업 섹션에서 확인할 수 있습니다.

테이크아웃

강력한 방식으로 CRUD를 활성화하는 것은 모든 데이터 기반 애플리케이션의 주요 이정표입니다. 전체 프로세스를 간소화하기 위해 우리는 CRUD 기능을 염두에 두고 즉시 사용 가능한 UI와 유연한 API를 제공하는 IgxGrid를 구축했습니다. 이것이 당신에게 어떤 도움이 될까요? 외부 데이터베이스에 대해 CRUD를 구현할 때 많은 시간을 절약할 수 있습니다. 그리고 현대의 데이터 기반 앱에 관해 이야기할 때 모든 것은 견고성, 속도 및 유연성으로 귀결됩니다.

CRUD 란 무엇입니까?

Angular CRUD

그리드를 사용한 CRUD 작업

How to

Note

Note

Demo

사용자 정의

일괄 편집

템플릿

이벤트

Editing API

테이크아웃

API 참조

테마