Vuejs Clean Architecture
Vuejs2 Clean Architecture
Vuejs 는 MVVM 아키텍쳐(다소 독자적인?)를 사용하고 있다.
따라서 튜토리얼만 보고 잘 따라했다면 이미 HTML 부분인 View 와 script 부분인 ViewModel 을 구분하여 데이터바인딩을 통해 뷰가 갱신되는 구조로 만들었을 것이다.
ViewModel은 별도의 Model이나 Service을 거쳐서 Domain Layer로부터 레포지토리 또는 저장소에 자료수집을 한다. 또는 별도의 Model을 거치지 않아도 된다.
Vuejs에서 클린아키텍쳐로 구성한다면
데이터를 저장할때는 ViewModel -> UseCase -> Repository(또는 저장소) 순으로 저장이 이루어 지고,
데이터를 수집할때는 View <–binding–>VieModel<-get & result->UserCase<-get & result->Repository 순으로 갱신되도록 설계하면 된다.
Vuejs3 라면 TypeScript로 Domain Object와 Date Object를 통해 데이터객체의 흐름과 파악이 용이 하게 할수도 있다. 또한 DI도 Vuejs3에서 지원을 해준다니 좀더 깔끔하게 작성할수있을 것 같다.
Domain Layer, Data Layer를 순수함수로 만들어 테스트가 용이하고 가능하도록 하는게 좋다.
각 Layer별로 클린하게 작성했다면 TDD도 어렵지 않을 것이다.
0 comments:
댓글 쓰기