8 앵귤러 인터뷰 질문과 답변 [2022]

로

Angular 개발자 면접을 앞두고 계신가요? 그렇다면, 이 Angular 면접 질문들로 철저히 준비하는 것이 최선입니다.

만약 당신이 JavaScript 개발자라면, 프론트엔드 개발을 위한 Angular 프레임워크에 대해 익숙할 것입니다. Angular는 현재 전 세계적으로 개발자들에게 가장 수요가 높은 기술 중 하나입니다.

그러나 Angular 프레임워크를 깊이 있게 이해하는 것은 다소 어려울 수 있습니다. 따라서 면접에서 나올 수 있는 모든 질문에 대비하는 것이 중요합니다. 이 가이드는 프레임워크에 대한 이해를 돕고, 면접에 성공하여 커리어를 한 단계 끌어올리는 데 도움을 줄 것입니다.

꿈에 그리던 직업을 얻기 위해 준비해야 할 가장 일반적인 Angular 면접 질문들을 정리했습니다.

Angular 표현식이란 무엇이며, JavaScript 표현식과 어떻게 다른가요?

Angular 표현식은 코더가 `{{ 표현식 }}` 바인딩 내에 배치하는 코드 조각입니다. Angular와 JavaScript 표현식의 주요 차이점은 다음과 같습니다.

  • 데이터를 표시하기 전에 필터를 쉽게 적용할 수 있습니다.
  • JavaScript의 `undefined` 대신 `undefined` 및 `null`을 허용하며, `ReferenceError`나 `TypeError`를 발생시키지 않습니다.
  • 범위 객체를 기준으로 평가됩니다.
  • Angular 표현식에는 예외, 조건, 루프가 포함될 수 없습니다.

데이터 바인딩에 대해 설명해 주세요.

데이터 바인딩은 컴포넌트와 DOM 사이의 연결을 설정하는 데 필수적인 기능입니다. 이를 통해 템플릿과 컴포넌트 사이의 데이터 흐름을 걱정할 필요 없이 대화형 애플리케이션을 쉽게 개발할 수 있습니다. Angular에서는 다음과 같은 다양한 데이터 바인딩 유형이 사용됩니다.

  • 속성 바인딩
  • 양방향 데이터 바인딩
  • 이벤트 바인딩
  • 문자열 보간

Angular의 다양한 생명주기 훅을 살펴보세요.

Angular 생명주기 훅은 컴포넌트의 특정 단계에서 트리거되어 단계 변경을 감지하는 데 사용됩니다. 생명주기 컴포넌트는 크게 `ngOnChanges`, `ngOnInit`, `ngDoCheck`, `ngOnDestroy`의 네 가지 주요 부분으로 나눌 수 있습니다. `ngOnChanges`는 `ngAfterViewInit`, `ngAfterContentInit`, `ngAfterViewChecked`, `ngAfterContentChecked`에도 적용됩니다.

  • `ngOnChanges()`: 컴포넌트의 입력 속성 중 하나 이상이 변경될 때 호출됩니다. 이전 값과 현재 값은 `SimpleChanges` 훅에서 확인할 수 있습니다.
  • `ngOnInit()`: 초기화를 위해 입력 속성과 컴포넌트가 설정된 후 `ngOnChanges` 다음으로 호출됩니다.
  • `ngDoCheck()`: Angular에서 감지할 수 없는 변경 사항을 감지하기 위한 세 번째 단계입니다. 이 훅을 사용하여 사용자 정의 변경 감지 로직을 구현할 수 있습니다.
  • `ngAfterContentInit()`: 컴포넌트가 콘텐츠 프로젝션을 완료한 후 호출되는 훅입니다.
  • `ngAfterContentChecked()`: 콘텐츠 프로젝션 후 모든 후속 `ngDoCheck` 및 `ngAfterContentInit` 응답 후에 호출됩니다.
  • `ngAfterViewInit()`: 컴포넌트의 뷰가 완전히 초기화된 후 하위 컴포넌트의 뷰에 접근할 때 호출됩니다.
  • `ngOnDestroy()`: Angular가 컴포넌트를 파괴하기 직전에 이벤트 핸들러를 분리하고 리소스를 정리하는 데 사용됩니다.

Angular에서 AOT와 JIT의 차이점은 무엇인가요?

