Angular8+ 면접 질문 정리: 기본 지식 포인트 분석

이 기사는 Angular8+를 기반으로 한 몇 가지 인터뷰 질문을 공유하고 Angular8+의 기본 지식 포인트에 대한 심층적인 이해를 제공할 것입니다.

관련 권장 사항: 2022년 대규모 프런트엔드 면접 질문 요약(모음)

Angular CLI 정보

Angular 스캐폴딩이라고도 알려진 Angular CLI는 프로젝트 또는 구성 요소의 프레임워크를 빠르게 생성하는 데 사용됩니다. 효율성을 향상시키기 위해. Angular 앱, 컴포넌트, 서비스 등을 쉽게 생성할 수 있으며, 매개변수를 통해 자신의 필요에 맞게 생성할 수 있습니다. 각도 발달에 있어서 없어서는 안 될 도구라고 할 수 있습니다. [추천 관련 튜토리얼: "angular Tutorial"]
참조: https://cli.angular.io/

• ng generate: 새로운 컴포넌트, 서비스, 파이프, 클래스 등을 생성합니다.
• ng new: 새로 생성합니다. 각도 앱
• ng 업데이트: 각도 자체 및 해당 종속성 업그레이드
• ng 버전: 각도 cli의 글로벌 버전과 각도 cli, 각도 코드 등의 로컬 버전 표시
• ng 추가: 새로운 타사 라이브러리 추가 . 1) npm을 기반으로 node_modules를 설치하고, 2) 새 종속성이 제대로 작동하도록 구성 파일을 자동으로 변경합니다

Angular의 종속성 주입(종속성 주입)에 대해

종속성 주입은 Angular의 한 유형입니다. 구현 애플리케이션 디자인 패턴은 Angular의 핵심 개념 중 하나입니다.

종속성은 일련의 기능을 가진 서비스입니다. 애플리케이션의 다양한 구성 요소와 지시어(파생어)에는 서비스 기능이 필요할 수 있습니다. Angular는 이러한 종속성을 구성 요소와 지시문에 주입할 수 있는 원활한 메커니즘을 제공합니다. 따라서 우리는 애플리케이션의 모든 구성 요소 사이에 주입될 수 있는 종속성을 구축하고 있습니다.

종속성 주입을 사용하면 다음과 같은 이점도 있습니다.

1. 인스턴스화할 필요가 없습니다(새 인스턴스). 클래스 생성자에 어떤 매개변수가 필요한지 걱정할 필요가 없습니다
2. 일회성 주입(앱 모듈은 공급자를 통해 주입됨)으로 모든 구성 요소를 사용할 수 있습니다. 또한 동일한 서비스 인스턴스(Singleton)를 사용하므로 서비스 내의 데이터를 공유하여 구성 요소 간 데이터 전송에 사용할 수 있습니다.

Angular 컴파일에 대해 AOT와 JIT의 차이점

모든 Angular 애플리케이션에는 브라우저가 이해할 수 없는 구성 요소와 템플릿이 포함되어 있습니다. 따라서 모든 Angular 애플리케이션은 브라우저 내에서 실행되기 전에 컴파일되어야 합니다.

Angular는 두 가지 유형의 컴파일을 제공합니다.

• JIT(Just-in-Time) 컴파일
• AOT(Ahead-of-Time) 컴파일

차이점은 JIT 컴파일에서는 애플리케이션이 컴파일을 실행하는 동안 탐색한다는 것입니다. AOT 컴파일에서는 애플리케이션이 빌드 타임에 컴파일됩니다.
분명히 AOT 컴파일에는 많은 이점이 있으므로 Angular의 기본 컴파일 방법입니다. 주요 이점

