git_clone/learn-flutter
1
0
Fork 0
mirror of https://github.com/ChangJoo-Park/learn-flutter.git synced 2025-06-08 05:33:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update sidebars

Browse source
This commit is contained in:
ChangJoo Park(박창주) 2025-05-15 14:32:55 +09:00
parent 45e2692851
commit de8cce04b4
3 changed files with 287 additions and 277 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
sidebar.config.mjs
View file

@ -110,7 +110,6 @@ export const sidebars = [
items: [ items: [
{ label: "기능별 vs 계층별 폴더 구조", slug: "part9/folder-structure" }, { label: "기능별 vs 계층별 폴더 구조", slug: "part9/folder-structure" },
{ label: "멀티 모듈 아키텍처", slug: "part9/multi-module" }, { label: "멀티 모듈 아키텍처", slug: "part9/multi-module" },
{ label: "melos를 이용한 모노레포", slug: "part9/monorepo", badge: "🚧" },
], ],
}, },
{ {

442
src/content/docs/part9/folder-structure.md → src/content/docs/part9/folder-structure.mdx
View file

@ -1,6 +1,7 @@
--- ---
title: 기능별 vs 계층별 폴더 구조 title: 기능별 vs 계층별 폴더 구조
--- ---
import { FileTree } from '@astrojs/starlight/components';
Flutter 프로젝트를 시작할 때 가장 중요한 결정 중 하나는 코드를 어떻게 구성할 것인지 결정하는 것입니다. 적절한 프로젝트 구조는 코드의 가독성을 높이고, 확장성을 향상시키며, 팀 협업을 원활하게 합니다. 이 문서에서는 두 가지 주요 프로젝트 구조 접근 방식인 '기능별 구조'와 '계층별 구조'에 대해 살펴보고, 각각의 장단점 및 적합한 사용 사례를 분석합니다. Flutter 프로젝트를 시작할 때 가장 중요한 결정 중 하나는 코드를 어떻게 구성할 것인지 결정하는 것입니다. 적절한 프로젝트 구조는 코드의 가독성을 높이고, 확장성을 향상시키며, 팀 협업을 원활하게 합니다. 이 문서에서는 두 가지 주요 프로젝트 구조 접근 방식인 '기능별 구조'와 '계층별 구조'에 대해 살펴보고, 각각의 장단점 및 적합한 사용 사례를 분석합니다.
@ -21,53 +22,57 @@ Flutter 프로젝트를 시작할 때 가장 중요한 결정 중 하나는 코
### 계층별 구조의 기본 예시 ### 계층별 구조의 기본 예시
``` <FileTree>
lib/
├── models/ # 데이터 모델 클래스 - lib/
│ ├── user.dart - models/ # 데이터 모델 클래스
│ ├── product.dart - user.dart
│ └── order.dart - product.dart
├── views/ # UI 컴포넌트 및 화면 - order.dart
│ ├── home_screen.dart - views/ # UI 컴포넌트 및 화면
│ ├── product_screen.dart - home_screen.dart
│ └── profile_screen.dart - product_screen.dart
├── controllers/ # 비즈니스 로직 및 상태 관리 - profile_screen.dart
│ ├── auth_controller.dart - controllers/ # 비즈니스 로직 및 상태 관리
│ ├── product_controller.dart - auth_controller.dart
│ └── order_controller.dart - product_controller.dart
├── services/ # 외부 서비스 통신 (API, 데이터베이스 등) - order_controller.dart
│ ├── api_service.dart - services/ # 외부 서비스 통신 (API, 데이터베이스 등)
│ ├── storage_service.dart - api_service.dart
│ └── analytics_service.dart - storage_service.dart
├── utils/ # 유틸리티 함수 및 상수 - analytics_service.dart
│ ├── constants.dart - utils/ # 유틸리티 함수 및 상수
│ ├── extensions.dart - constants.dart
│ └── helpers.dart - extensions.dart
└── main.dart - helpers.dart
``` - main.dart
</FileTree>
### 계층별 구조의 변형: MVVM 패턴 ### 계층별 구조의 변형: MVVM 패턴
``` <FileTree>
lib/
├── data/ - lib/
│ ├── models/ # 데이터 모델 - data/
│ ├── repositories/ # 데이터 액세스 계층 - models/ # 데이터 모델
│ └── data_sources/ # 로컬/원격 데이터 소스 - repositories/ # 데이터 액세스 계층
├── domain/ - data_sources/ # 로컬/원격 데이터 소스
│ ├── entities/ # 비즈니스 모델 - domain/
│ ├── repositories/ # 리포지토리 인터페이스 - entities/ # 비즈니스 모델
│ └── usecases/ # 비즈니스 규칙 및 로직 - repositories/ # 리포지토리 인터페이스
├── presentation/ - usecases/ # 비즈니스 규칙 및 로직
│ ├── pages/ # 화면 - presentation/
│ ├── widgets/ # 재사용 가능한 UI 컴포넌트 - pages/ # 화면
│ └── viewmodels/ # 뷰 모델 (상태 관리) - widgets/ # 재사용 가능한 UI 컴포넌트
├── core/ - viewmodels/ # 뷰 모델 (상태 관리)
│ ├── utils/ # 유틸리티 함수 - core/
│ ├── constants/ # 상수 - utils/ # 유틸리티 함수
│ └── theme/ # 앱 테마 - constants/ # 상수
└── main.dart - theme/ # 앱 테마
``` - main.dart
</FileTree>
### 계층별 구조의 장점 ### 계층별 구조의 장점
@ -91,72 +96,72 @@ lib/
### 기능별 구조의 기본 예시 ### 기능별 구조의 기본 예시
``` <FileTree>
lib/
├── features/ - lib/
│ ├── auth/ # 인증 관련 기능 - features/
│ │ ├── data/ - auth/ # 인증 관련 기능
│ │ │ ├── repositories/ - data/
│ │ │ └── models/ - repositories/
│ │ ├── domain/ - models/
│ │ │ └── usecases/ - domain/
│ │ └── presentation/ - usecases/
│ │ ├── pages/ - presentation/
│ │ │ ├── login_page.dart - pages/
│ │ │ └── signup_page.dart - login_page.dart
│ │ ├── widgets/ - signup_page.dart
│ │ └── providers/ - widgets/
│ │ - providers/
│ ├── products/ # 제품 관련 기능 - products/ # 제품 관련 기능
│ │ ├── data/ - data/
│ │ ├── domain/ - domain/
│ │ └── presentation/ - presentation/
│ │ ├── pages/ - pages/
│ │ │ ├── product_list_page.dart - product_list_page.dart
│ │ │ └── product_detail_page.dart - product_detail_page.dart
│ │ ├── widgets/ - widgets/
│ │ └── providers/ - providers/
│ │ - profile/ # 프로필 관련 기능
│ └── profile/ # 프로필 관련 기능 - data/
│ ├── data/ - domain/
│ ├── domain/ - presentation/
│ └── presentation/ - core/ # 공통 기능
│ - network/
├── core/ # 공통 기능 - storage/
│ ├── network/ - theme/
│ ├── storage/ - utils/
│ ├── theme/ - main.dart
│ └── utils/
│ </FileTree>
└── main.dart
```
### 기능별 구조의 변형: DDD(Domain-Driven Design) 적용 ### 기능별 구조의 변형: DDD(Domain-Driven Design) 적용
``` <FileTree>
lib/
├── application/ # 애플리케이션 서비스 (UseCase) - lib/
│ ├── auth/ - application/ # 애플리케이션 서비스 (UseCase)
│ ├── products/ - auth/
│ └── profile/ - products/
├── domain/ # 도메인 모델 및 규칙 - profile/
│ ├── auth/ - domain/ # 도메인 모델 및 규칙
│ ├── products/ - auth/
│ └── profile/ - products/
├── infrastructure/ # 인프라 계층 (리포지토리 구현, 데이터 소스) - profile/
│ ├── auth/ - infrastructure/ # 인프라 계층 (리포지토리 구현, 데이터 소스)
│ ├── products/ - auth/
│ └── profile/ - products/
├── presentation/ # UI 계층 - profile/
│ ├── auth/ - presentation/ # UI 계층
│ ├── products/ - auth/
│ └── profile/ - products/
├── shared/ # 공통 기능 - profile/
│ ├── constants/ - shared/ # 공통 기능
│ ├── extensions/ - constants/
│ └── widgets/ - extensions/
└── main.dart - widgets/
``` - main.dart
</FileTree>
### 기능별 구조의 장점 ### 기능별 구조의 장점
@ -179,126 +184,125 @@ lib/
### 계층별 구조 예시 ### 계층별 구조 예시
```dart <FileTree>
lib/
├── models/ # 데이터 모델 - lib/
│ ├── user.dart - models/ # 데이터 모델
│ ├── product.dart - user.dart
│ └── order.dart - product.dart
├── providers/ # Riverpod 프로바이더 - order.dart
│ ├── auth_provider.dart - providers/ # Riverpod 프로바이더
│ ├── product_provider.dart - auth_provider.dart
│ └── cart_provider.dart - product_provider.dart
├── repositories/ # 데이터 액세스 계층 - cart_provider.dart
│ ├── auth_repository.dart - repositories/ # 데이터 액세스 계층
│ ├── product_repository.dart - auth_repository.dart
│ └── order_repository.dart - product_repository.dart
├── screens/ # 화면 위젯 - order_repository.dart
│ ├── auth/ - screens/ # 화면 위젯
│ │ ├── login_screen.dart - auth/
│ │ └── signup_screen.dart - login_screen.dart
│ ├── products/ - signup_screen.dart
│ │ ├── product_list_screen.dart - products/
│ │ └── product_detail_screen.dart - product_list_screen.dart
│ └── profile/ - product_detail_screen.dart
│ └── profile_screen.dart - profile/
├── widgets/ # 재사용 위젯 - profile_screen.dart
│ ├── product_card.dart - widgets/ # 재사용 위젯
│ ├── custom_button.dart - product_card.dart
│ └── loading_indicator.dart - custom_button.dart
├── router/ # GoRouter 설정 - loading_indicator.dart
│ └── router.dart - router/ # GoRouter 설정
├── utils/ # 유틸리티 - router.dart
│ ├── constants.dart - utils/ # 유틸리티
│ └── extensions.dart - constants.dart
└── main.dart - extensions.dart
``` - main.dart
</FileTree>
### 기능별 구조 예시 ### 기능별 구조 예시
```dart <FileTree>
lib/
├── features/ - lib/
│ ├── auth/ - features/
│ │ ├── models/ - auth/
│ │ │ └── user.dart - models/
│ │ ├── repositories/ - user.dart
│ │ │ └── auth_repository.dart - repositories/
│ │ ├── providers/ - auth_repository.dart
│ │ │ └── auth_provider.dart - providers/
│ │ ├── screens/ - auth_provider.dart
│ │ │ ├── login_screen.dart - screens/
│ │ │ └── signup_screen.dart - login_screen.dart
│ │ └── widgets/ - signup_screen.dart
│ │ ├── login_form.dart - widgets/
│ │ └── social_login_buttons.dart - login_form.dart
│ │ - social_login_buttons.dart
│ ├── products/ - products/
│ │ ├── models/ - models/
│ │ │ └── product.dart - product.dart
│ │ ├── repositories/ - repositories/
│ │ │ └── product_repository.dart - product_repository.dart
│ │ ├── providers/ - providers/
│ │ │ └── product_provider.dart - product_provider.dart
│ │ ├── screens/ - screens/
│ │ │ ├── product_list_screen.dart - product_list_screen.dart
│ │ │ └── product_detail_screen.dart - product_detail_screen.dart
│ │ └── widgets/ - widgets/
│ │ └── product_card.dart - product_card.dart
│ │ - cart/
│ └── cart/ - models/
│ ├── models/ - cart_item.dart
│ │ └── cart_item.dart - repositories/
│ ├── repositories/ - cart_repository.dart
│ │ └── cart_repository.dart - providers/
│ ├── providers/ - cart_provider.dart
│ │ └── cart_provider.dart - screens/
│ ├── screens/ - cart_screen.dart
│ │ ├── cart_screen.dart - checkout_screen.dart
│ │ └── checkout_screen.dart - widgets/
│ └── widgets/ - cart_item_widget.dart
│ └── cart_item_widget.dart - core/
│ - router/
├── core/ - router.dart
│ ├── router/ - theme/
│ │ └── router.dart - app_theme.dart
│ ├── theme/ - widgets/
│ │ └── app_theme.dart - custom_button.dart
│ ├── widgets/ - loading_indicator.dart
│ │ ├── custom_button.dart - utils/
│ │ └── loading_indicator.dart - constants.dart
│ └── utils/ - extensions.dart
│ ├── constants.dart - main.dart
│ └── extensions.dart
│ </FileTree>
└── main.dart
```
## 하이브리드 접근 방식 ## 하이브리드 접근 방식
많은 실제 프로젝트에서는 두 가지 접근 방식을 혼합하여 사용합니다. 다음은 하이브리드 구조의 예시입니다: 많은 실제 프로젝트에서는 두 가지 접근 방식을 혼합하여 사용합니다. 다음은 하이브리드 구조의 예시입니다:
``` <FileTree>
lib/
├── features/ # 주요 기능별 구성 - lib/
│ ├── auth/ - features/ # 주요 기능별 구성
│ ├── products/ - auth/
│ └── cart/ - products/
│ - cart/
├── shared/ # 공유 컴포넌트 - shared/ # 공유 컴포넌트
│ ├── models/ # 공통 모델 - models/ # 공통 모델
│ ├── widgets/ # 공통 위젯 - widgets/ # 공통 위젯
│ ├── services/ # 공통 서비스 - services/ # 공통 서비스
│ └── utils/ # 유틸리티 - utils/ # 유틸리티
│ - core/ # 핵심 인프라
├── core/ # 핵심 인프라 - network/ # 네트워크 관련
│ ├── network/ # 네트워크 관련 - storage/ # 로컬 스토리지
│ ├── storage/ # 로컬 스토리지 - di/ # 의존성 주입
│ ├── di/ # 의존성 주입 - router/ # 라우팅
│ └── router/ # 라우팅 - main.dart
│
└── main.dart </FileTree>
```
이 접근 방식은 다음과 같은 이점을 제공합니다: 이 접근 방식은 다음과 같은 이점을 제공합니다:

121
src/content/docs/part9/multi-module.md → src/content/docs/part9/multi-module.mdx
View file

@ -1,6 +1,7 @@
--- ---
title: 멀티 모듈 아키텍처 title: 멀티 모듈 아키텍처
--- ---
import { FileTree } from '@astrojs/starlight/components';
대규모 Flutter 프로젝트에서는 코드베이스가 커짐에 따라 빌드 시간 증가, 유지보수 복잡성, 팀 협업 어려움 등의 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위한 방법 중 하나가 멀티 모듈 아키텍처입니다. 이 문서에서는 Flutter에서 멀티 모듈 아키텍처를 구현하는 방법, 장단점, 그리고 실제 적용 사례를 살펴보겠습니다. 대규모 Flutter 프로젝트에서는 코드베이스가 커짐에 따라 빌드 시간 증가, 유지보수 복잡성, 팀 협업 어려움 등의 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위한 방법 중 하나가 멀티 모듈 아키텍처입니다. 이 문서에서는 Flutter에서 멀티 모듈 아키텍처를 구현하는 방법, 장단점, 그리고 실제 적용 사례를 살펴보겠습니다.
@ -35,27 +36,29 @@ Flutter에서 멀티 모듈 아키텍처를 구현하는 여러 방법이 있습
#### 프로젝트 구조 예시 #### 프로젝트 구조 예시
``` <FileTree>
my_flutter_project/
├── app/ # 메인 앱 모듈 - my_flutter_project/
│ ├── lib/ - app/ # 메인 앱 모듈
│ ├── pubspec.yaml - lib/
│ └── ... - pubspec.yaml
├── packages/ - ...
│ ├── core/ # 핵심 기능 모듈 - packages/
│ │ ├── lib/ - core/ # 핵심 기능 모듈
│ │ └── pubspec.yaml - lib/
│ ├── feature_auth/ # 인증 기능 모듈 - pubspec.yaml
│ │ ├── lib/ - feature_auth/ # 인증 기능 모듈
│ │ └── pubspec.yaml - lib/
│ ├── feature_home/ # 홈 기능 모듈 - pubspec.yaml
│ │ ├── lib/ - feature_home/ # 홈 기능 모듈
│ │ └── pubspec.yaml - lib/
│ └── feature_profile/ # 프로필 기능 모듈 - pubspec.yaml
│ ├── lib/ - feature_profile/ # 프로필 기능 모듈
│ └── pubspec.yaml - lib/
└── pubspec.yaml # 루트 pubspec.yaml (옵션) - pubspec.yaml
``` - pubspec.yaml # 루트 pubspec.yaml (옵션)
</FileTree>
#### 각 모듈의 pubspec.yaml 설정 #### 각 모듈의 pubspec.yaml 설정
@ -275,29 +278,31 @@ void setupServiceLocator() {
### 기능 모듈 예시 ### 기능 모듈 예시
``` <FileTree>
feature_auth/
├── lib/ - feature_auth/
│ ├── src/ - lib/
│ │ ├── data/ - src/
│ │ │ ├── models/ - data/
│ │ │ ├── repositories/ - models/
│ │ │ └── datasources/ - repositories/
│ │ ├── domain/ - datasources/
│ │ │ ├── entities/ - domain/
│ │ │ ├── usecases/ - entities/
│ │ │ └── repositories/ - usecases/
│ │ ├── presentation/ - repositories/
│ │ │ ├── pages/ - presentation/
│ │ │ ├── widgets/ - pages/
│ │ │ └── providers/ - widgets/
│ │ └── di/ - providers/
│ │ └── auth_module.dart - di/
│ ├── feature_auth.dart # 공개 API - auth_module.dart
│ └── testing.dart # 테스트 지원 API (선택사항) - feature_auth.dart # 공개 API
├── test/ - testing.dart # 테스트 지원 API (선택사항)
└── pubspec.yaml - test/
``` - pubspec.yaml
</FileTree>
### 공개 API 설계 ### 공개 API 설계
@ -350,19 +355,21 @@ class AuthModule {
### 프로젝트 구조 ### 프로젝트 구조
``` <FileTree>
ecommerce_app/
├── app/ # 메인 앱 모듈 - ecommerce_app/
├── packages/ - app/ # 메인 앱 모듈
│ ├── core/ # 핵심 기능 모듈 - packages/
│ ├── ui_kit/ # UI 컴포넌트 모듈 - core/ # 핵심 기능 모듈
│ ├── feature_auth/ # 인증 기능 모듈 - ui_kit/ # UI 컴포넌트 모듈
│ ├── feature_products/ # 상품 기능 모듈 - feature_auth/ # 인증 기능 모듈
│ ├── feature_cart/ # 장바구니 기능 모듈 - feature_products/ # 상품 기능 모듈
│ ├── feature_checkout/ # 결제 기능 모듈 - feature_cart/ # 장바구니 기능 모듈
│ └── feature_profile/ # 프로필 기능 모듈 - feature_checkout/ # 결제 기능 모듈
└── melos.yaml - feature_profile/ # 프로필 기능 모듈
``` - melos.yaml
</FileTree>
### 코어 모듈 ### 코어 모듈