종속성 역전 원리 익히기: DI를 사용한 깔끔한 코드 모범 사례

객체 지향 프로그래밍에 익숙하거나 이제 막 탐구하기 시작했다면 SOLID라는 약어를 접했을 것입니다. SOLID는 개발자가 깔끔하고 유지 관리 가능하며 확장 가능한 코드를 작성하는 데 도움이 되도록 설계된 일련의 원칙을 나타냅니다. 이번 글에서는 종속성 역전 원리를 뜻하는 SOLID의 "D"에 초점을 맞춰보겠습니다.

자세히 알아보기 전에 먼저 이러한 원칙의 '이유'를 알아보겠습니다.

객체 지향 프로그래밍에서는 일반적으로 애플리케이션을 클래스로 나누고 각 클래스는 특정 비즈니스 논리를 캡슐화하고 다른 클래스와 상호 작용합니다. 예를 들어, 사용자가 장바구니에 제품을 추가할 수 있는 간단한 온라인 상점을 상상해 보세요. 이 시나리오는 매장 운영을 관리하기 위해 함께 작업하는 여러 클래스로 모델링될 수 있습니다. 이 예를 바탕으로 종속성 역전 원칙이 시스템 설계를 어떻게 개선할 수 있는지 살펴보겠습니다.

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}

보시다시피 OrderService 및 ProductService와 같은 종속성은 클래스 생성자 내에서 긴밀하게 결합됩니다. 이러한 직접적인 종속성으로 인해 이러한 구성 요소를 교체하거나 모의하는 것이 어려워지고, 이는 구현을 테스트하거나 교체할 때 문제가 됩니다.

의존성 주입(DI)

종속성 주입(DI) 패턴은 이 문제에 대한 해결책을 제공합니다. DI 패턴을 따르면 이러한 종속성을 분리하고 코드를 더욱 유연하고 테스트 가능하게 만들 수 있습니다. DI를 구현하기 위해 코드를 리팩터링하는 방법은 다음과 같습니다.

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor(private productService: ProductService) {}

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor(private orderService: OrderService) {}

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}


new UserService(new OrderService(new ProductService()));

우리는 각 서비스의 생성자에 종속성을 명시적으로 전달하고 있는데, 이는 올바른 방향으로 나아가고 있지만 여전히 긴밀하게 결합된 클래스로 이어집니다. 이 접근 방식은 유연성을 약간 향상시키지만 코드를 더 모듈화하고 쉽게 테스트할 수 있도록 만드는 근본적인 문제를 완전히 해결하지는 못합니다.

종속성 역전 원리(DiP)

종속성 역전 원칙(DiP)은 다음과 같은 중요한 질문에 답하여 한 단계 더 나아갑니다. 무엇을 통과해야 할까요? 원칙에 따르면 구체적인 구현을 전달하는 대신 필요한 추상화, 특히 예상 인터페이스와 일치하는 종속성만 전달해야 합니다.

예를 들어, 제품 배열을 반환하는 getProducts 메소드가 있는 ProductService 클래스를 생각해 보세요. ProductService를 특정 구현(예: 데이터베이스에서 데이터 가져오기)에 직접 연결하는 대신 다양한 방식으로 구현할 수 있습니다. 한 구현은 데이터베이스에서 제품을 가져올 수 있고, 다른 구현은 테스트를 위해 하드코딩된 JSON 개체를 반환할 수 있습니다. 중요한 점은 두 구현 모두 동일한 인터페이스를 공유하여 유연성과 상호 교환성을 보장한다는 것입니다.

IoC(제어 반전) 및 서비스 로케이터

이 원칙을 실행하기 위해 우리는 제어 반전(IoC)이라는 패턴에 의존하는 경우가 많습니다. IoC는 종속성 생성 및 관리에 대한 제어가 클래스 자체에서 외부 구성 요소로 이전되는 기술입니다. 이는 일반적으로 필요한 종속성을 요청할 수 있는 레지스트리 역할을 하는 종속성 주입 컨테이너 또는 서비스 로케이터를 통해 구현됩니다. IoC를 사용하면 클래스 생성자에 하드코딩하지 않고도 적절한 종속성을 동적으로 주입할 수 있어 시스템을 더욱 모듈화하고 유지 관리하기 쉽게 만들 수 있습니다.

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}

보시다시피 종속성은 컨테이너 내에 등록되어 필요할 때 교체하거나 교체할 수 있습니다. 이러한 유연성은 구성 요소 간의 느슨한 결합을 촉진하므로 주요 이점입니다.

그러나 이 접근 방식에는 몇 가지 단점이 있습니다. 종속성은 런타임에 해결되므로 문제가 발생하면(예: 종속성이 없거나 호환되지 않는 경우) 런타임 오류가 발생할 수 있습니다. 또한 등록된 종속성이 예상 인터페이스와 엄격하게 일치한다는 보장이 없으므로 미묘한 문제가 발생할 수 있습니다. 이러한 종속성 해결 방법은 서비스 로케이터 패턴이라고도 하며 런타임 확인에 대한 의존성과 종속성을 모호하게 할 가능성이 있기 때문에 많은 경우 안티 패턴으로 간주됩니다.

