📚각도 면접 문제 1부

이 글은 2021년 면접 문제 리스트와 풍부한 경험과 신입생의 답을 정성들여 기획한 내용을 담고 있다.
이 시리즈의 섹션 1: - Angular Interview Questions Part 1
이 시리즈 섹션 2: - Angular Interview Questions Part 2
이 시리즈 섹션 3: - Angular Interview Questions Part 3

왜 Angular와 같은 클라이언트 프레임워크를 도입해야 합니까?
현대 자바스크립트 프레임워크의 등장으로 고도의 동적 상호작용을 가진 응용 프로그램을 구축하는 것이 더욱 쉬워졌다.
JS 프레임워크는 JavaScript 코드 라이브러리로서 일반적인 프로그래밍 기능 및 작업에 대한 사전 쓰기 코드를 제공합니다.그것은 사실상 웹 사이트나 웹 응용 프로그램을 구축하는 프레임워크이다.
프레임워크는 소프트웨어가 어떻게 구축되는지에 대한 관점을 제공하는 라이브러리이다.이러한 의견은 응용 프로그램이 예측 가능성과 동질성을 가지도록 허용한다.예측 가능성은 소프트웨어를 거대한 규모로 확장할 수 있고 유지보수가 가능하다.예측 가능성과 유지보수성은 소프트웨어의 건강과 수명에 매우 중요하다.
Angular는 구글 Angular팀과 개인과 회사 커뮤니티가 이끄는 웹 응용 프로그램 프레임워크이다.이것은 같은 팀에서 AngularJS를 완전히 다시 쓴 것이다.Angular는 2016년 9월 14일에 정식으로 발표되었다.
Angular는 선언 HTML 템플릿을 사용하는 구성 요소 기반 프레임워크입니다.구축할 때 개발자에게는 투명하고 프레임워크의 컴파일러는 템플릿을 최적화된 자바스크립트 명령으로 변환합니다.

Angular의 라이프 사이클 후크는 무엇입니까?
Angular Lifecycle Hook은 Angular 애플리케이션 구성 요소나 명령이 인스턴스화에서 제거에 이르는 다양한 상태입니다.응용 프로그램의 단계와 조건에 따라 이 생명주기 연결을 호출합니다.
생명주기는 데이터 귀속 속성이 언제 바뀌었는지 각도에서 검사하고 필요에 따라 보기와 구성 요소의 실례를 업데이트합니다.
우리는 이 생명주기 갈고리 중 하나를 사용하여 프로그램의 특정한 이벤트나 상태를 발굴하여 필요에 따라 임무를 수행할 수 있다.
다음은 라이프 사이클 연계입니다.
ngOnChanges(): ngOnInit() 이전에 하나 이상의 데이터 바인딩 입력 속성이 변경되었을 때 호출됩니다.
ngOnInit (): 첫 번째 ngOnChanges () 와 angular에서 구성 요소를 초기화한 후 호출합니다.
ngDoCheck (): 검사 실행을 변경할 때마다 호출되며,ngOnChanges () 와ngOnInit () 다음에 각각 호출됩니다.이 라이프 사이클 연결은 Angular 자체가 감지할 수 없거나 감지할 수 없는 변경 사항을 조작하기 위한 것입니다.
ngAfterContentInit(): 첫 번째 ngDoCheck() 다음에 호출합니다.이 생명주기 갈고리의 목적은angular이 외부 데이터를 구성 요소에 불러온 후에 응답하는 것입니다.
ngAfterContentChecked (): ngAfterContentInit () 와 모든 후속ngDoCheck () 다음에 호출합니다.이 생명주기 연결의 목적은 명령이나 구성 요소에 투사된 내용을 검사하는 것이다.
ngAfterViewInit (): 첫 번째 ngAfterContent Checked () 다음에 한 번 호출합니다.angular가 구성 요소의 보기와 하위 보기를 초기화할 때 이 생명주기 연결을 호출합니다.
ngAfterViewChecked ():ngAfterViewInit () 와 각각의 후속ngAfterContentChecked () 다음에 호출합니다.angular에서 구성 요소의 보기와 하위 보기나 명령을 포함하는 보기를 검사한 후 이 생명주기 연결을 호출합니다.
Ngondestory (): Angular에서 명령이나 구성 요소를 제거하기 전에 즉시 호출합니다.Angular에서 명령이나 구성 요소를 제거하기 전에 이 라이프 사이클 연결을 사용하여 정리할 수 있습니다.구독을 취소하면 대상을 관찰하고 이벤트 처리 프로그램을 분리해서 메모리 유출을 피할 수 있습니다.

구성 요소, 모듈 및 서비스 설명
Angular의 구성 요소는 Angular 응용 프로그램의 주요 구성 요소입니다.기본적으로 각 구성 요소는 4개의 파일로 구성됩니다.html.더 적다ts 및.구성 요소는 기본적으로 층과 논리층을 나타내는 포장기이다.
페이지에 컨텐트를 렌더링하는 HTML 템플릿을 선언합니다.비헤이비어의 Typescript 클래스를 정의합니다.템플릿에서 어셈블리를 사용하는 방법을 정의하는 CSS 선택기
Angular의 모듈은 기본적으로 응용 프로그램의 모든 코드 블록의 컨테이너입니다.프로젝트를 만들 때 만들어진 기본 메인 모듈 (AppModule) 의 모든 서비스, 파이프, 명령, 구성 요소를 설명하고 가져옵니다.우리는 응용 프로그램에 여러 개의 모듈을 만들 수 있으며, 우리의 요구에 따라 지연되거나 빠르게 불러올 수 있습니다.각도 모듈은 @NgModule() 장식부로 정의됩니다.
Angular의 서비스는 Angular 응용 프로그램의 구성 요소 간에 통신을 하고 그들 사이에서 데이터를 공유하는 방식입니다.우리는 서비스를 통해 코드를 모듈화하고 다시 사용할 수 있다. 왜냐하면 그것은 전체 응용 프로그램에서 사용할 수 있기 때문이다.angular의 서비스는 @Injectable () decorator를 사용하여 설명합니다.

