Angular 초보자일 때 미리 알았으면 좋았을 것들

Angular는 구글에서 만든 프레임워크다.

똑똑한 친구들은 가장 점유율 높은 크롬이 구글이 만들었으니, 프런트엔드에서는 Angular가 제일 잘나가겠네? 라고 생각할 수 있다.

그러나 그렇지 않다. 한국에서 Angular의 점유율은 낮다.

왜?

잘 모르겠다. 하지만, Angular는 정말 훌륭한 프레임워크다.

1. 라이프 사이클

Angular를 맨 처음 접한 사람이 가장 먼저 봐야하는 건 라이프 사이클이다.

가장 중요한 라이프 사이클은 constructor, ngOnInit 이다.

이 2개가 초보자에게는 가장 헷갈리는 데, 

export class PeekABooDirective implements OnInit {
  @Input() parent;
  @Output() event: EventEmitter<void> = new EventEmitter<void>();

  constructor(private logger: LoggerService) {
    /** A 영역 */
  }

  ngOnInit() {
    /** B 영역 */
  }

  logIt(msg: string) {
    this.logger.log('Hello');
  }
}

둘다 컴포넌트가 만들어질 때 실행된다.

정확한 표현을 하기에는 너무 어려워서 실전성으로 쉽게 설명하자면, constructor는 부모로 부터 받은 Input Property가 들어오기 전에 이 class가 만들어지면서 실행되는 거라고 생각하면 된다.

ngOnInit은 constructor와 부모로부터 받은 Input property가 준비되고 나서 진행된다.

2. Rxjs

Angular에서 제공하는 함수들 중 대부분이 observable 타입이다.

Angular 초보 시절 때 나는, 이 observable을 활용할 줄 몰라서 모두 Promise 처리했다.

Rxjs를 쓰지 못할 바에야 Angular를 쓰지 않고 다른 프레임워크를 사용하는 게 낫다.

Rxjs는 진입장벽이 정말 정말 높다.

거의 외계어나 다름없다. 하지만 적응된다면, 화면과 실시간으로 반응하기 좋은 코드를 만드는 데, Rxjs만큼 훌륭한 라이브러리는 없다.

여기서 놓치기 쉬운건 Observable을 구독을 했다면, C언어처럼 항상 구독 취소를 해줘야 메모리 leak이 나지 않는다.

JS는 GC의 도움을 받지만, 안전하게 구독해제를 꼭 해주자. 메모리 leak을 모른다면, C언어를 공부하자.

3. FormControl

Angular 초보시절에는 FormControl이 너무 싫었다. 그래서 대부분 ngModel이나 이벤트로 input의 변화를 감지하여 처리했다.

FormControl은 Angular 쌩초보자와 제대로 시작하려는 초보자를 나누는 하나의 잣대가 될 수 있다.

FormControl을 제대로 활용하려면 몇가지를 미리 알고 공부를 시작하거나 미리 부딛혀보면 된다.

내가 생각하는 그 몇가지를 소개하겠다.

  • FormControl, FormGroup, FormArray는 AbstractControl으로부터 상속받는다.
  • FormGroup은 FormControl, FormArray를 안에 담을 수 있다.(배열은 아니다)
  • 내가 만든 컴포넌트가 FormControl 제어가 되게 하려면, ControlValueAccessor라는 인터페이스를 구현해야한다.
  • FormControl를 제대로 활용하려면 Angular의 오픈소스를 따라가보면서 계속 읽어보려는 노력이 필요하다.

FormControl은 Angular 프레임워크가 지원하는 정말 강력한 기능 중 하나이다.

잘쓰면 매우매우 복잡한 화면을 실시간으로 제어할 수 있다. (FormControl의 메소드 중 상당수가 Observable을 반환하기 때문)

결론

이렇게 간단히 Angular에 대해 알아보았다.

인터넷에는 프런트엔드 3대장인 React, Vue, Angular를 비교하는 글들이 정말 많은 데, 신입 면접에서 많이 물어본다.

나에게 Angular의 장점이 무엇이냐 묻는 다면,

매우 복잡한 화면에서 실시간으로 반응해야하는 화면을 만들 때 사용하면 편리한 프레임워크라고 말하고 싶다.

이 표현이 실무적 관점에서 정확하게 Angular의 장점을 표현한다고 나는 생각한다.

Categorized in:

Technology,