[Angular 마스터하기] Day 17 - 성능 최적화, 빠른 앱 만들기

이제와서 시작하는 Angular 마스터하기 - Day 17 “성능 최적화로 사용자 경험을 향상시키세요! 🚀”

오늘 배울 내용

• OnPush 변경 감지 전략
• trackBy 함수
• Lazy Loading
• 성능 측정

---

1. OnPush 변경 감지

import { ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-optimized',
  changeDetection: ChangeDetectionStrategy.OnPush,  // ← 성능 향상!
  template: `
    <div>{{ data() }}</div>
  `
})

export class OptimizedComponent {
  data = signal('Hello');
}

---

2. trackBy 함수

@Component({
  template: `
    <div *ngFor="let item of items; trackBy: trackById">
      {{ item.name }}
    </div>
  `
})

export class ListComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' }
  ];

  trackById(index: number, item: any) {
    return item.id;  // ID로 추적
  }
}

---

3. Lazy Loading

// app.routes.ts
export const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component')
      .then(m => m.AdminComponent)
  }
];

---

📝 정리

최적화 체크리스트

• OnPush 사용
• trackBy 함수 사용
• Lazy Loading 적용
• 불필요한 구독 정리

---

📚 다음 학습

• 이전: Day 16: Signal 고급
• 다음: Day 18: 테스팅 기초

---

“최적화는 사용자 경험의 핵심입니다!” 🚀