무엇이 지령입니까?
명령은 프로그램의 요소에 추가 행동을 추가하는 클래스입니다.명령은 기본적으로 맞춤형 HTML 속성입니다. Angular는 내장된 사용 가능한 속성을 제공합니다. 그 중 일부는 저희가 직접 만들 수 있습니다.
다음은 서로 다른 유형의 지령이다
구조 명령:
DOM 객체를 작성하는 데 도움이 되는 명령 유형입니다.이 두 가지 명령을 사용하면 프로그램에서 DOM 대상을 동적으로 추가하고 삭제할 수 있습니다.
*ngFor: 객체 배열을 반복하여 명령을 사용하는 HTML 요소를 만듭니다.
*ngIf: 지정된 기준에 따라 DOM에서 HTML 요소를 추가하거나 제거합니다.
속성 명령어:
이러한 명령은 HTML 요소, 속성, 속성 및 구성 요소의 모양과 동작을 변경하는 데 도움이 됩니다.
NgClass: CSS 클래스 그룹을 추가하고 제거합니다.
NgStyle: HTML 스타일 세트를 추가하고 제거합니다.
NgModel: HTML 양식 요소에 양방향 데이터 바인딩을 추가합니다.
구성 요소 명령:
템플릿이 있는 명령 유형입니다.이런 유형의 지령은 가장 흔히 볼 수 있는 지령 유형이다.이렇게 지정된 각도 어셈블리도 명령 유형입니다.

무엇이 각형 공유기입니까?
Angular Router는 Angular가 Angular 애플리케이션에 제공하는 라우팅 서비스입니다.응용 프로그램에서 가져오고 사용할 수 있습니다.이 서비스의 라우팅 배열을 지정하고 AppModule로 가져와야 합니다.이 서비스는 각도 프로그램의 다른 구성 요소/보기를 탐색하는 데 사용됩니다.

뿔 재료는 무엇입니까?
Angular Material은 Angular 팀이 구축한 재료 UI 어셈블리 라이브러리로, Angular 응용 프로그램과 원활하게 통합할 수 있습니다.Angular Material은 가장 작고 우아하며 강력한 HTML 요소와 페이지를 만드는 데 도움이 되는 내장형 구성 요소를 제공합니다.이 제품은 간단한 API와 일관된 플랫폼 간 동작을 통해 성능과 신뢰성을 보장하는 검증된 구성 요소로 구성되어 있습니다.
Angular Material은 개발자가 일반적인 상호 작용 모드를 사용하여 사용자 정의 구성 요소를 구축할 수 있는 도구를 제공합니다.그것은 더욱 빠르고 아름답고 응답 속도가 빠른 사이트를 만드는 데 도움이 된다.그것의 영감은 구글의 재질 디자인에서 나왔다.

각도 문자열 보간은 무엇입니까?
각도 문자열 삽입값은 데이터를 논리층에서 표시층으로 연결하는 방법이다.우리는 이런 문자열 삽입값이라고 불리는 메커니즘을 사용하여 html에서 ts변수를 직접 귀속시킬 수 있는데 이 메커니즘은 쌍대괄호로 표시된다.
다음은 하나의 예이다

//ts file
title: String = 'Angular Application';

//html file
{{ title }} 

Angular의 구성 요소 간에 데이터를 어떻게 공유합니까?
다음은 각도 어셈블리 간에 데이터를 공유할 수 있는 가장 일반적인 방법입니다.
@ 입력: @Input 메서드는 데이터를 상위 레벨에서 하위 레벨로 전달하는 데 사용됩니다.
@ 출력: @Ouput 방법은 Event Mitter 기능을 사용하여 데이터를 하위 단계에서 부모 단계로 전달하려고 할 때 사용합니다.
서비스: 서비스는 여러 구성 요소에 걸쳐 데이터를 공유하는 가장 흔한 방식으로 구성 요소의 루트 디렉터리에 설명됩니다.

AngularJS와 AngularJS의 차이점을 나열합니다.
Angular JS는 Angular의 첫 번째 버전으로 Javascript를 기반으로 합니다.여기서 as Angular는 완전히 Typescript를 기반으로 하고 Javascript의 하이퍼집합이며 이전 버전과 호환됩니다.
Angular JS는 범위 및 컨트롤러 용어를 사용하는 JavaScript를 기반으로 하고 Angular는 구성 요소 계층 구조를 사용합니다.AngularJS는 어셈블리를 기반으로 하고 AngularJS는 명령을 사용합니다.
Angular는 현대 웹 응용 프로그램 플랫폼을 바탕으로 한 개의 Angular 코드로 크로스플랫폼 응용 프로그램을 개발할 수 있다.
아래 링크에서 각도 면접 문제 시리즈에 관한 다른 글을 보십시오
이 시리즈의 섹션 1: - Angular Interview Questions Part 1
이 시리즈 섹션 2: - Angular Interview Questions Part 2
이 시리즈 섹션 3: - Angular Interview Questions Part 3