InversifyJS

제어 반전(IoC) 패턴을 구현하기 위해 JavaScript에서 가장 널리 사용되는 라이브러리 중 하나는 InversifyJS입니다. 깔끔하고 모듈화된 방식으로 종속성을 관리하기 위한 강력하고 유연한 프레임워크를 제공합니다. 그러나 InversifyJS에는 몇 가지 단점이 있습니다. 한 가지 주요 제한 사항은 종속성을 설정하고 관리하는 데 필요한 상용구 코드의 양입니다. 또한 특정 방식으로 애플리케이션을 구성해야 하는 경우가 많으며 이는 모든 프로젝트에 적합하지 않을 수 있습니다.

InversifyJS의 대안은 JavaScript 및 TypeScript 애플리케이션의 종속성을 관리하기 위한 가볍고 효율적인 접근 방식인 Friendly-DI입니다. Angular 및 NestJS와 같은 프레임워크의 DI 시스템에서 영감을 얻었지만 더 최소화되고 덜 장황하도록 설계되었습니다.

Friendly-DI의 주요 장점은 다음과 같습니다.

• 작은 크기: 외부 종속성이 없는 2KB에 불과합니다.
• 크로스 플랫폼: 브라우저와 Node.js 환경 모두에서 원활하게 작동합니다.
• 간단한 API: 최소한의 구성으로 직관적이고 사용하기 쉽습니다.
• MIT 라이센스: 허용 라이센스를 갖춘 오픈 소스.

그러나 Friendly-DI는 TypeScript용으로 특별히 설계되었으며 사용을 시작하기 전에 해당 종속성을 설치해야 한다는 점에 유의하는 것이 중요합니다.

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}

또한 tsconfig.json:
을 확장합니다.

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor(private productService: ProductService) {}

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor(private orderService: OrderService) {}

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}


new UserService(new OrderService(new ProductService()));

위의 예는 Friendly-DI로 수정될 수 있습니다:

class ServiceLocator {
 static #modules = new Map();

 static get(moduleName: string) {
   return ServiceLocator.#modules.get(moduleName);
 }

 static set(moduleName: string, exp: never) {
   ServiceLocator.#modules.set(moduleName, exp);
 }
}

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   const ProductService = ServiceLocator.get('ProductService');
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   const OrderService = ServiceLocator.get('OrderService');
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}

ServiceLocator.set('ProductService', ProductService);
ServiceLocator.set('OrderService', OrderService);


new UserService();

1. 보시다시피 @Injectable() 데코레이터를 추가했습니다. 이는 클래스를 주입 가능으로 표시하여 해당 클래스가 종속성 주입 시스템의 일부임을 나타냅니다. 이 데코레이터를 사용하면 DI 컨테이너가 이러한 클래스를 인스턴스화하고 필요한 곳에 주입할 수 있음을 알 수 있습니다.

2. 생성자에서 클래스를 종속성으로 선언할 때 구체적인 클래스 자체에 직접 바인딩하지 않습니다. 대신 인터페이스 측면에서 종속성을 정의합니다. 이를 통해 코드를 특정 구현에서 분리하고 더 큰 유연성을 허용하여 필요할 때 종속성을 더 쉽게 교환하거나 모의할 수 있습니다.

3. 이 예에서는 UserService를 App 클래스에 배치했습니다. 이 패턴을 컴포지션 루트라고 합니다. 컴포지션 루트는 모든 종속성이 조립되고 주입되는 애플리케이션의 중심 위치입니다. 본질적으로 애플리케이션 종속성 그래프의 "루트"입니다. 이 로직을 한 곳에 유지함으로써 앱 전체에서 종속성을 해결하고 주입하는 방법을 더 잘 제어할 수 있습니다.

마지막 단계는 DI 컨테이너에 App 클래스를 등록하는 것입니다. 이를 통해 컨테이너는 애플리케이션이 시작될 때 모든 종속성의 수명 주기와 주입을 관리할 수 있습니다.

npm i friendly-di reflect-metadata

애플리케이션에서 클래스를 교체해야 하는 경우 원본 인터페이스에 따라 모의 클래스를 생성하면 됩니다.

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}

그리고 대체 가능한 클래스를 모의 클래스로 선언하는 대체 메소드를 사용합니다.

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor(private productService: ProductService) {}

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor(private orderService: OrderService) {}

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}


new UserService(new OrderService(new ProductService()));

친절한 DI로 여러 번 교체할 수 있습니다.

class ServiceLocator {
 static #modules = new Map();

 static get(moduleName: string) {
   return ServiceLocator.#modules.get(moduleName);
 }

 static set(moduleName: string, exp: never) {
   ServiceLocator.#modules.set(moduleName, exp);
 }
}

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   const ProductService = ServiceLocator.get('ProductService');
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   const OrderService = ServiceLocator.get('OrderService');
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}

ServiceLocator.set('ProductService', ProductService);
ServiceLocator.set('OrderService', OrderService);


new UserService();

그렇습니다. 이 주제에 대한 의견이나 설명이 있으면 댓글에 의견을 적어주세요.

위 내용은 종속성 역전 원리 익히기: DI를 사용한 깔끔한 코드 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!