## 과제

- Q&A
- Angular Concepts
1. Component와 Directive의 차이점을 설명하시오.

* Component는 Directive에 포함되는 개념.
* @Component 데코레이터는 @Directive에 template이 포함된 확장된 형태로 구현되어 있습니다.
* 컴포넌트는 일종의 템플릿을 가진 디렉티브이며 앵귤러의 핵심 구성 요소.
* 디렉티브는 DOM을 관리하기 위한 지시자로서 앱 전역에서 사용가능한 로직을 컴포넌트에서 분리하여 구현 한 것.
* 구조 지시자(Structural Directive) - DOM 요소를 추가하거나 삭제하는 등 화면의 구조를 변경할 때 사용하는 지시자입니다.
* 속성 지시자(Attribute Directive) - 선언된 DOM의 모습이나 동작을 조작하는데 사용하는 지시자입니다.
*
🤔 궁금한 Point
* 그래서 View가 정확히 무엇인가요?
* 하나의 컴포넌트에서 여러개의 View를 끌어온다는 의미는?
* Attribute란 무엇인가?
* Property VS Attribute
* Property -> HTML의 속성 ( 변경 불가능 )
* DOM Element에 대괄호를 이용해서 바인딩 https://angular.kr/guide/built-in-directives
* Attribute -> DOM의 속성 ( 변경 가능함 )
* DOM attribute binding -> [attr.속성이름](/IaliL2_gSM-FbUbgSQZXBQ) = ""

2. Component간 통신을 위한 방법을 모두 설명하시오
1. 부모 - 자식 관계일 때
* @Input (부모 -> 자식)
* @Output (자식 -> 부모) (ex 이벤트) https://angular.kr/guide/inputs-outputs

3. 서로 다른 트리에 존재할 때
* 서비스
* Observable

🤔 궁금한 Point
* 서비스와 Observable의 차이?

3. Content Projection에 대해 설명하시오
* 데이터 전달이 아닌, 뷰에 직접 접근해서 (ex 제이쿼리 돔조작) 조작하는 것.
* https://blog.angular-university.io/angular-ng-content/

1. @ViewChild, @ViewChildren, @ContentChild, @ContentChildren
* https://stackoverflow.com/questions/55391290/what-is-the-difference-between-view-dom-and-content-dom
* ContentChild - 자식의 첫번째
* ContentChildren - 자식들 배열

4. Angular가 Dependency Injection을 활용하는 이유, 장점, 단점이 있다면 어떤 것이 있는지 설명하시오.
* https://poiemaweb.com/angular-service✨✨

* 장점
- 느슨한 의존성을 통한 사이드이펙트 방지
- 등등

* 단점
- 의존성 주입을 위한 선행작업이 필요함.
- 코드를 추적하고 읽기가 어려워짐.

5. Service를 Providing 할 수 있는 방법을 모두 설명하시오.
* 서비스 메타데이터(@[Injectable])에 자신의 프로바이더를 직접 등록하는 방법
* `@NgModule()`이나 `@Component()` 메타데이터에 프로바이더를 등록하고 하위 계층에서 이 프로바이더를 이용하는 방법
* https://angular.kr/guide/dependency-injection

6. Provider의 종류에 대해서 설명하시오

> 프로바이더(provider)
Provider 인터페이스로 구현한 객체입니다.
의존성으로 주입되는 객체를 어떻게 만드는지 정의한 것입니다.
프로바이더 객체는 DI 토큰에 해당하는 의존성 객체를 어떻게 얻어와야 할지 정의합니다.

> 인젝터(injector)는 프로바이더에 정의된 대로 새로운 인스턴스를 만들고, 주입받기를 요청한 클래스에 이 인스턴스를 주입합니다.
Angular의 기본 서비스는 모든 인젝터에 등록되어 있습니다. 그래서 개발자는 애플리케이션에 추가로 필요한 프로바이더만 등록하면 됩니다.

- useClass
- useValue
- useFactory

> 참고 https://ourcstory.tistory.com/438

- Change Detection
1. angular의 change detection 에 대하여 설명하시오
2. onPush, changeDetectorRef

* OnPush
변화감지는 바로 앵귤러가 DOM을 업데이트할 것인지 확인하는 작업을 말하며, 이는 위의 사용자 이벤트와 비동기 함수가 실행될 때마다 빈번하게 발생합니다. 변화감지는 크고 복잡한 어플리케이션일스록 불필요하게 자주 발생하여 매우 낭비적이기 때문에 앵귤러는 개발자가 직접 DOM을 렌더링할 것인지를 결정할 수 있도록 변화감지 인터페이스를 제공합니다. 바로 Change Detection Strategy를 @Component 데코레이터의 changeDetection key로 설정해주기만 하면 됩니다.

