[angular] 무거운 작업 처리 최적화

26 Dec 2023

angular

Angular 애플리케이션에서 무거운 작업 처리는 성능 문제를 일으킬 수 있습니다. 따라서 이를 최적화하여 사용자 경험을 향상시켜야 합니다. 이 글에서는 Angular 애플리케이션에서 무거운 작업 처리를 최적화하는 방법에 대해 살펴보겠습니다.

1. 비동기 처리 활용

Angular에서 무거운 작업은 주로 API 호출, 데이터 다운로드, 파일 처리 등을 포함합니다. 이러한 작업을 비동기적으로 처리하여 애플리케이션이 블로킹되지 않도록 해야 합니다. async와 await 키워드를 사용하여 비동기 코드를 구성하고, RxJS Observable을 활용하여 비동기 작업을 관리할 수 있습니다.

async fetchData() {
  try {
    this.data = await this.apiService.getData().toPromise();
  } catch (error) {
    console.error(error);
  }
}

2. Lazy Loading 적용

애플리케이션에서 무거운 모듈이나 컴포넌트를 Lazy Loading하여 초기 로딩 시간을 최적화할 수 있습니다. Lazy Loading을 통해 필요한 모듈이나 컴포넌트를 필요할 때만 불러와서 성능을 향상시킬 수 있습니다.

const routes: Routes = [
  { path: 'heavy', loadChildren: () => import('./heavy/heavy.module').then(m => m.HeavyModule) }
];

3. Change Detection 최적화

Angular의 Change Detection은 무거운 작업을 유발할 수 있습니다. 이를 최적화하여 변경 감지 프로세스의 오버헤드를 줄일 수 있습니다. OnPush Change Detection 전략을 사용하거나 ChangeDetectorRef를 통해 수동으로 Change Detection을 제어할 수 있습니다.

@Component({
  selector: 'app-heavy',
  templateUrl: './heavy.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeavyComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  updateData() {
    // 데이터 업데이트 후 수동으로 Change Detection 실행
    this.cdr.detectChanges();
  }
}

Angular에서 무거운 작업 처리를 최적화하기 위한 방법에 대해 간략하게 알아보았습니다. 이러한 최적화는 애플리케이션의 성능을 향상시키고, 사용자 경험을 개선하는 데 도움이 될 것입니다.