• 애플리케이션이 브라우저 내부에서 실행되기 전에 컴파일되기 때문에 브라우저는 실행 가능한 코드를 로드하고 애플리케이션을 즉시 렌더링하므로 렌더링 속도가 빨라집니다.
• AOT 컴파일에서 컴파일러는 애플리케이션과 함께 외부 HTML 및 CSS 파일을 전송하여 해당 소스 파일에 대한 별도의 AJAX 요청을 제거하여 Ajax 요청을 줄입니다.
• 개발자는 빌드 단계에서 오류를 감지하고 처리하여 오류를 최소화할 수 있습니다.
• AOT 컴파일러는 HTML과 템플릿을 브라우저에서 실행하기 전에 JS 파일에 추가합니다. 따라서 읽을 중복 HTML 파일이 없으므로 애플리케이션에 더 나은 보안이 제공됩니다.

Angular 양방향 바인딩

Angular 양방향 바인딩의 원리

Angular 양방향 바인딩은 더티 데이터 검사(Dirty Checking)를 통해 구현됩니다.

• 더티 값 감지의 기본 원리는 이전 값을 저장하고 감지 시 현재 순간의 새 값과 이전 값을 비교하는 것입니다. 동일하면 변경 사항이 없습니다. 그렇지 않으면 변경 사항이 감지되어 뷰를 업데이트해야 합니다.

• Angle2에는 Zone.js가 있습니다. setTimeout의 경우 addEventListener, promise 등은 모두 ngZone에서 실행됩니다(즉, zone.js에 의해 캡슐화되고 다시 작성됩니다). Angular는 ngZone에 해당 후크를 설정하고 해당 더티 검사 처리를 수행하도록 angle2에 알립니다. 그런 다음 DOM을 업데이트합니다.

Angular 양방향 바인딩 효율성 문제

페이지에 바인딩해야 하는 DOM 요소가 엄청나게 많은(수백 또는 수천) 상황에서는 효율성 문제가 필연적으로 발생합니다. (구체적인 내용은 PC 및 브라우저 성능에 따라 달라집니다.) 또한, 더티체크가 10회(경험치?)를 초과하는 경우에는 프로그램에 문제가 있는 것으로 간주하여 더 이상 체크를 실시하지 않습니다.
다음과 같은 방법으로 이를 방지할 수 있습니다.

• 표시에만 사용되는 데이터의 경우 양방향 바인딩 대신 단방향 바인딩을 사용하세요.

• Angular의 데이터 흐름은 하향식이며 상위 구성 요소에서 하위 구성 요소로 한 방향으로 흐릅니다. 단방향 데이터 흐름은 효율적이고 예측 가능한 변경 감지를 보장합니다. 따라서 컴포넌트화는 성능을 향상시키는 수단이기도 합니다.

• 표현식(및 표현식에 의해 호출되는 함수)에 덜 복잡한 논리 작성

