Photly 프로젝트에서 중요하게 생각하였던 부분 중 하나가 코드의 완성도였습니다. 이를 위해 아키텍처 패턴에 대한 고민은 필수적이었습니다.
아키텍처 패턴이란 소프트웨어어 아키텍처의 공통적인 발생 문제에 대한 일반적인, 재사용 가능한 해결책을 의미합니다.
디자인 패턴과 차이가 있다면 디자인 패턴은 특정 유형의 문제를 해결하기 위한 패턴으로 아키텍처 패턴보다 좁은 개념입니다.
MVC, MVP, MVVM 패턴은 특정 문제 해결이 아닌 시스템의 전반적인 아키텍처로 아키텍처 패턴이라고 부르는 것이 적합합니다.
대표적인 아키텍처 패턴으로는 MVC, MVP, MVVM 세 가지가 있다.
Model: 사용되는 데이터의 형태를 정의하고 데이터를 처리하는 부분
View: 사용자에게 보여지는 UI 부분
Controller: 사용자의 입력을 받고 처리하는 부분
Controller를 통해 사용자의 입력을 받고 Model을 업데이트하면 View는 Model을 통해 View를 업데이트합니다.
단순한 어플리케이션을 제작한다면 사용해볼만하나, 확장성을 생각한다면 지양하는 것이 나을 것
Model: 사용되는 데이터의 형태를 정의하고 데이터를 처리하는 부분
View: 사용자에게 보여지는 UI 부분
Presenter: 사용자의 입력을 받고 처리하는 부분
MVC와 달리 View를 통해 사용자의 입력을 받고 Presenter를 통해 Model을 업데이트하면 다시 Presenter를 거쳐 View를 업데이트합니다.
MVC에 비해 계층의 분리가 명확해졌으나 View가 많은 복잡한 프로젝트의 경우에는 Presenter도 비례하여 많아져 비대해질 것
Model: 사용되는 데이터의 형태를 정의하고 데이터를 처리하는 부분
View: 사용자에게 보여지는 UI 부분
ViewModel: View에서 필요한 데이터를 처리하는 부분
View를 통해 사용자의 입력을 받아 ViewModel로 보내면 ViewModel은 Model에 데이터를 요청하여 처리하고 저장한다. View는 직접 ViewModel과의 데이터 바인딩을 통해 View를 업데이트한다. ViewModel은 View에 직접 데이터를 전달하지 않는다.
레이어간에 가장 의존도가 적은 아키텍처 패턴으로 코드의 분리를 통한 생산성이 크게 높아진다. 다만 규모가 작은 프로젝트의 경우 ViewModel의 설계로 생산성이 오히려 낮아질 것 같다.
비록 1인 프론트엔드 작업으로 진행되지만 다른 무엇보다도 프로젝트의 확장성을 고려하여 레이어 간 의존도가 더욱 확실하게 분리된 MVVM 패턴을 본 프로젝트의 아키텍처 패턴으로 선정하게 되었다.
또한 향후 더 큰 규모의 프로젝트를 진행하는데에 있어 MVVM 아키텍처 패턴에 대한 경험은 필수적이라고 생각하였다.
실제로 Flutter에서 권장되던 BLOC 패턴 또한 MVVM 패턴과 유사합니다.
총 5개의 Layer로 나누어서 사용하였다
View / ViewModel / Model (Repository / Model / DataSource)
View
다양한 위젯으로 UI를 구성
ViewModel
Provider를 통한 상태 관리 (State Management)를 통해
비지니스 로직 처리 중 필요한 데이터는 Data Layer을 통해 받요청
Model (Repository / Model / DataSource)
Appilcation 전체에 필요한 데이터를 제공
Repository
1. ViewModel에서 Repository에 필요한 정보를 요청
2. Repository은 요청받은 데이터를 획득하여 ViewModel에 반환
DataSource
외부 혹은 로컬의 데이터를 가져오거나 갱신
프로젝트 규모가 커지면 도메인별로 따로 클래스를 만들어 사용하는 것을 권장
MVVM 아키텍처는 확장성을 가져가기에 우수한 아키텍처 패턴
확장성을 위한 생산성에 집중하기 위하여 세부적인 설계가 필요하고 이에 따라 코드의 양이 많아지는 것은 사실입니다. 그러나 이를 통해 의존성을 조절하여 추후 기능의 추가, 수정, 삭제 등의 작업에서 타 부분에 영향을 최소화하여 수행을 할 수 있다는 점이 가장 좋았던 점이었습니다.