많은 사람들이 Angular의 AOT와 JIT 컴파일러를 혼동할 수 있으므로 기본적인 이해가 중요합니다.

  • AOT(Ahead-of-Time) 컴파일러는 빌드 시 서버에서 코드를 컴파일합니다. 반면 JIT(Just-in-Time) 컴파일러는 애플리케이션이 브라우저에서 실행될 때 실시간으로 코드를 컴파일합니다.
  • AOT는 프로덕션 환경에 적합하며, JIT는 Angular 프로젝트 개발 모드에서 코드를 컴파일하는 데 적합합니다.
  • AOT 컴파일에는 `ng build` 명령이 사용되고, JIT 컴파일에는 `ng serve` 명령이 사용됩니다.
  • AOT는 번들 크기를 줄여 렌더링 속도를 향상시키지만, JIT는 파일 매핑 및 디버깅 기능에 더 적합합니다.

RxJS에 대해 설명해 주세요.

RxJS(Reactive Extensions for JavaScript)는 개발자가 반응형 프로그래밍을 구현할 수 있도록 Observable을 제공합니다. Angular에서 RxJS 프레임워크는 콜백 기반 코드 또는 비동기 작업을 처리하는 데 사용됩니다. 데이터 스트림을 발행자에서 구독자로 전달하는 데 도움을 줄 수 있습니다. Angular 외에도 Python, Java와 같은 다른 프로그래밍 언어에서도 반응형 코드를 사용하여 Observable을 활용할 수 있습니다.

Angular 필터의 다양한 유형에 대해 자세히 알아보세요.

Angular는 필터를 사용하여 템플릿, 지시문, 서비스, 컨트롤러에 추가할 수 있는 표현식 값의 형식을 사용자에게 보여줍니다. 요구 사항에 따라 사용자 정의 필터를 만들어 특정 기준에 따라 데이터를 구성할 수 있습니다. 필터는 파이프 기호(`|`) 뒤에 배치됩니다. Angular에서 사용되는 주요 필터는 다음과 같습니다.

  • `number`: 값을 문자열로 변환합니다.
  • `currency`: 숫자를 통화 형식으로 변환합니다.
  • `json`: 모든 객체를 JSON 문자열로 변환합니다.
  • `date`: 날짜 형식을 지정합니다.
  • `limitTo`: 배열이나 문자열의 길이를 제한합니다.
  • `orderBy`: 배열을 특정 기준으로 정렬합니다.
  • `uppercase`: 문자열을 대문자로 변환합니다.
  • `lowercase`: 문자열을 소문자로 변환합니다.
  • `filter`: 주어진 배열에서 특정 부분을 선택합니다.

부트스트래핑을 정의해 주세요.

부트스트래핑은 자동 또는 수동으로 Angular 애플리케이션을 시작하거나 초기화하는 방법입니다. 좀 더 자세히 알아보겠습니다.

  • 자동 부트스트래핑은 HTML 태그에 `ng-app` 지시문을 추가할 때 사용됩니다. Angular는 DOM을 컴파일하고 `ng-app` 지시문을 찾은 다음 해당 모듈에 연결합니다.
  • 수동 부트스트래핑은 개발자에게 Angular 앱 초기화 및 페이지 컴파일을 제어할 수 있는 권한을 부여합니다.

Angular 지시문에 대해 좀 더 자세히 알아볼까요?

Angular 지시문에는 세 가지 주요 유형이 있습니다.

  • 속성 지시문: 요소, 다른 지시문, 컴포넌트의 동작 및 외형을 변경하는 데 사용됩니다. 예를 들어, 요소의 속성으로 `ngStyle` 및 `ngClass`를 사용할 수 있습니다.
  • 컴포넌트: CSS 스타일, TypeScript 코드, HTML 템플릿을 사용하여 단일 사용자 인터페이스를 정의합니다. 컴포넌트는 `@` 기호로 장식되어 Angular 컴파일러가 컴포넌트 템플릿으로 대체할 부분을 지정합니다.
  • 구조 지시문: `ngIf` 지시문과 같이 보기 구조를 변경하여 데이터를 숨기거나 표시하는 데 사용됩니다.

결론

이것은 Angular 면접에서 일반적으로 묻는 필수 질문과 답변입니다. 면접을 준비하고, 성공적으로 면접을 마치고, 꿈에 그리던 직업을 얻는 데 도움이 될 것입니다.

이 내용 외에도 AngularJS에 대해 더 알아보는 것이 좋습니다.

기사를 재미있게 읽으셨나요? 다른 사람들과도 공유해 보세요!