• 너무 긴 파이프를 연결하지 마십시오(종종 파이프가 횡단하여 새 배열을 생성하고, anglarJS(v1)에서 파이프(필터라고 함)

• Push의 변경 감지 전략 Angular에는 두 가지 변경 감지 전략이 있습니다. 기본값은 위에서 언급한 더티 체크(dirty check)인 Angular의 기본 변경 감지 전략입니다(값이 변경되는 한 모든 값을 확인하세요). 개발자는 시나리오에 따라 보다 효율적인 변경 감지 방법인 onPush를 설정할 수 있습니다. onPush 전략은 입력 데이터에 대한 참조가 변경되거나 이벤트가 트리거될 때만 구성 요소가 변경 감지를 수행함을 의미합니다.

• NgFor는 trackBy 방정식과 함께 사용해야 합니다. 그렇지 않으면 NgFor는 각 더티 값 감지 프로세스 중에 목록의 각 항목에 대한 DOM을 업데이트합니다.

Angular 데이터 바인딩의 세 가지 방법

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接绑定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
</div>

• 직접 바인딩: 대부분의 경우 이것이 가장 좋은 수행 방법입니다.

• 바인딩 메소드 호출 결과: 각 더티 값 감지 프로세스 동안 클래스 방정식을 한 번 호출해야 합니다. 특별한 요구사항이 없다면 이 사용 방법은 최대한 피해야 합니다.

• pipe 메소드: 바인딩 기능과 유사하며 더티 값 감지 classPipe가 매번 호출됩니다. 그러나 Angular는 파이프를 최적화하고 캐싱을 추가했습니다. 항목이 마지막 시간과 같으면 결과가 직접 반환됩니다.

더 많은 최적화 팁은 Angular 바인딩(더티 검사)에 대한 성능 최적화 팁을 참조하세요

Angular의 모듈에 대하여

Angular의 모듈이란

모듈(Module)은 구성 요소, 서비스 및 파이프를 그룹화하는 장소입니다. 모듈은 이러한 요소를 내보내거나 숨김으로써 다른 모듈이 구성 요소, 지시어 등을 사용할 수 있는지 여부를 결정합니다. 각 모듈은 @NgModule 데코레이터를 사용하여 정의됩니다.

루트 모듈과 기능 모듈의 차이점.

각 Angular 애플리케이션은 하나의 루트 모듈(Root Module)만 가질 수 있으며 하나 이상의 기능 모듈(Feature Module)을 가질 수 있습니다. 루트 모듈은 BrowserModule을 가져오고, 함수 모듈은 CommonModule을 가져옵니다.

Module Lazy-loading

프로젝트 규모가 커지면 첫 화면의 로딩 속도를 높이기 위해 Lazy-loading을 사용하여 특정 특정 URL에 액세스할 때만 로드할 수 있습니다. 일반적으로 사용되지 않습니다.

구현: 정상적으로 기능 모듈을 생성하고 라우팅 구성을 수정합니다. 예:

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

이렇게 하면 컴파일 후 이 기능 모듈은 독립적인 js가 됩니다. 사용자가 URL(~/customers)에 액세스할 때만 이 독립적인 js가 서버에서 요청된 후 로드되고 실행됩니다. .

https://angular.io/guide/lazy-loading-ngmodules를 참고하세요

디렉티브란 무엇인가요?

디렉티브는 기존 요소(DOM)나 컴포넌트(Component)에 동작을 추가하는 데 사용됩니다.
동시에 요소나 구성 요소에 여러 지침을 적용할 수 있습니다.

Promise와 Observable의 차이점

우선, 새로운 버전의 anuglar에서는 Observable(RxJS에 속함) 사용을 권장합니다. 둘째, Observable 객체의 경우 .toPromise()를 사용하여 Promise 객체로 변환할 수 있습니다.

• 그때 불려지든 상관없이 약속하세요. Promise는 즉시 실행됩니다. Observable은 호출(구독)될 때만 생성되고 실행됩니다.

• Promise는 값을 반환하고 Observable은 0에서 N 값을 반환합니다. 따라서 Promise에 해당하는 연산자는 .then()이고 Observable에 해당하는 연산자는 .subscribe

• Observable입니다. 또한 map, filter, Reduce 및 유사한 연산자도 지원합니다.

• Observable은 취소될 수 있지만 Promise는 불가능합니다

Angular의 성능을 향상시키고 싶다면

Angular는 여전히 웹 애플리케이션이므로 웹 성능을 향상시키는 일반적인 기술은 보편적입니다. Angular에는

• AOT 컴파일이라는 몇 가지 특별한 최적화 기술이 있습니다. 앞서 언급했듯이 클라이언트 측에서 컴파일하지 마세요
• 애플리케이션이 최소화되었습니다(추악하고 트리 쉐이킹)
• 불필요한 가져오기 문이 제거되었습니다. 남은 음식이 있으면 포장 시에도 포함됩니다.
• 사용하지 않는 타사 라이브러리가 애플리케이션에서 제거되었는지 확인하세요. 위와 동일합니다.
• 프로젝트 규모가 클 경우 홈페이지 로딩 속도를 보장하기 위해 지연 로딩(Lazy Loading)을 고려하세요.

Angular 버전 업그레이드 방법

Angular CLI는 업그레이드 명령(ng update)을 제공합니다. 동시에 공식 웹사이트(https://update.angular.io/)에도 업그레이드 가이드가 있습니다. 업그레이드할 버전을 선택한 후 단계별 업그레이드 명령이 제공되므로 직접 실행하면 됩니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 배우기를 방문하세요! !

위 내용은 Angular8+ 면접 질문 정리: 기본 지식 포인트 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!