[Angular] 03. 의존성 주입

교재 : [Angular Development with TypeScript]

링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159

*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다.

Chapter03. 의존성 주입

학습목표 : 

1. 디자인 패턴의 정의와 의존성 주입의 장점에 대해 설명할 수 있다.

→비슷한 문제의 해결 방법을 재사용하기 좋은 형태로 정리한 것을 디자인 패턴이라고 하며, 사용하는 프로그래밍 언어나 플랫폼에 따라 다양하게 구현할 수 있다. Angular는 의존성으로 주입되는 객체를 미리 프로바이더에 등록하고, 필요할 때 인스턴스를 생성해서 제공하는 방식을 사용하는데, 의존성 주입 패턴을 사용하면 코드의 결합도를 낮출 수 있고, 원하는 코드만 떼어내서 테스트할 수 있으며, 재사용하기 쉬운 코드를 작성할 수 있다.

학습내용  : 

이번 차시에서는 의존성 주입에 대해 학습합니다.

3차시 학습에서 중요한 키워드는 [제어권 역전 패턴], [인젝터], [프로바이더]입니다.

각 키워드에 대한 설명은 다음과 같습니다.

[제어권 역전 패턴]

제어권 역전 패턴은 의존성 주입 패턴보다 조금 더 추상적인데, 애플리케이션이 프레임워크에 있는 API를 직접 사용하는 대신, 프레임워크가 객체를 만들고 애플리케이션에 전달하는 방식이다. 

[인젝터]

인젝터는 프로바이더 덕분에 무엇을 주입할지 알게 되며, 프로바이더에는 주입되는 객체가 어떤 클래스를 사용하는지 지정하면 된다. 그리고 

[프로바이더]

프로바이더는 인젝터가 무엇을 주입해야 할지 알려주기 위해 사용하며, 프로바이더로 지정된 객체나 값을 인젝터가 생성해서 원하는 컴포넌트에 주입한다.

학습요약 : 

 

• Angular 애플리케이션은 컴포넌트와 디렉티브, 클래스를 조합해서 구성하며, 이중 서로 연관된 객체가 있을 수도 있다. 이때 컴포넌트 코드에서는 의존 관계에 있는 객체의 인스턴스를 명시적으로 생성해서 사용할 수도 있지만, Angular 프레임워크에서 지원하는 의존성 주입 방식을 프레임워크가 생성한 인스턴스를 사용하는 방식이 더 효율적이다. 

• 비슷한 문제의 해결 방법을 재사용하기 좋은 형태로 정리한 것을 디자인 패턴이라고 하며, 사용하는 프로그래밍 언어나 플랫폼에 따라 다양하게 구현할 수 있다. 

• 제어권 역전 패턴은 의존성 주입 패턴보다 조금 더 추상적인데, 애플리케이션이 프레임워크에 있는 API를 직접 사용하는 대신, 프레임워크가 객체를 만들고 애플리케이션에 전달하는 방식이다. 

• Angular는 의존성으로 주입되는 객체를 미리 프로바이더에 등록하고, 필요할 때 인스턴스를 생성해서 제공하는 방식을 사용하는데, 의존성 주입 패턴을 사용하면 코드의 결합도를 낮출 수 있고, 원하는 코드만 떼어내서 테스트할 수 있으며, 재사용하기 쉬운 코드를 작성할 수 있다.

• 의존성 주입 패턴을 사용하면 컴포넌트를 따로 떼어내 테스트할 수 있다. 실제 객체가 동작하지 않더라도, 대신하는 객체를 사용해서 원래 객체의 영향 없이 유닛 테스트하기도 쉽다. 

• Angular 애플리케이션에는 전체 모듈에서 사용하는 루트 인젝터가 있으며, 컴포넌트에서 객체나 기본형 변수, 컴포넌트, 서비스를 주입받으면 컴포넌트 안에도 인젝터를 따로 만든다. 프로바이더는 인젝터가 무엇을 주입해야 할지 알려주기 위해 사용하며, 프로바이더로 지정된 객체나 값을 인젝터가 생성해서 원하는 컴포넌트에 주입한다. 

• 애플리케이션 실행과 동시에 로드되는 모듈은 인젝터를 따로 갖고 있지 않을 수도 있지만, 지연 로딩된 모듈은 보조 인젝터(sub-root injector)를 만들어 사용한다. 

