Vue3 외부라이브러리 추상화

Third party 라이브러리를 Application에 적용할 때, 의존성을 최대한 분리하는 것이 유지보수에 유리하다.

 

예를 들어 Vue3에서 외부라이브러리 Element-plus를 사용하려고 할 때,

추상화 없이 el-radio를 직접 사용한다면

추후 radio 표시를 취소 가능하게 해달라는 요구사항이 들어왔을 때,

모든 컴포넌트를 돌며, el-radio를 수정해주어야 합니다.

하지만 el-radio를 특정 컴포넌트에 의존하도록 만들면 유지보수에 훨씬 용이합니다.

이는 소프트웨어 공학에서 나오는 SOLID 원칙 중 D에 해당하는 DIP(Dependency Inversion Principle) '의존관계 역전 원칙'의 내용으로 객체는 저수준 모듈 보다 고수준 모듈에 의존해야한다는 원칙에 해당되는 내용 입니다,

앞선 예에서 변화하기 쉬운 부분, 저수준 모듈에 해당하는 것이 el-radio가 될 것이고, 추상화된 인터페이스, 아래 그림의 Radio Input이 고수준 모듈 입니다.