Vue의 repository pattern을 사용하여 API 연동(1)

프로젝트를 진행함에 있어 API연동을 해야하는 순간이 왔다.. 바로 배우고 적용시켜보자

(1)편 : Repository pattern이란 뭔지에 대해 간단히 알아보기 

(2)편 : Vue.js에서 Repository pattern적용방법 

📌Repository Pattern이란?

Repository(리포지토리) 패턴은 디자인 패턴 중 하나로, 데이터가 있는 여러 저장소(Local, Remote)를 추상화하여 중앙 집중처리 방식을 구성하고, 데이터를 사용하는 로직을 분리시키기 위한 디자인 패턴이다.

ViewModel은 필요한 데이터를 Repository에 요청하고 Repository는 적절한 저장소에서 요청받은 데이터를 가져온다.

Repository가 추상화되어 있기 때문에 ViewModel은 언제나 같은 인터페이스로 데이터를 요청할 수 있으며, 실제로 어떤 데이터를 사용하는지 전혀 알 필요가 없기 때문에 앱 환경에 맞는 적절한 데이터를 사용하기에 편리하다.

 

👉repository design patten을 사용해야 하는 이유

1. 데이터 로직을 분리시킬 수 있다.
2. 중앙 집중처리 방식으로, 언제나 일관된 인터페이스로 데이터를 요청할 수 있다.
3. 그렇기 때문에,클라이언트가 어떤 데이터를 사용할지 선택할 필요 없이 어떤 데이터를 가져올지는 Repository에서 결정하여 적절한 데이터를 제공한다.
4. 단위 테스트를 통해 검증이 가능하다.
5. 새로운 데이터 로직 코드를 쉽게 추가할 수 있다.

👉이해하기

1. Repository가 추상화 되어 있기 때문에 ViewModel에서의 코드 수정 없이도 언제나 같은 인터페이스로 요청할 수 있으며 다양한 환경에 맞는 데이터를 사용할 수 있다.
2. Repository는 데이터 저장소에 있는 데이터 객체를 캡슐화하고 더 객체 지향적인 구조를 제공한다.
3. 모델과 비즈니스 로직을 깔끔하게 분리하며 ViewModel ->Model간의 단방향 의존성 구조를 구현한다.
4. 수많은 ViewModel에서의 호출 또는 복잡한 쿼리를 사용하는 경우 더욱 효과적이다.
5. 특히 위와 같은 경우, 같은 로직의 중복을 최소화하는데 큰 이점이 된다.

• 참고자료) Consuming APIs Using the Repository Pattern in Vue.js