• 인젝터는 프로바이더 덕분에 무엇을 주입할지 알게 되며, 프로바이더에는 주입되는 객체가 어떤 클래스를 사용하는지 지정하면 된다. 그리고 생성자에 인자를 선언하면서 인자의 타입을 지정하면, 인젝터가 그 타입의 인스턴스를 생성해서 주입한다. ProductService 타입의 객체 인스턴스를 컴포넌트 생성자에 주입하려면 다음과 같이 사용한다.

constructor(productService : ProductService)

• 프로바이더는 주입될 토큰과 토큰을 만드는 방법을 매핑하며, @Component 어노테이션에 등록하거나, @NgModule 어노테이션에 등록할 수 있다.

• 프로바이더는 provide 프로퍼티가 있는 객체를 모아 배열을 선언하고 이 배열을 모듈이나 컴포넌트의 providers 프로퍼티 값으로 지정하면 된다. providers는 프로바이더를 등록하는 어노테이션 프로퍼티고, provide는 개별 프로바이더에 사용하는 프로퍼티다. 

• 프로바이더를 등록하는 코드는 다음과 같다.

[{ provide : ProductService, useClass : MockProductService }]  

• provide 프로퍼티에는 객체를 생성하는 함수를 매핑하거나, 클래스를 직접 매핑하며, 위 코드는 ProductService 토큰이 의존성으로 주입될 때 MockProductService 클래스를 사용해서 인스턴스를 생성하라는 의미다. 이때 프로바이더에 지정하는 값은 클래스나 팩토리 함수, 문자열, OpaqueToken 클래스가 될 수 있다.

 인젝터가 클래스를 직접 사용하도록 매핑할 때는 useClass 프로퍼티를 사용한다.

 조건을 판단하기 위해 팩토리 함수를 사용할 때는 useFactory 프로퍼티를 사용해서 팩토리 함수를 지정한다. 이 팩토리 함수는 인자를 받을 수도 있다.

 URL을 지정할 때와 같이 문자열을 간단하게 매핑할 때는 useValue 프로퍼티를 사용한다.

• 외부에서 데이터를 불러올 때는 HTTP 요청을 많이 사용한다. ProductService는 Angular 의존성 주입 메커니즘에 의해 ProductComponent에 주입되는데, ProductService가 HTTP 요청을 보내려면 Http 객체를 의존성으로 갖고 있어야 한다. 

• Angular 애플리케이션은 컴포넌트의 계층으로 구성된다. 웹 페이지를 불러올 때 Angular는 루트 인젝터를 사용해서 애플리케이션 객체를 생성하며, 이 인젝터는 생성된 애플리케이션의 구조를 따라가면서 컴포넌트의 계층을 만들고 컴포넌트 인젝터를 생성한다. 

• 인터페이스 역할을 하는 클래스

 TypeScript에서 인터페이스는 어떤 객체가 구현해야 할 내용을 미리 지정해 두고 이 규격을 따르도록 강제하는 방법이다. 

• JavaScript 호이스팅과 클래스

 클래스 선언은 보통 개별 파일에서 하며, 각 파일의 제일 처음에는 import 키워드로 외부 파일을 불러오기 때문에 클래스 선언은 그 다음이 된다. 

• 지연 로딩 모듈을 사용하면 인젝터를 추가로 생성한다. 이것이 모듈이 로딩되는 시점이 다르기 때문에 자연스러운 과정이며, 같은 이유로 지연 로딩 모듈에 등록된 프로바이더는 해당 모듈 안에서만 사용할 수 있고, 모듈 밖에서는 사용할 수 없다. 

• 의존성으로 주입되는 객체는 이 객체의 프로바이더가 등록되는 객체의 생성 시점과 종료 시점에 맞추어 동시에 생성되거나 종료된다. 즉, 프로바이더가 등록된 객체의 수명과 같다. 

• 의존성으로 주입될 객체는 프로바이더에 등록한다.

• 프로바이더에는 객체뿐 아니라 문자열도 사용할 수 있다.

• 인젝터는 계층을 이루며 구성되고, 컴포넌트 계층에서 원하는 프로바이더를 찾지 못하면 부모 계층의 인젝터를 따라 올라가며 프로바이더를 찾는다.

• providers 프로퍼티에 등록된 객체는 자식 컴포넌트에서도 사용할 수 있지만, viewProviders에 등록된 객체는 그 프로바이더가 선언된 계층에서만 사용할 수 있다.