mirror of
https://github.com/ChangJoo-Park/learn-flutter.git
synced 2025-07-25 07:43:06 +00:00
docs: update FileTree
This commit is contained in:
ChangJoo Park(박창주)
parent
f471e2a729
commit
f672302905
3 changed files with 177 additions and 171 deletions
|
|
@ -1,6 +1,6 @@
|
|||
export const sidebars = [
|
||||
{
|
||||
label: "📦 Part 1. 시작하기",
|
||||
label: "📦 1. 시작하기",
|
||||
items: [
|
||||
{ label: "소개", slug: "part1/introduction" },
|
||||
{ label: "개발 환경 구성", slug: "part1/setup" },
|
||||
|
|
@ -9,7 +9,7 @@ export const sidebars = [
|
|||
],
|
||||
},
|
||||
{
|
||||
label: "💡 Part 2. Dart 언어 기초",
|
||||
label: "💡 2. Dart 언어 기초",
|
||||
items: [
|
||||
{ label: "Dart 소개", slug: "part2/dart-intro" },
|
||||
{ label: "기본 문법 및 변수", slug: "part2/basic-syntax" },
|
||||
|
|
@ -23,7 +23,7 @@ export const sidebars = [
|
|||
],
|
||||
},
|
||||
{
|
||||
label: "🧱 Part 3. Flutter의 기본 구성 요소",
|
||||
label: "🧱 3. Flutter의 기본 구성 요소",
|
||||
items: [
|
||||
{ label: "위젯 개념과 주요 위젯", slug: "part3/widgets" },
|
||||
{
|
||||
|
|
@ -36,7 +36,7 @@ export const sidebars = [
|
|||
],
|
||||
},
|
||||
{
|
||||
label: "🎨 Part 4. 상태 관리",
|
||||
label: "🎨 4. 상태 관리",
|
||||
items: [
|
||||
{ label: "상태 관리 입문", slug: "part4/state-management-intro" },
|
||||
{
|
||||
|
|
@ -48,7 +48,7 @@ export const sidebars = [
|
|||
],
|
||||
},
|
||||
{
|
||||
label: "🚦 Part 5. 네비게이션과 화면 구성",
|
||||
label: "🚦 5. 네비게이션과 화면 구성",
|
||||
items: [
|
||||
{ label: "Navigator 1.0", slug: "part5/navigator1" },
|
||||
{ label: "Navigator 2.0", slug: "part5/navigator2" },
|
||||
|
|
@ -65,7 +65,7 @@ export const sidebars = [
|
|||
],
|
||||
},
|
||||
{
|
||||
label: "🔌 Part 6. 외부와의 연동",
|
||||
label: "🔌 6. 외부와의 연동",
|
||||
items: [
|
||||
{ label: "Dio를 통한 API 통신", slug: "part6/dio" },
|
||||
{
|
||||
|
|
@ -75,7 +75,7 @@ export const sidebars = [
|
|||
],
|
||||
},
|
||||
{
|
||||
label: "🧪 Part 7. 테스트와 디버깅",
|
||||
label: "🧪 7. 테스트와 디버깅",
|
||||
items: [
|
||||
{ label: "단위 테스트", slug: "part7/unit-test" },
|
||||
{ label: "위젯 테스트", slug: "part7/widget-test" },
|
||||
|
|
@ -85,7 +85,7 @@ export const sidebars = [
|
|||
],
|
||||
},
|
||||
{
|
||||
label: "🚀 Part 8. 앱 배포 및 운영",
|
||||
label: "🚀 8. 앱 배포 및 운영",
|
||||
items: [
|
||||
{ label: "빌드 모드", slug: "part8/build-modes" },
|
||||
{ label: "Android / iOS 배포", slug: "part8/deploy-procedure" },
|
||||
|
|
@ -96,14 +96,14 @@ export const sidebars = [
|
|||
],
|
||||
},
|
||||
{
|
||||
label: "🧭 Part 9. 프로젝트 구조 & 아키텍처",
|
||||
label: "🧭 9. 프로젝트 구조 & 아키텍처",
|
||||
items: [
|
||||
{ label: "기능별 vs 계층별 폴더 구조", slug: "part9/folder-structure" },
|
||||
{ label: "멀티 모듈 아키텍처", slug: "part9/multi-module" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "🌍 Part 10. 보완 학습",
|
||||
label: "🌍 10. 보완 학습",
|
||||
items: [
|
||||
{ label: "CustomPainter와 RenderBox", slug: "part10/custom-painting" },
|
||||
{ label: "위젯 캐싱", slug: "part10/widget-caching" },
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: 첫 프로젝트 생성 및 실행
|
||||
---
|
||||
import { FileTree } from '@astrojs/starlight/components';
|
||||
|
||||
이제 Flutter SDK와 개발 환경이 설정되었으므로, 첫 번째 Flutter 프로젝트를 생성하고 실행해 보겠습니다.
|
||||
|
||||
|
|
@ -45,27 +46,31 @@ cd my_first_app
|
|||
|
||||
Flutter 프로젝트가 생성되면, 다음과 같은 기본 파일 구조가 만들어집니다:
|
||||
|
||||
```
|
||||
my_first_app/
|
||||
├── .dart_tool/ # Dart 도구 관련 파일
|
||||
├── .idea/ # IDE 설정 (Android Studio)
|
||||
├── android/ # 안드로이드 특화 코드
|
||||
├── build/ # 빌드 출력 파일
|
||||
├── ios/ # iOS 특화 코드
|
||||
├── lib/ # Dart 코드
|
||||
│ └── main.dart # 앱의 진입점
|
||||
├── linux/ # Linux 특화 코드
|
||||
├── macos/ # macOS 특화 코드
|
||||
├── test/ # 테스트 코드
|
||||
├── web/ # 웹 특화 코드
|
||||
├── windows/ # Windows 특화 코드
|
||||
├── .gitignore # Git 무시 파일
|
||||
├── .metadata # Flutter 메타데이터
|
||||
├── analysis_options.yaml # Dart 분석 설정
|
||||
├── pubspec.lock # 의존성 버전 잠금 파일
|
||||
├── pubspec.yaml # 프로젝트 설정 및 의존성
|
||||
└── README.md # 프로젝트 설명
|
||||
```
|
||||
|
||||
<FileTree>
|
||||
|
||||
- my_first_app/
|
||||
- .dart_tool/ # Dart 도구 관련 파일
|
||||
- .idea/ # IDE 설정 (Android Studio)
|
||||
- android/ # 안드로이드 특화 코드
|
||||
- build/ # 빌드 출력 파일
|
||||
- ios/ # iOS 특화 코드
|
||||
- lib/ # Dart 코드
|
||||
- main.dart # 앱의 진입점
|
||||
- linux/ # Linux 특화 코드
|
||||
- macos/ # macOS 특화 코드
|
||||
- test/ # 테스트 코드
|
||||
- web/ # 웹 특화 코드
|
||||
- windows/ # Windows 특화 코드
|
||||
- .gitignore # Git 무시 파일
|
||||
- .metadata # Flutter 메타데이터
|
||||
- analysis_options.yaml # Dart 분석 설정
|
||||
- pubspec.lock # 의존성 버전 잠금 파일
|
||||
- pubspec.yaml # 프로젝트 설정 및 의존성
|
||||
- README.md # 프로젝트 설명
|
||||
|
||||
</FileTree>
|
||||
|
||||
|
||||
이 중에서 가장 중요한 파일은 다음과 같습니다:
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Flutter 프로젝트 구조 이해
|
||||
---
|
||||
|
||||
import { FileTree } from '@astrojs/starlight/components';
|
||||
|
||||
Flutter 프로젝트는 여러 디렉토리와 파일로 구성되어 있으며, 각각은 프로젝트의 특정 측면을 담당합니다. 이 구조를 이해하면 Flutter 앱을 더 효율적으로 개발하고 관리할 수 있습니다.
|
||||
|
||||
|
|
@ -9,26 +9,27 @@ Flutter 프로젝트는 여러 디렉토리와 파일로 구성되어 있으며,
|
|||
|
||||
기본적인 Flutter 프로젝트 구조는 다음과 같습니다:
|
||||
|
||||
```
|
||||
my_flutter_app/
|
||||
├── .dart_tool/
|
||||
├── .idea/
|
||||
├── android/
|
||||
├── build/
|
||||
├── ios/
|
||||
├── lib/
|
||||
├── linux/
|
||||
├── macos/
|
||||
├── test/
|
||||
├── web/
|
||||
├── windows/
|
||||
├── .gitignore
|
||||
├── .metadata
|
||||
├── analysis_options.yaml
|
||||
├── pubspec.lock
|
||||
├── pubspec.yaml
|
||||
└── README.md
|
||||
```
|
||||
<FileTree>
|
||||
- my_flutter_app/
|
||||
- .dart_tool/ # Dart 도구 관련 파일
|
||||
- .idea/ # IDE 설정 (Android Studio)
|
||||
- android/ # 안드로이드 특화 코드
|
||||
- build/ # 빌드 출력 파일
|
||||
- ios/ # iOS 특화 코드
|
||||
- lib/ # Dart 코드
|
||||
- main.dart # 앱의 진입점
|
||||
- linux/ # Linux 특화 코드
|
||||
- macos/ # macOS 특화 코드
|
||||
- test/ # 테스트 코드
|
||||
- web/ # 웹 특화 코드
|
||||
- windows/ # Windows 특화 코드
|
||||
- .gitignore # Git 무시 파일
|
||||
- .metadata # Flutter 메타데이터
|
||||
- analysis_options.yaml # Dart 분석 설정
|
||||
- pubspec.lock # 의존성 버전 잠금 파일
|
||||
- pubspec.yaml # 프로젝트 설정 및 의존성
|
||||
- README.md # 프로젝트 설명
|
||||
</FileTree>
|
||||
|
||||
이제 각 디렉토리와 파일의 역할을 자세히 살펴보겠습니다.
|
||||
|
||||
|
|
@ -38,15 +39,15 @@ my_flutter_app/
|
|||
|
||||
`lib/` 디렉토리는 Flutter 프로젝트의 핵심으로, 앱의 Dart 소스 코드가 저장되는 위치입니다.
|
||||
|
||||
```
|
||||
lib/
|
||||
├── main.dart # 앱의 진입점
|
||||
├── models/ # 데이터 모델
|
||||
├── screens/ # 화면 UI
|
||||
├── widgets/ # 재사용 가능한 위젯
|
||||
├── services/ # 비즈니스 로직, API 호출 등
|
||||
└── utils/ # 유틸리티 기능
|
||||
```
|
||||
<FileTree>
|
||||
- lib/
|
||||
- main.dart # 앱의 진입점
|
||||
- models/ # 데이터 모델
|
||||
- screens/ # 화면 UI
|
||||
- widgets/ # 재사용 가능한 위젯
|
||||
- services/ # 비즈니스 로직, API 호출 등
|
||||
- utils/ # 유틸리티 기능
|
||||
</FileTree>
|
||||
|
||||
**중요: 기본적으로 생성되는 것은 `main.dart` 파일뿐이며, 나머지 폴더 구조는 개발자가 필요에 따라 생성하고 구성합니다.**
|
||||
|
||||
|
|
@ -81,12 +82,12 @@ class MyApp extends StatelessWidget {
|
|||
|
||||
`test/` 디렉토리는 앱의 자동화된 테스트 코드를 포함합니다. 단위 테스트, 위젯 테스트 등을 이 디렉토리에 작성합니다.
|
||||
|
||||
```
|
||||
test/
|
||||
├── widget_test.dart # 위젯 테스트
|
||||
└── unit/
|
||||
└── models_test.dart # 단위 테스트
|
||||
```
|
||||
<FileTree>
|
||||
- test/
|
||||
- widget_test.dart # 위젯 테스트
|
||||
- unit/
|
||||
- models_test.dart # 단위 테스트
|
||||
</FileTree>
|
||||
|
||||
기본적으로 생성되는 `widget_test.dart` 파일은 앱의 메인 위젯을 테스트하는 간단한 예제를 포함합니다:
|
||||
|
||||
|
|
@ -112,22 +113,22 @@ void main() {
|
|||
|
||||
`android/` 디렉토리는 Android 플랫폼 관련 코드와 설정을 포함합니다.
|
||||
|
||||
```
|
||||
android/
|
||||
├── app/
|
||||
│ ├── src/
|
||||
│ │ ├── main/
|
||||
│ │ │ ├── AndroidManifest.xml # 앱 선언 및 권한
|
||||
│ │ │ ├── kotlin/ # Kotlin 소스 코드
|
||||
│ │ │ └── res/ # 리소스 (아이콘, 문자열 등)
|
||||
│ │ └── profile/
|
||||
│ ├── build.gradle # 앱 수준 빌드 설정
|
||||
│ └── ...
|
||||
├── build.gradle # 프로젝트 수준 빌드 설정
|
||||
├── gradle/
|
||||
├── gradle.properties
|
||||
└── ...
|
||||
```
|
||||
<FileTree>
|
||||
- android/
|
||||
- app/
|
||||
- src/
|
||||
- main/
|
||||
- AndroidManifest.xml # 앱 선언 및 권한
|
||||
- kotlin/ # Kotlin 소스 코드
|
||||
- res/ # 리소스 (아이콘, 문자열 등)
|
||||
- profile/
|
||||
- build.gradle # 앱 수준 빌드 설정
|
||||
- ...
|
||||
- build.gradle # 프로젝트 수준 빌드 설정
|
||||
- gradle/
|
||||
- gradle.properties
|
||||
- ...
|
||||
</FileTree>
|
||||
|
||||
특히 중요한 파일들:
|
||||
|
||||
|
|
@ -138,16 +139,16 @@ android/
|
|||
|
||||
`ios/` 디렉토리는 iOS 플랫폼 관련 코드와 설정을 포함합니다.
|
||||
|
||||
```
|
||||
ios/
|
||||
├── Runner/
|
||||
│ ├── AppDelegate.swift # iOS 앱 진입점
|
||||
│ ├── Info.plist # 앱 구성 및 권한
|
||||
│ ├── Assets.xcassets/ # 이미지 에셋
|
||||
│ └── ...
|
||||
├── Runner.xcodeproj/ # Xcode 프로젝트 파일
|
||||
└── ...
|
||||
```
|
||||
<FileTree>
|
||||
- ios/
|
||||
- Runner/
|
||||
- AppDelegate.swift # iOS 앱 진입점
|
||||
- Info.plist # 앱 구성 및 권한
|
||||
- Assets.xcassets/ # 이미지 에셋
|
||||
- ...
|
||||
- Runner.xcodeproj/ # Xcode 프로젝트 파일
|
||||
- ...
|
||||
</FileTree>
|
||||
|
||||
특히 중요한 파일들:
|
||||
|
||||
|
|
@ -242,12 +243,12 @@ analyzer:
|
|||
|
||||
### assets/ 디렉토리
|
||||
|
||||
```
|
||||
assets/
|
||||
├── images/ # 이미지 파일
|
||||
├── fonts/ # 폰트 파일
|
||||
└── data/ # JSON, CSV 등의 데이터 파일
|
||||
```
|
||||
<FileTree>
|
||||
- assets/
|
||||
- images/ # 이미지 파일
|
||||
- fonts/ # 폰트 파일
|
||||
- data/ # JSON, CSV 등의 데이터 파일
|
||||
</FileTree>
|
||||
|
||||
이 디렉토리는 `pubspec.yaml`에 명시적으로 등록해야 합니다:
|
||||
|
||||
|
|
@ -263,12 +264,12 @@ flutter:
|
|||
|
||||
다국어 지원을 위한 디렉토리:
|
||||
|
||||
```
|
||||
l10n/
|
||||
├── app_en.arb # 영어 번역
|
||||
├── app_ko.arb # 한국어 번역
|
||||
└── app_ja.arb # 일본어 번역
|
||||
```
|
||||
<FileTree>
|
||||
- l10n/
|
||||
- app_en.arb # 영어 번역
|
||||
- app_ko.arb # 한국어 번역
|
||||
- app_ja.arb # 일본어 번역
|
||||
</FileTree>
|
||||
|
||||
## 프로젝트 구조화 패턴
|
||||
|
||||
|
|
@ -278,23 +279,23 @@ Flutter 앱의 구조는 프로젝트의 성격과 팀의 선호도에 따라
|
|||
|
||||
앱의 기능별로 디렉토리를 구성하는 방식:
|
||||
|
||||
```
|
||||
lib/
|
||||
├── main.dart
|
||||
├── features/
|
||||
│ ├── auth/
|
||||
│ │ ├── screens/
|
||||
│ │ ├── widgets/
|
||||
│ │ ├── models/
|
||||
│ │ └── services/
|
||||
│ ├── home/
|
||||
│ ├── profile/
|
||||
│ └── settings/
|
||||
└── shared/
|
||||
├── widgets/
|
||||
├── utils/
|
||||
└── constants/
|
||||
```
|
||||
<FileTree>
|
||||
- lib/
|
||||
- main.dart
|
||||
- features/
|
||||
- auth/
|
||||
- screens/
|
||||
- widgets/
|
||||
- models/
|
||||
- services/
|
||||
- home/
|
||||
- profile/
|
||||
- settings/
|
||||
- shared/
|
||||
- widgets/
|
||||
- utils/
|
||||
- constants/
|
||||
</FileTree>
|
||||
|
||||
이 구조는 기능이 많은 대규모 앱에 적합합니다.
|
||||
|
||||
|
|
@ -302,16 +303,16 @@ lib/
|
|||
|
||||
앱의 아키텍처 계층별로 디렉토리를 구성하는 방식:
|
||||
|
||||
```
|
||||
lib/
|
||||
├── main.dart
|
||||
├── screens/ # 모든 화면 UI
|
||||
├── widgets/ # 모든 재사용 위젯
|
||||
├── models/ # 모든 데이터 모델
|
||||
├── services/ # 모든 서비스 로직
|
||||
├── repositories/ # 데이터 액세스 로직
|
||||
└── utils/ # 유틸리티 함수
|
||||
```
|
||||
<FileTree>
|
||||
- lib/
|
||||
- main.dart
|
||||
- screens/ # 모든 화면 UI
|
||||
- widgets/ # 모든 재사용 위젯
|
||||
- models/ # 모든 데이터 모델
|
||||
- services/ # 모든 서비스 로직
|
||||
- repositories/ # 데이터 액세스 로직
|
||||
- utils/ # 유틸리티 함수
|
||||
</FileTree>
|
||||
|
||||
이 구조는 작거나 중간 규모의 앱에 적합합니다.
|
||||
|
||||
|
|
@ -319,20 +320,20 @@ lib/
|
|||
|
||||
보다 체계적인 아키텍처 패턴을 적용한 구조:
|
||||
|
||||
```
|
||||
lib/
|
||||
├── main.dart
|
||||
├── ui/
|
||||
│ ├── screens/
|
||||
│ └── widgets/
|
||||
├── viewmodels/
|
||||
├── models/
|
||||
├── services/
|
||||
├── repositories/
|
||||
└── core/
|
||||
├── utils/
|
||||
└── constants/
|
||||
```
|
||||
<FileTree>
|
||||
- lib/
|
||||
- main.dart
|
||||
- ui/
|
||||
- screens/
|
||||
- widgets/
|
||||
- viewmodels/
|
||||
- models/
|
||||
- services/
|
||||
- repositories/
|
||||
- core/
|
||||
- utils/
|
||||
- constants/
|
||||
</FileTree>
|
||||
|
||||
이 구조는 코드의 유지 관리성과 테스트 가능성을 높이는 데 도움이 됩니다.
|
||||
|
||||
|
|
@ -368,41 +369,41 @@ lib/
|
|||
|
||||
다양한 환경(개발, 스테이징, 프로덕션)에 대한 구성을 지원하기 위해 다음과 같은 접근 방식을 사용할 수 있습니다:
|
||||
|
||||
```
|
||||
lib/
|
||||
├── main.dart # 공통 진입점
|
||||
├── main_dev.dart # 개발 환경 진입점
|
||||
├── main_staging.dart # 스테이징 환경 진입점
|
||||
├── main_prod.dart # 프로덕션 환경 진입점
|
||||
└── config/
|
||||
├── app_config.dart # 환경 설정 클래스
|
||||
├── dev_config.dart
|
||||
├── staging_config.dart
|
||||
└── prod_config.dart
|
||||
```
|
||||
<FileTree>
|
||||
- lib/
|
||||
- main.dart # 공통 진입점
|
||||
- main_dev.dart # 개발 환경 진입점
|
||||
- main_staging.dart # 스테이징 환경 진입점
|
||||
- main_prod.dart # 프로덕션 환경 진입점
|
||||
- config/
|
||||
- app_config.dart # 환경 설정 클래스
|
||||
- dev_config.dart
|
||||
- staging_config.dart
|
||||
- prod_config.dart
|
||||
</FileTree>
|
||||
|
||||
### 라우팅 구성
|
||||
|
||||
앱의 화면 전환을 관리하기 위한 라우팅 구성:
|
||||
|
||||
```
|
||||
lib/
|
||||
├── router/
|
||||
│ ├── app_router.dart # 라우터 설정
|
||||
│ └── routes.dart # 라우트 상수
|
||||
```
|
||||
<FileTree>
|
||||
- lib/
|
||||
- router/
|
||||
- app_router.dart # 라우터 설정
|
||||
- routes.dart # 라우트 상수
|
||||
</FileTree>
|
||||
|
||||
### 상태 관리
|
||||
|
||||
선택한 상태 관리 솔루션에 따라 구조가 달라질 수 있습니다:
|
||||
|
||||
```
|
||||
lib/
|
||||
├── providers/ # Riverpod/Provider
|
||||
├── blocs/ # Flutter_bloc
|
||||
├── stores/ # MobX
|
||||
└── state/ # 기타 상태 관리
|
||||
```
|
||||
<FileTree>
|
||||
- lib/
|
||||
- providers/ # Riverpod/Provider
|
||||
- blocs/ # Flutter_bloc
|
||||
- stores/ # MobX
|
||||
- state/ # 기타 상태 관리
|
||||
</FileTree>
|
||||
|
||||
## 결론
|
||||
|
||||
Loading…
Add table
Reference in a new issue