자바스크립트를 예로 들어서 의존성 역전 원칙(Dependency Inversion Principle, DIP)

의존성 역전 원칙(Dependency Inversion Principle, DIP)

자바스크립트를 예로 들어서 의존성 역전 원칙(Dependency Inversion Principle, DIP)을 설명해드리겠습니다.

 

가정해봅시다. 우리는 웹 애플리케이션을 개발하고 있으며, 서버에서 데이터를 가져오는 DataFetcher 모듈이 필요합니다. 초기에는 DataFetcher 모듈이 직접 서버와 통신하고 데이터를 가져오는 기능을 가지고 있습니다.

class DataFetcher { 
    fetchData(url) { // 서버와 통신하여 데이터를 가져오는 로직 
		return fetch(url).then((response) => response.json()); 
    } 
}

이렇게 구현된 DataFetcher 클래스는 외부 의존성을 가지고 있으며, 직접 서버와 통신하고 데이터를 가져오는 책임을 갖고 있습니다.

그러나 추후에 데이터 소스가 변경되어 다른 방식으로 데이터를 가져와야 할 때 문제가 발생할 수 있습니다. 예를 들어, 서버 대신 로컬 스토리지에서 데이터를 가져오는 기능을 추가해야 한다고 가정해봅시다. 이 경우 DataFetcher 클래스를 수정하여 새로운 로직을 추가해야 합니다. 이는 OCP(개방 폐쇄 원칙)에 위배될 수 있습니다.

이제 DIP를 적용하여 문제를 해결해보겠습니다. 먼저, 추상화된 인터페이스를 도입하여 DataFetcher 클래스가 의존하는 구체적인 데이터 소스에 대한 의존성을 역전시킵니다. 예를 들면 다음과 같습니다

 

class DataFetcher { 
	constructor(dataSource) { 
    	this.dataSource = dataSource;
    } 
    fetchData(url) { 
    	return this.dataSource.fetch(url);
    }
} 

class ServerDataSource { 
	fetch(url) { 
    	return fetch(url).then((response) => response.json());
    } 
} 

class LocalStorageDataSource { 
	fetch(url) { 
    	// 로컬 스토리지에서 데이터를 가져오는 로직 // ... 
    } 
}

위의 코드에서 DataFetcher 클래스는 DataSource 인터페이스에만 의존하도록 변경되었습니다. DataFetcher 클래스는 생성자를 통해 구체적인 데이터 소스를 주입받습니다.

이제 새로운 데이터 소스를 추가하려면 단순히 DataSource 인터페이스를 구현하는 새로운 클래스를 만들고, DataFetcher 객체를 생성할 때 해당 클래스의 인스턴스를 주입해주면 됩니다. 예를 들어:

 

const serverDataSource = new ServerDataSource();
const dataFetcher = new DataFetcher(serverDataSource);

dataFetcher.fetchData('http://example.com/api/data'); 

const localStorageDataSource = new LocalStorageDataSource(); 
const dataFetcher2 = new DataFetcher(localStorageDataSource);

dataFetcher2.fetchData('http://example.com/api/data');

이제 새로운 데이터 소스를 추가하려면 단순히 새로운 데이터 소스 클래스를 만들고, DataFetcher 객체를 생성할 때 해당 클래스의 인스턴스를 주입해주기만 하면 됩니다. 이는 DIP를 따르는 자바스크립트 코드의 예입니다.

 

결론 

 

조금 더 쉽게 이해하자면 재사용성을 높이기 위해 추상화를 한 클래스에서 덜 추상화된 클래스에 의존성이 있으면 안된다. 의존성이 있으면 별도의 클래스를 생성해야 돼서 재사용성이 떨어집니다. 추상화한 클래스에서는 의존성도 추상화 해야 됩니다.