GaramX

사용자 도구

사이트 도구

현재 위치: home » angular » dependency-injection
추적: • component • dependency-injection • component-interaction • advanced_type • type_inference • jquery • cheat_sheet
angular:dependency-injection

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
angular:dependency-injection [2019/01/15 04:09] – [DI as a design pattern] taekguangular:dependency-injection [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
 +====== Angular의 의존성 주입 ======
 +의존성 주입(Dependency injection, DI)은 애플리케이션 디자인 패턴 중에서도 아주 중요한 패턴입니다. Angular는 독자적인 의존성 주입 시스템을 제공하고 있기 때문에, 이 패턴을 활용하면 Angular 애플리케이션을 좀 더 효율적인 모듈 형태로 구성할 수 있습니다.
 +
 +의존성(dependencies)은 어떤 클래스가 동작하기 위해 필요한 서비스나 객체를 의미합니다. 그리고 __**의존성 주입 패턴은 이 의존성을 직접 생성하지 않고 외부 어딘가에서 받아오도록 요청하는 패턴**__입니다.
 +
 +Angular에서는 클래스의 인스턴스가 생성될 때 이 클래스에 필요한 __의존성을 프레임워크가 생성__해서 전달합니다. 이 문서는 Angular에서 의존성 주입이 어떻게 동작하는지, 의존성 주입을 활용하면 애플리케이션을 얼마나 효율적이면서 유연한 구조로 작성할 수 있는지 설명합니다. 의존성 주입을 사용하면 테스트하기 편하고 유지보수하기도 좋은 애플리케이션을 구현할 수 있습니다.
 +
 +
 +<WRAP center round info 80%>
 +한 파일에 클래스를 여러개 정의하면 이 파일을 접하는 많은 사람들에게 혼란을 줄 수 있습니다. 일반적으로 컴포넌트와 서비스는 파일 하나에 하나씩 정의하는 것을 권장합니다.
 +
 +그런데 어떤 이유로 컴포넌트와 서비스를 한 파일에 정의해야 한다면 서비스를 먼저 정의하고 컴포넌트를 나중에 정의하세요. 서비스보다 컴포넌트를 먼저 정의하면 런타임 null 참조 에러가 발생합니다.
 +
 +그리고 이 블로그에서 설명한 것처럼 forwardRef() 메소드를 사용하면 컴포넌트를 먼저 정의할 수도 있습니다.
 +
 +forwardRef() 메소드는 순환 참조를 방지할 때도 사용합니다. DI Cookbook에서 설명하는 예제를 참고하세요.
 +</WRAP>
 +
 +
 +===== 의존성으로 주입할 서비스 클래스 정의하기 =====
 +<code bash>
 +ng generate service heroes/hero
 +</code>
 +CLI생성한 소스는
 +<code javascript src/app/heroes/hero.service.ts>
 +import { Injectable } from '@angular/core';
 +
 +@Injectable({
 +  providedIn: 'root',
 +})
 +export class HeroService {
 +  constructor() { }
 +}
 +</code>
 +Angular 서비스를 정의하는 코드에서 ''@Injectable()''이 가장 중요합니다. 그리고 이전에 목 데이터를 반환하던 로직은 클래스 코드에서 getHeroes 메소드가 제공하도록 하려면 다음과 같이 구현할 수 있습니다. (실제 앱에서는 목 데이터를 반환하는 대신 리모트 서버에서 비동기로 데이터를 가져오게 될 것입니다. 지금은 서비스를 의존성으로 주입하는 것에만 집중하기 위해 이 부분은 생략합니다.)
 ===== Dependency Injection (DI) ===== ===== Dependency Injection (DI) =====
  
줄 4: 줄 39:
   * DI as a design pattern   * DI as a design pattern
   * DI as a framework   * DI as a framework
- 
 ==== DI as a design pattern ==== ==== DI as a design pattern ====
 DI is a coding pattern in which a class receives its dependencies from external sources rather then creating them itself. DI is a coding pattern in which a class receives its dependencies from external sources rather then creating them itself.
줄 26: 줄 60:
 var myCar = new Car(myEngine, myTires, depA, depB, depZ); var myCar = new Car(myEngine, myTires, depA, depB, depZ);
 </code> </code>
 +<code javascript>
 +var myEngine = new Engine();
 +var myTires = new Tires();
 +var depA = new dependency();
 +var depB = new dependency();
 +var depAB = new dependency();
 +var depZ = new dependency(depAB);
 +var myCar = new Car(myEngine, myTires, depA, depB, depZ);
 </code> </code>
angular/dependency-injection.1547525398.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구