# 성능 최적화 (Angular)

> OnPush strategy, trackBy, virtual scrolling, lazy loading, preloading, bundle size, Core Web Vitals, profiling

- 22 면접 질문
- Senior
- [면접 질문: Angular](https://sharpskill.dev/ko/technologies/angular/interview-questions.md)

## 1. Angular의 OnPush 전략이란 무엇입니까?

**답변**

OnPush는 컴포넌트의 input이 참조로 변경되거나 내부 이벤트가 발생할 때만 검사를 제한하는 변경 감지 전략입니다. 이 최적화는 복잡한 애플리케이션에서 감지 사이클 수를 크게 줄여줍니다. 프레젠테이션 컴포넌트에 기본적으로 OnPush를 적용하는 것은 성능을 향상시키기 위한 모범 사례입니다.

## 2. ngFor 디렉티브에서 trackBy의 주요 역할은 무엇입니까?

**답변**

trackBy를 사용하면 Angular가 리스트의 각 항목을 고유하게 식별할 수 있어 업데이트 시 전체 DOM을 다시 생성하지 않습니다. trackBy가 없으면 한 항목만 변경되어도 Angular는 모든 요소를 파괴하고 다시 생성합니다. 고유 식별자와 함께 trackBy를 사용하면 동적 리스트의 성능이 크게 향상됩니다.

## 3. Angular 라우팅의 맥락에서 lazy loading이란 무엇입니까?

**답변**

lazy loading은 해당 라우트가 활성화될 때만 코드를 다운로드하는 지연 모듈 로딩 기술입니다. 이는 초기 번들 크기를 줄이고 애플리케이션의 첫 화면 표시를 가속화합니다. lazy loading 모듈은 라우트 구성에서 loadChildren으로 정의됩니다.

## 19개 추가 질문 이용 가능

- OnPush로 검사를 강제하려면 어떤 메서드를 트리거합니까?
- 대규모 리스트에 대한 virtual scrolling의 주요 장점은 무엇입니까?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 Angular 면접 주제

- [TypeScript 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/typescript-basics.md): 25개 질문, Junior
- [TypeScript 고급](https://sharpskill.dev/ko/technologies/angular/interview-questions/typescript-advanced.md): 20개 질문, Junior
- [Angular 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-fundamentals.md): 20개 질문, Junior
- [컴포넌트와 라이프사이클](https://sharpskill.dev/ko/technologies/angular/interview-questions/components-lifecycle.md): 20개 질문, Junior
- [Services & Dependency Injection](https://sharpskill.dev/ko/technologies/angular/interview-questions/services-dependency-injection.md): 20개 질문, Junior
- [Angular 모듈 구성](https://sharpskill.dev/ko/technologies/angular/interview-questions/modules-organization.md): 22개 질문, Mid-Level
- [Angular CLI](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-cli.md): 18개 질문, Junior
- [디렉티브와 Pipe](https://sharpskill.dev/ko/technologies/angular/interview-questions/directives-pipes.md): 22개 질문, Mid-Level
- [라우팅과 내비게이션](https://sharpskill.dev/ko/technologies/angular/interview-questions/routing-navigation.md): 24개 질문, Mid-Level
- [리액티브 폼](https://sharpskill.dev/ko/technologies/angular/interview-questions/forms-reactive.md): 26개 질문, Mid-Level
- [템플릿 기반 폼](https://sharpskill.dev/ko/technologies/angular/interview-questions/forms-template-driven.md): 16개 질문, Mid-Level
- [RxJS 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/rxjs-fundamentals.md): 22개 질문, Mid-Level
- [RxJS 연산자](https://sharpskill.dev/ko/technologies/angular/interview-questions/rxjs-operators.md): 24개 질문, Mid-Level
- [HttpClient 및 API 호출](https://sharpskill.dev/ko/technologies/angular/interview-questions/http-client.md): 22개 질문, Mid-Level
- [기본 상태 관리](https://sharpskill.dev/ko/technologies/angular/interview-questions/state-management-basics.md): 20개 질문, Mid-Level
- [Change Detection](https://sharpskill.dev/ko/technologies/angular/interview-questions/change-detection.md): 20개 질문, Mid-Level
- [Angular Signals](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-signals.md): 20개 질문, Mid-Level
- [Standalone Components](https://sharpskill.dev/ko/technologies/angular/interview-questions/standalone-components.md): 18개 질문, Mid-Level
- [Angular 단위 테스트](https://sharpskill.dev/ko/technologies/angular/interview-questions/testing-unit.md): 22개 질문, Mid-Level
- [엔드투엔드 테스팅](https://sharpskill.dev/ko/technologies/angular/interview-questions/testing-e2e.md): 18개 질문, Mid-Level
- [빌드 및 최적화](https://sharpskill.dev/ko/technologies/angular/interview-questions/build-optimization.md): 20개 질문, Mid-Level
- [NgRx 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/ngrx-fundamentals.md): 24개 질문, Senior
- [NgRx 고급](https://sharpskill.dev/ko/technologies/angular/interview-questions/ngrx-advanced.md): 24개 질문, Senior
- [Angular 아키텍처](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-architecture.md): 22개 질문, Senior
- [보안 및 모범 사례](https://sharpskill.dev/ko/technologies/angular/interview-questions/security-best-practices.md): 20개 질문, Senior
- [고급 RxJS 패턴](https://sharpskill.dev/ko/technologies/angular/interview-questions/advanced-rxjs-patterns.md): 22개 질문, Senior
- [Angular Universal 및 SSR](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-universal-ssr.md): 20개 질문, Senior
- [Angular 마이크로 프론트엔드](https://sharpskill.dev/ko/technologies/angular/interview-questions/micro-frontends-angular.md): 20개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/angular/interview-questions/performance-optimization