Flutter 앱개발을 위한 MVVM아키텍처 - 4부 폴더(패키지) 구조

MVVM아키텍처를 적용하게 되면 아래와 같은 폴더구조가 된다

 

아래 폴더 구조를 기본으로 추가적인 화면이나 도메인이 추가될때 마다 확장해나가면 될것이다.

/data
     /model
	    - post.dart
     /repository
	    - post_repository.dart
     /datasource
	    - local_datasource.dart
	    - remote_datasource.dart
/ui
    /post
        - post_list_view.dart
        - post_list_viewmodel.dart
        - post_detail_view.dart
        - post_detail_viewmodel.dart
        - post_pages.dart

/ui

View와 ViewModel에 해당하는 파일들이 있으며, 하나의 주제 혹은 도메인 단위로 폴더를 생성한다.

/ui/post (게시물)

일반적인 게시물의 목록과 상세정보를 보여주는 화면이 있다고 가정하자. 이럴 경우
게시물 목록은 list로 / 게시물 상세는 detail로 정의하고 파일을 만들어 보겠다.

list (게시물 목록)

• post_list_view.dart
  PostListView 클래스
• post_list_viewmodel.dart
  PostListViewModel 클래스

detail (게시물 상세)

• post_detail_view.dart
  PostDetailView 클래스
• post_detail_viewmodel.dart
  PostDetailViewModel 클래스

page (게시물 관련 page들을 파일하나에서 정의함)

1. post_pages.dart
   PostListPage / PostDetailPage

/data/model

model 클래스 파일들이 위치한다.

만약 게시물 model 클래스를 생성한다면 post.dart 파일에 Post클래스가 될것이다.

/data/repository

Repository파일들이 위치하며, repository파일은 각 도메인 별로 하나씩 생성한다.
게시물에 대한 repository는 post_repository.dart 라는 이름으로 [도메인]_repository.dart형태로 이름을 짓는다.

post ( 게시물 repository)

• post_repository.dart
  PostRepository 클래스가 구현되어 있으며, ViewModel에서 post와 관련된 정보가 필요할때 이곳을 통해서 가져가게 된다.

/data/datasource

RemoteDataSource와 LocalDataSource가 위치한다.

RemoteDataSource

• remote_datasource.dart
  RemoteDatasource가 구현되어 있으며, API서버와 통신에 필요한 모든 함수들이 구현되어 있다.
• local_datasource.dart
  LocalDatasource가 구현되어 있으며, 로컬에 저장된 정보를 가져오는 모든 함수들이 구현되어 있다.

ui 폴더에는 view와 viewModel을 각 연관된 화면 단위로 하나의 폴더에 묶어서 배치하고,
data 폴더에는 도메인별로 구분된 repository와, remote/local datasource 만들어 배치한다.

 

 

위에서 정의한  폴더 구조가 flutter만을 위한 특별한 구조는 아니다.  android를 개발할때 사용는 구조도 위와 거의 유사한 형태였다.

사실 모바일 앱개발이  android, ios, flutter 모두 비슷한 요구사항을 반영 해야 하기 때문에 대부분 위와 같은 구조를 많이 사용할것 이다.

 

 

> 5부 - DI와 테스트 코드에서 계속