Angular 플래시카드

카테고리 후원자

Angular는 Google에서 개발하고 유지 관리하는 웹 애플리케이션 구축을 위한 강력한 프레임워크입니다. 처음에는 동적 애플리케이션을 위한 HTML 확장으로 만들어졌으나, 이제는 확장 가능하고 효율적인 단일 페이지 애플리케이션(SPA)을 구축하기 위한 종합 플랫폼으로 발전했습니다. TypeScript와 컴포넌트 기반 아키텍처를 활용하여 Angular는 복잡하고 상호작용적인 사용자 인터페이스를 만들고 애플리케이션 상태를 관리할 수 있는 도구를 제공합니다.

우리의 플래시카드 앱에는 신중하게 선정된 Angular 면접 질문과 포괄적인 답변이 포함되어 있어, Angular 지식이 필요한 어떤 면접에도 효과적으로 대비할 수 있습니다. IT 플래시카드는 구직자만을 위한 도구가 아닙니다 - 현재의 경력 계획에 관계없이 지식을 강화하고 테스트할 수 있는 훌륭한 방법입니다. 앱을 정기적으로 사용하면 최신 Angular 트렌드를 지속적으로 파악하고 높은 수준의 기술을 유지할 수 있습니다.

우리 앱의 샘플 Angular 플래시카드

App Store 또는 Google Play에서 저희 앱을 다운로드하여 더 많은 무료 플래시카드를 받거나, 모든 플래시카드에 액세스하려면 구독하세요.

Angular에서 HTTP 인터셉터를 사용하여 요청 및 응답을 관리하는 방법을 설명하십시오.

Angular에서 HTTP Interceptor는 HTTP 요청과 응답을 조작하는 데 사용됩니다. 이들은 요청을 가로채서 수정한 후 전달할 수 있습니다. 또한 응답을 가로채서 수정한 후 전달할 수도 있습니다. HTTP Interceptor를 사용하려면 HttpInterceptor 인터페이스를 구현하는 서비스를 생성해야 합니다.

다음은 인터셉터를 애플리케이션에 추가하는 방법을 나타내는 코드입니다:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // 여기서 요청을 수정합니다
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // 여기서 요청을 넘깁니다
    return next.handle(modifiedReq);

  }

}

인터셉터가 정의되면, 이를 애플리케이션 모듈의 프로바이더 배열에 추가해야 합니다:
@NgModule({
  ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true },
  ],
  ...
})
export class AppModule { }

'multi'가 true로 설정되어 있습니다. 이것은 여러 인터셉터를 추가할 수 있게 하며, 이들은 제공된 순서대로 실행됩니다. 인터셉터의 순서가 중요하다는 것을 기억해야 합니다. 이는 각 이후의 인터셉터가 이전에 하나의 요청을 받으므로, 이전 인터셉터에 의해 만들어진 어떤 변경 사항도 다음 인터셉터에게 보이게 됩니다.

Angular 컴포넌트에서 @Input() 및 @Output()을 사용하여 데이터 바인딩은 어떻게 작동합니까?

데이터 바인딩은 Angular 프로그래밍의 핵심적인 측면입니다. 이를 통해 컴포넌트 간에 데이터를 동적으로 전송할 수 있습니다. 데이터 바인딩에는 두 가지 기술이 포함되어 있습니다: @Input과 @Output.

@Input은 부모 컴포넌트에서 자식 컴포넌트로 값의 전송을 허용합니다. 이것은 소위 단방향 데이터 바인딩 기술이라고 할 수 있으며 - 데이터는 컴포넌트 계층구조의 상단에서 하단으로 흐릅니다. 우리는 부모 컴포넌트에게 보여야 하는 변수를 표시하기 위해 이것을 사용합니다.

@Input 사용 예:
<!--parent.component.html-->
<app-child [childMessage]="parentMessage"></app-child>

// parent.component.ts
parentMessage = "Hello from parent";

// child.component.ts
import {Component,Input }  from '@angular/core';
//..
@Input() childMessage: string;

위의 예에서 parent.component.ts의 `parentMessage`가 child.component.ts의 `childMessage`로 전달됩니다.

반면에, @Output은 반대 방향으로의 통신을 가능하게 합니다 - 자식 컴포넌트에서 부모 컴포넌트로. 이것은 소위 이벤트 바인딩 기술입니다. @Output () 데코레이터를 사용하여 자식 컴포넌트에서 이벤트를 트리거하고 부모 컴포넌트에서 그것을 처리할 수 있습니다.

