현재 알고 있는 데코레이터는 @Optional(보조 느낌이지만..), @Self, @SkipSelf, @Host, @Inject 정도다. 위 5개의 데코레이터에 대해 작성하려고 한다. 먼저 DI에 대해 이해할 필요가 있으니, 만약 모른다면 아래 글을 참고하도록 하자. [Angular] Service, Dependency Injection(DI)을 왜 사용할까? [Angular] DI를 도와주는 인젝터(Injector), 인젝터 트리(Injector Tree) [Angular] 프로바이더(Provider), 자세히 알아보자 @Optional 의존성 객체를 찾지 못했을 때 에러를 발생하는 대신 null을 주입해준다. export class AppComponent { constructor(@Optional()..

의존성 주입을 위해서는 프로바이더가 있어야 한다는 것을 이전 글을 통해 알았을 것이다. 이 프로바이더에 대해 사용하는 방법과 여러 종류를 알아보고자 한다. 프로바이더(Provider), 사용 방법 프로바이더는 컴포넌트 레벨과 모듈 레벨에서 사용할 수 있다. Angular 6 이후에는 서비스 레벨에서 @Injectable 데코레이터에도 사용할 수 있다. // @NgModule 프로바이더 @NgModule({ ... providers: [FooService] }) // @Component 프로바이더 @Component({ ... providers: [FooService] }) // @Injectable 프로바이더 @Injectable({ providedIn: 'root' }) @Injectable 데코레이터..

의존성 주입 요청에 의해 주입되어야 할 의존성 인스턴스가 있다면 Angular는 이 인스턴스의 주입을 인젝터(Injector)에 요청하게 된다. 이때 인젝터에 대해 알아볼 것이며, 인젝터 트리(Injector Tree)에 대해서도 알아볼 것이다. 인젝터(Injector), 무슨 역할을 하며 어떻게 작동할까? 인젝터는 컴포넌트와 모듈 레벨로 존재한다. 의존성 주입 요청에 의해 프로바이더를 검색하며 인스턴스를 생성하여 의존성 인스턴스를 주입한다. 의존성 주입 요청이 있을 때 마다 매번 의존성 인스턴스를 생성하는 것은 아니다. 인젝터는 인스턴스 풀(Instance pool)인 컨테이너를 관리하고 있다. 인젝터는 의존성 주입 요청을 받으면 프로바이더를 참조하여 요청된 인스턴스가 컨테이너에 존재하고 있는지 검색하..

이 글에 작성될 내용은 개발중 정말 기본적으로 사용해야 하는 내용이지만, 그럼에도 개발 기간이 촉박할 때 마다 이 개념을 무시한채 개발하였다. 다음에는 그러지 않기 위해 다시 한번 정리하여 개념을 바로잡으려 한다. Angular에서의 Service, 무엇일까? Angular에서 개발을 진행할 때 Angular-cli를 이용해 주로 만들던 파일들이 있을 것이다. 바로 Component와 Service이다. # Service Generate ng generate service greeting # 축약어로 ng g s greeting # Component Generate ng generate component greeting # 축약어로 ng g c greeting Angular를 개발해본 사람이라면 알겠지만..

trackBy? Angular에서 특정 배열에 있는 요소를 반복적으로 DOM에 출력하고 싶을 때 ngFor를 사용한다. ngFor는 간편하게 사용할 수 있지만, 아래와 같은 단점이 존재한다. ngFor를 사용하는 배열이 변경 될 경우 모든 DOM이 Refresh 되면서 오버헤드가 발생한다. 이를 개선하기 위해 trackByFunction을 만들어야 한다. 이 trackByFunction의 역할은 아래와 같다. trackBy에 걸려있는 값에 속해있는 요소가 변경되었을 경우에만 Refresh가 발생된다. 즉, Primary key를 정해 trackBy로 잡아주면, 배열의 요소가 변경되었을 때 변경된 것만 Refresh 할 수 있다는 것이다. 위 문장에서 유추할 수 있겠지만, 당연히도 trackBy에는 각 배..

ErrorHandler Class를 구현(Implements)하면 된다. ErrorHandler Class의 구조는 아래와 같다. class ErrorHandler { handleError(error: any): void } 위 Class를 구현하면 모든 오류에 대해서 가져올 수 있다. class MyErrorHandler implements ErrorHandler { handleError(error) { // do something with the exception } } @NgModule({ providers: [{provide: ErrorHandler, useClass: MyErrorHandler}] }) class MyModule {} 모든 기능에서는 오류가 발생했을 때 try... catch 문..