@Component({
	selector: ‘app-root’,
	templateUrl: ‘./app.component.ts’,
	changeDetection: ChangeDetectionStrategy.OnPush
})

ChangeDetectionStrategy에서 설정가능한 값으로 OnPush와 Default가 있는데,

- Default는 말그대로 무조건 변화감지를 실행하는 전략이고,
- **OnPush는 실제 레퍼런스가 변경되었는지를 확인하여 레퍼런스가 변경되었을 때만 하위 컴포넌트에게 change detection을 수행합니다.** 아래의 상황에서 변화 감지를 수행하게 됩니다.

- @Input() 데이터가 변경
- DOM 엘리먼트가 변경
- changeDetectorRef 수행

규모가 큰 앱일수록 컴포넌트에 OnPush 변화감지 전략을 설정할 것을 권장하지만, OnPush가 언제 DOM을 업데이트하는지 이해하는 것이 중요합니다.
>참고 https://iamsjy17.github.io/angular/2020/05/05/angular-change-detection.html

- Reactive Forms
1. FormGroup, FormArray, FormControl에 대해 설명하시오.
* Form을 어떻게 묶는지에 따라 구분될 것
1. FormGroup, FormArray, FormControl 모두 루트 컨트롤이 될 수 있는가?
2. setValue 메서드와, patchValue의 차이점을 설명하시오
3. Validator, Async Validator에 대해서 설명하시오
4. (심화) FormControl, FormControlName, FormControlDirective은 각각 어떤 역할을 하며 어떤 관련이 있는지 설명하시오
- HttpClient
1. HttpInterceptor에 대해 설명하시오
1. HttpInterceptor는 왜 HttpClient 보다 먼저 Providing 되어야 하는지 설명하시오
2. HttpInterceptor가 여러개 있을 때 실행되는 순서에 대해서 설명하시오

## Control Value Accessor
- 개념
- Form 내에 Component 형식으로 어떤 조건이나 특수한 경우를 삼는 Custom Form Component를 만들고 싶을 때 사용합니다. Form Control과 Custom Form Component가 서로 데이터를 주고 받아야하기 때문에 이를 위해 ControlValueAccessor를 사용합니다.

## 실습
### Reactive Forms 실습 1
5. focus 벗어났을 때, Validation 체크
- [링크 참고](https://indepth.dev/posts/1311/the-update-on-option-in-angular-forms)
### Reactive Forms 실습 3
- Change Detection
- Default
- any browser event
- setInterval() / setTimeout()
- XMLHttpRequest
- OnPush
- input ref changed
- component event handler
- manual change
- async pipe
- 예시
- B에서 이벤트 발생
- Root -> A -> B
- A(onPush) - onPush니까 4가지경우 일때만 리렌더링 해줘야겠다
- B(onPush, markForCheck) - onPush이긴 하지만 markForCheck가 되어있으니 비동기 통신일때도 리렌더링 해줘야겠다.
- [ngDoCheck 예제](https://stackoverflow.com/questions/45521588/angular-ngdocheck-gets-called-even-with-changedetectionstrategy-onpush)
- ngDoCheck는 4가지 경우를 벗어나고 자신만의 체크를 만들고 싶을 때 사용한다.
- [markforcheck 참고 링크](https://stackblitz.com/edit/angular-6r1dfi?file=src%2Fapp%2Fchild.component.ts)
- https://stackoverflow.com/questions/47923376/change-detection-cycle-in-angular-clarification

### chapter1-cva.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-chapter1-cva',
  templateUrl: './chapter1-cva.component.html',
  styleUrls: ['./chapter1-cva.component.css'],
})
export class Chapter1CvaComponent implements OnInit {

  constructor() {}

  code1 = `{
  "value": {
    "firstName": "John",
    "lastName": "Smith",
    "age": 25,
    "address": {
      "streetAddress": "21 2nd Street",
      "city": "New York",
      "state": "NY",
      "postalCode": "10021"
    },
    "phoneNumber": [{
      "type": "home",
      "number": "212 555-1234"
    }, {
      "type": "fax",
      "number": "646 555-4567"
    }]
  }
}`;

  form = new FormGroup({
    value: new FormControl(),
  });

  ngOnInit(): void {
  }
}