@Output 사용 예:
<!--parent.component.html-->
<app-child (messageEvent)="receiveMessage($event)"></app-child>

// parent.component.ts
receiveMessage($event) {
  this.message = $event
}

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
//..
@Output() messageEvent = new EventEmitter<string>();

이 경우에서, child.component.ts에서 `messageEvent`가 트리거되면, parent.component.ts의 `receiveMessage` 함수가 호출되고 `messageEvent`에 의해 전송된 값을 받게 됩니다.

NgModel이란 무엇이며 Angular 폼에서 어떻게 사용됩니까?

NgModel은 양방향 데이터 바인딩을 형성하기 위해 사용되는 Angular 지시자입니다. 양방향 데이터 바인딩이란, 모델에서 뷰로, 뷰에서 모델로 데이터를 전송할 수 있다는 것을 의미합니다. 실제로, 이는 사용자가 폼 필드에서 만든 변경 사항이 데이터 모델에 반영되며, 데이터 모델에 대한 변경 사항이 폼에 보이게 됨을 의미합니다.

NgModel 지시자를 폼에서 사용하는 것은 매우 간단합니다. 적절한 폼 요소에 위치시키고 [(ngModel)] 문법을 사용하여 적절한 모델 필드에 바인딩합니다.

예를 들어:
<form>
  <label for="name">Name:</label>
  <input id="name" [(ngModel)]="person.name">

  <label for="age">Age:</label>
  <input id="age" [(ngModel)]="person.age">
</form>

여기에서 "person.name"와 "person.age"는 해당 폼 필드에 바인딩된 데이터 모델 필드입니다. 이러한 폼 필드에서 사용자가 만든 모든 변경 사항은 자동으로 "person" 모델에 반영됩니다.

NgModel 지시자를 사용하려면, 애플리케이션 모듈에서 FormsModule를 가져와야 한다는 것을 기억하세요.

Angular에서 Zone.js란 무엇이며 어떻게 애플리케이션 성능에 영향을 미칩니까?

Zone.js는 JavaScript에서 비동기 작업의 추적을 허용하는 라이브러리입니다. Angular의 맥락에서, Zone.js는 변경 감지 메커니즘의 핵심 구성 요소입니다.

Zone.js는 "zones"라는 개념을 도입하는데, 이들은 전역 실행 컨텍스트입니다. 이 "zones"는 "트리"를 생성하며, 각 비동기 작업은 항상 작업을 시작한 동일한 zone에서 발생합니다. 결과적으로, 우리는 작업이 언제 시작되고 언제 끝나는지 추적할 수 있습니다.

예시:
첫 번째 작업은 setTimeout을 트리거할 수 있으며, 다음 작업은 이벤트 루프의 다음 라운드에 예정됩니다. 이들은 두 개의 별개의 작업이지만, Zone.js는 우리가 이들을 하나의 전체로 추적할 수 있게 합니다 - 이것이 비동기 추적입니다.

Angular에서는 Zone.js가 프레임워크에게 언제 변경 감지를 시작할지 알려주는데 사용됩니다. 모든 사용자 조작, 타이머, http 요청은 "angular zone"에서 수행됩니다. "angular zone"에서의 작업들이 완료되면, Angular는 자동으로 변경 감지를 트리거합니다.

이 메커니즘을 통해 Angular는 뷰를 새로 고칠 때가 적절한 시점을 알 수 있습니다. 그래서 Zone.js는 성능에 있어서 매우 중요합니다. Zone.js가 없다면, Angular는 변경 감지를 트리거할 시기를 알아내기 위해 폴링과 같은 기술을 활용해야 할 것이며, 이는 매우 비효율적일 것입니다.

Zone.js는 Angular의 성능에 긍정적인 영향을 미치지만, 부정적인 영향도 끼칠 수 있습니다. 어플리케이션이 애플리케이션 상태에 영향을 미치지 않는 많은 양의 비동기 작업을 수행한다면, Angular는 여전히 변경 감지를 트리거합니다. 많은 수의 작업들의 경우, 이는 성능을 저하시킬 수 있습니다. 이를 방지하기 위해, 이러한 작업들을 "angular zone" 외부에서 실행할 수 있습니다.

다운로드 IT 플래시카드 지금

우리의 플래시카드로 Angular 지식을 확장하십시오.
프로그래밍 기초부터 고급 기술 마스터리까지, IT 플래시카드는 IT에서의 우수성을 향한 여권입니다.
지금 다운로드하여 오늘의 경쟁력 있는 기술 세계에서의 잠재력을 발견하세요.