해당 강의는 유데미 "Learn Flutter MVVM Architecture" 강의를 보고 제작하였습니다.
MVVM 모델이란?
MVVM 패턴은 MVC 패턴에서 Controller 를 빼고, Viewmodel 을 추가한 패턴이다.
MVVM 패턴에서는 뷰(UI관련)는 뷰 모델(뷰가 사용할 메서드와 필드)을 알지만, 뷰 모델은 뷰를 알지 못한다. 뷰 모델(뷰가 사용할 메서드와 필드)은 모델(앱에서 사용할 데이터에 관련된 행위와 데이터)을 알지만, 모델은 뷰모델을 알지 못한다.
View
사용자에게 보여지는 UI 부분이 View 이다. 사용자가 스크린을 통해서 보는 것들에 대한 구조, 레이아웃, 형태를 정의하는 것이다. 뷰는 애니메이션 같은 UI 로직을 포함하되 비즈니스 로직을 포함해서는 안된다. (view 를 위한 비즈니스 로직은 view model 에서 정의한다)
View Model
View 를 표현하기 위해 만들어진 View 를 위한 모델이다. 프레젠테이션 로직과 뷰를 위한 상태를 다룬다. View 가 사용할 메서드와 필드를 구현하고, 뷰에게 상태 변화를 알린다. 뷰 모델과 모델은 일대다 관계를 형성한다. (뷰 모델은 모델과 communicate 함)
뷰에서 서로 다른 두 모델의 데이터를 활용한 데이터가 필요하다면 뷰에서 모델의 값을 조작하는 게 아닌, 뷰 모델에서 두 모델의 데이터를 가공하고 뷰에서는 오직 UI 만 다루도록 해야 한다.
Model
어플리케이션에서 데이터베이스, remote api 등 사용되는 데이터와 그 데이터를 처리하는 부분이다. 비즈니스 로직과 유효성 검사와 데이터를 포함하는 앱의 도메인 모델로 생각할 수 있다. 쉽게 말하면 앱에서 사용할 데이터에 관련된 행위와 데이터를 다룬다.
특징
MVVM 패턴은 커맨드 패턴과 data binding 두 가지 패턴을 사용하여 구현된다. 커맨드 패턴과 Data Binding 을 이용하여 View 와 View Model 사이의 의존성을 없앤 것이다.
MVVM 패턴에서는 뷰 모델을 사용하여 뷰 모델이 모델과 뷰 사이의 어댑터로서 기능한다. 그 결과, 변경이 생겼을 때 변경을 최소화 할 수 있다.
플러터란?
Flutter는 Google에서 개발하고 관리하는 오픈 소스 모바일 앱(Application) 개발 프레임워크(Framework)이다. 이 프레임워크는 Android와 iOS 등 다양한 플랫폼에서 동작하는 앱을 개발하기 위해 사용되며, 모바일 앱(Application)의 개발 속도를 높이기 위한 다양한 기능과 도구를 제공한다.
Flutter는 Dart라고 하는 언어를 사용한다. 다트는 구글이 멀티 플랫폼 상에서 동작되도록 하는 앱을 위해 디자인된 프로그래밍 언어이며, 기본적으로 C언어의 문법과 거의 같으며 기존 프로그래밍 언어들의 특징들이 많이 보인다.
안드로이드 스튜디오 플러터 세팅
우선 안드로이드 스튜디오가 설치되어 있다고 가정한다.
Flutter SDK 설치는 아래 사이트에서 본인의 OS 에 맞게 설치하면 된다. 해당 설치 zip 파일을 원하는 위치에 압축 해제 한다.
나는 Document/Work/SDK 폴더를 생성하여 그 안에 flutter 폴더를 넣어주었다.
그 후 path 설정을 위해
vim ~/.zshrc로 편집기를 열고,
export PATH=$PATH:{flutter폴더 위치}/flutter/bin
flutter로 절대경로를 지정해주면 끝이다.
(ex) export PATH=$PATH:/Users/aengzu/Documents/Work/SDK/flutter/bin/flutter )
적용을 위해
source ~/.zshrc을 입력한다.
그 후, 안드로이드 스튜디오에 들어가서 Flutter 플러그인을 설치해준다. 플러그인에서 Flutter 를 검색하여 flutter install 버튼을 누르면 된다.
설치가 되었다면 메인에서
new flutter project 버튼을 눌러서 프로젝트를 생성한다.
MVVM 모델을 위한 폴더 구조
다음처럼 lib 폴더 내부에 Data, Model, Repository, Resources, View, ViewModel, Utilities 폴더를 생성한다.
Data : 이 폴더는 앱에서 사용되는 데이터와 관련된 파일을 포함한다. 여기에는 네트워크 요청, 데이터베이스 접근, API 클라이언트 등 데이터 관리 및 처리를 위한 클래스나 함수들이 포함된다.
Model : 앱에서 사용되는 데이터 모델을 정의합니다. 이러한 모델은 앱 내에서 데이터를 나타내는 기본 구조로, 보통 JSON 형태의 데이터를 오브젝트로 변환하는 데 사용된다.
Repository : 데이터 소스와 앱 사이의 중간 계층을 관리한다. 이 폴더에 있는 클래스나 함수는 데이터 소스(예: 원격 서버, 로컬 데이터베이스)에서 데이터를 가져와 모델에 맞게 변환하거나, 앱에서 생성한 데이터를 저장소에 전달하는 역할을 한다.
Resources : 자원(Resources) 폴더는 문자열, 이미지, 아이콘, 스타일 등과 같은 앱에서 사용되는 모든 정적 자원을 포함한다. 이 폴더를 통해 앱의 모든 자원을 한 곳에서 관리할 수 있다.
View : 뷰(View) 폴더는 앱의 사용자 인터페이스를 담당한다. 이 폴더에는 화면, 위젯, UI 컴포넌트 등 사용자에게 보여지는 모든 요소들이 포함된다.
ViewModel : 뷰모델(ViewModel) 폴더는 UI와 모델 사이의 데이터 및 이벤트 처리를 담당한다. 사용자의 입력을 처리하고, 모델을 업데이트하며, 필요한 경우 뷰에 변화를 알린다.
Utilitis : 앱 전반에 걸쳐 재사용 가능한 유틸리티 함수나 헬퍼 클래스들이 포함된다. 이들은 앱 내 여러 곳에서 공통적으로 사용되는 기능들을 제공한다.
