git_clone/learn-flutter
1
0
Fork 0
mirror of https://github.com/ChangJoo-Park/learn-flutter.git synced 2025-07-25 23:59:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: update FileTree

Browse source
This commit is contained in:
ChangJoo Park(박창주) 2025-05-14 20:02:12 +09:00
parent f471e2a729
commit f672302905
3 changed files with 177 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
sidebar.config.mjs
View file

@ -1,6 +1,6 @@
export const sidebars = [ export const sidebars = [
{ {
label: "📦 Part 1. 시작하기", label: "📦 1. 시작하기",
items: [ items: [
{ label: "소개", slug: "part1/introduction" }, { label: "소개", slug: "part1/introduction" },
{ label: "개발 환경 구성", slug: "part1/setup" }, { label: "개발 환경 구성", slug: "part1/setup" },
@ -9,7 +9,7 @@ export const sidebars = [
], ],
}, },
{ {
label: "💡 Part 2. Dart 언어 기초", label: "💡 2. Dart 언어 기초",
items: [ items: [
{ label: "Dart 소개", slug: "part2/dart-intro" }, { label: "Dart 소개", slug: "part2/dart-intro" },
{ label: "기본 문법 및 변수", slug: "part2/basic-syntax" }, { label: "기본 문법 및 변수", slug: "part2/basic-syntax" },
@ -23,7 +23,7 @@ export const sidebars = [
], ],
}, },
{ {
label: "🧱 Part 3. Flutter의 기본 구성 요소", label: "🧱 3. Flutter의 기본 구성 요소",
items: [ items: [
{ label: "위젯 개념과 주요 위젯", slug: "part3/widgets" }, { label: "위젯 개념과 주요 위젯", slug: "part3/widgets" },
{ {
@ -36,7 +36,7 @@ export const sidebars = [
], ],
}, },
{ {
label: "🎨 Part 4. 상태 관리", label: "🎨 4. 상태 관리",
items: [ items: [
{ label: "상태 관리 입문", slug: "part4/state-management-intro" }, { label: "상태 관리 입문", slug: "part4/state-management-intro" },
{ {
@ -48,7 +48,7 @@ export const sidebars = [
], ],
}, },
{ {
label: "🚦 Part 5. 네비게이션과 화면 구성", label: "🚦 5. 네비게이션과 화면 구성",
items: [ items: [
{ label: "Navigator 1.0", slug: "part5/navigator1" }, { label: "Navigator 1.0", slug: "part5/navigator1" },
{ label: "Navigator 2.0", slug: "part5/navigator2" }, { label: "Navigator 2.0", slug: "part5/navigator2" },
@ -65,7 +65,7 @@ export const sidebars = [
], ],
}, },
{ {
label: "🔌 Part 6. 외부와의 연동", label: "🔌 6. 외부와의 연동",
items: [ items: [
{ label: "Dio를 통한 API 통신", slug: "part6/dio" }, { label: "Dio를 통한 API 통신", slug: "part6/dio" },
{ {
@ -75,7 +75,7 @@ export const sidebars = [
], ],
}, },
{ {
label: "🧪 Part 7. 테스트와 디버깅", label: "🧪 7. 테스트와 디버깅",
items: [ items: [
{ label: "단위 테스트", slug: "part7/unit-test" }, { label: "단위 테스트", slug: "part7/unit-test" },
{ label: "위젯 테스트", slug: "part7/widget-test" }, { label: "위젯 테스트", slug: "part7/widget-test" },
@ -85,7 +85,7 @@ export const sidebars = [
], ],
}, },
{ {
label: "🚀 Part 8. 앱 배포 및 운영", label: "🚀 8. 앱 배포 및 운영",
items: [ items: [
{ label: "빌드 모드", slug: "part8/build-modes" }, { label: "빌드 모드", slug: "part8/build-modes" },
{ label: "Android / iOS 배포", slug: "part8/deploy-procedure" }, { label: "Android / iOS 배포", slug: "part8/deploy-procedure" },
@ -96,14 +96,14 @@ export const sidebars = [
], ],
}, },
{ {
label: "🧭 Part 9. 프로젝트 구조 & 아키텍처", label: "🧭 9. 프로젝트 구조 & 아키텍처",
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: "🌍 Part 10. 보완 학습", label: "🌍 10. 보완 학습",
items: [ items: [
{ label: "CustomPainter와 RenderBox", slug: "part10/custom-painting" }, { label: "CustomPainter와 RenderBox", slug: "part10/custom-painting" },
{ label: "위젯 캐싱", slug: "part10/widget-caching" }, { label: "위젯 캐싱", slug: "part10/widget-caching" },

47
src/content/docs/part1/first-project.md → src/content/docs/part1/first-project.mdx
View file

@ -1,6 +1,7 @@
--- ---
title: 첫 프로젝트 생성 및 실행 title: 첫 프로젝트 생성 및 실행
--- ---
import { FileTree } from '@astrojs/starlight/components';
이제 Flutter SDK와 개발 환경이 설정되었으므로, 첫 번째 Flutter 프로젝트를 생성하고 실행해 보겠습니다. 이제 Flutter SDK와 개발 환경이 설정되었으므로, 첫 번째 Flutter 프로젝트를 생성하고 실행해 보겠습니다.
@ -45,27 +46,31 @@ cd my_first_app
Flutter 프로젝트가 생성되면, 다음과 같은 기본 파일 구조가 만들어집니다: Flutter 프로젝트가 생성되면, 다음과 같은 기본 파일 구조가 만들어집니다:
```
my_first_app/ <FileTree>
├── .dart_tool/ # Dart 도구 관련 파일
├── .idea/ # IDE 설정 (Android Studio) - my_first_app/
├── android/ # 안드로이드 특화 코드 - .dart_tool/ # Dart 도구 관련 파일
├── build/ # 빌드 출력 파일 - .idea/ # IDE 설정 (Android Studio)
├── ios/ # iOS 특화 코드 - android/ # 안드로이드 특화 코드
├── lib/ # Dart 코드 - build/ # 빌드 출력 파일
│ └── main.dart # 앱의 진입점 - ios/ # iOS 특화 코드
├── linux/ # Linux 특화 코드 - lib/ # Dart 코드
├── macos/ # macOS 특화 코드 - main.dart # 앱의 진입점
├── test/ # 테스트 코드 - linux/ # Linux 특화 코드
├── web/ # 웹 특화 코드 - macos/ # macOS 특화 코드
├── windows/ # Windows 특화 코드 - test/ # 테스트 코드
├── .gitignore # Git 무시 파일 - web/ # 웹 특화 코드
├── .metadata # Flutter 메타데이터 - windows/ # Windows 특화 코드
├── analysis_options.yaml # Dart 분석 설정 - .gitignore # Git 무시 파일
├── pubspec.lock # 의존성 버전 잠금 파일 - .metadata # Flutter 메타데이터
├── pubspec.yaml # 프로젝트 설정 및 의존성 - analysis_options.yaml # Dart 분석 설정
└── README.md # 프로젝트 설명 - pubspec.lock # 의존성 버전 잠금 파일
``` - pubspec.yaml # 프로젝트 설정 및 의존성
- README.md # 프로젝트 설명
</FileTree>
이 중에서 가장 중요한 파일은 다음과 같습니다: 이 중에서 가장 중요한 파일은 다음과 같습니다:

281
src/content/docs/part1/project-structure.md → src/content/docs/part1/project-structure.mdx
View file

@ -1,7 +1,7 @@
--- ---
title: Flutter 프로젝트 구조 이해 title: Flutter 프로젝트 구조 이해
--- ---
import { FileTree } from '@astrojs/starlight/components';
Flutter 프로젝트는 여러 디렉토리와 파일로 구성되어 있으며, 각각은 프로젝트의 특정 측면을 담당합니다. 이 구조를 이해하면 Flutter 앱을 더 효율적으로 개발하고 관리할 수 있습니다. Flutter 프로젝트는 여러 디렉토리와 파일로 구성되어 있으며, 각각은 프로젝트의 특정 측면을 담당합니다. 이 구조를 이해하면 Flutter 앱을 더 효율적으로 개발하고 관리할 수 있습니다.
@ -9,26 +9,27 @@ Flutter 프로젝트는 여러 디렉토리와 파일로 구성되어 있으며,
기본적인 Flutter 프로젝트 구조는 다음과 같습니다: 기본적인 Flutter 프로젝트 구조는 다음과 같습니다:
``` <FileTree>
my_flutter_app/ - my_flutter_app/
├── .dart_tool/ - .dart_tool/ # Dart 도구 관련 파일
├── .idea/ - .idea/ # IDE 설정 (Android Studio)
├── android/ - android/ # 안드로이드 특화 코드
├── build/ - build/ # 빌드 출력 파일
├── ios/ - ios/ # iOS 특화 코드
├── lib/ - lib/ # Dart 코드
├── linux/ - main.dart # 앱의 진입점
├── macos/ - linux/ # Linux 특화 코드
├── test/ - macos/ # macOS 특화 코드
├── web/ - test/ # 테스트 코드
├── windows/ - web/ # 웹 특화 코드
├── .gitignore - windows/ # Windows 특화 코드
├── .metadata - .gitignore # Git 무시 파일
├── analysis_options.yaml - .metadata # Flutter 메타데이터
├── pubspec.lock - analysis_options.yaml # Dart 분석 설정
├── pubspec.yaml - pubspec.lock # 의존성 버전 잠금 파일
└── README.md - pubspec.yaml # 프로젝트 설정 및 의존성
``` - README.md # 프로젝트 설명
</FileTree>
이제 각 디렉토리와 파일의 역할을 자세히 살펴보겠습니다. 이제 각 디렉토리와 파일의 역할을 자세히 살펴보겠습니다.
@ -38,15 +39,15 @@ my_flutter_app/
`lib/` 디렉토리는 Flutter 프로젝트의 핵심으로, 앱의 Dart 소스 코드가 저장되는 위치입니다. `lib/` 디렉토리는 Flutter 프로젝트의 핵심으로, 앱의 Dart 소스 코드가 저장되는 위치입니다.
``` <FileTree>
lib/ - lib/
├── main.dart # 앱의 진입점 - main.dart # 앱의 진입점
├── models/ # 데이터 모델 - models/ # 데이터 모델
├── screens/ # 화면 UI - screens/ # 화면 UI
├── widgets/ # 재사용 가능한 위젯 - widgets/ # 재사용 가능한 위젯
├── services/ # 비즈니스 로직, API 호출 등 - services/ # 비즈니스 로직, API 호출 등
└── utils/ # 유틸리티 기능 - utils/ # 유틸리티 기능
``` </FileTree>
**중요: 기본적으로 생성되는 것은 `main.dart` 파일뿐이며, 나머지 폴더 구조는 개발자가 필요에 따라 생성하고 구성합니다.** **중요: 기본적으로 생성되는 것은 `main.dart` 파일뿐이며, 나머지 폴더 구조는 개발자가 필요에 따라 생성하고 구성합니다.**
@ -81,12 +82,12 @@ class MyApp extends StatelessWidget {
`test/` 디렉토리는 앱의 자동화된 테스트 코드를 포함합니다. 단위 테스트, 위젯 테스트 등을 이 디렉토리에 작성합니다. `test/` 디렉토리는 앱의 자동화된 테스트 코드를 포함합니다. 단위 테스트, 위젯 테스트 등을 이 디렉토리에 작성합니다.
``` <FileTree>
test/ - test/
├── widget_test.dart # 위젯 테스트 - widget_test.dart # 위젯 테스트
└── unit/ - unit/
└── models_test.dart # 단위 테스트 - models_test.dart # 단위 테스트
``` </FileTree>
기본적으로 생성되는 `widget_test.dart` 파일은 앱의 메인 위젯을 테스트하는 간단한 예제를 포함합니다: 기본적으로 생성되는 `widget_test.dart` 파일은 앱의 메인 위젯을 테스트하는 간단한 예제를 포함합니다:
@ -112,22 +113,22 @@ void main() {
`android/` 디렉토리는 Android 플랫폼 관련 코드와 설정을 포함합니다. `android/` 디렉토리는 Android 플랫폼 관련 코드와 설정을 포함합니다.
``` <FileTree>
android/ - android/
├── app/ - app/
│ ├── src/ - src/
│ │ ├── main/ - main/
│ │ │ ├── AndroidManifest.xml # 앱 선언 및 권한 - AndroidManifest.xml # 앱 선언 및 권한
│ │ │ ├── kotlin/ # Kotlin 소스 코드 - kotlin/ # Kotlin 소스 코드
│ │ │ └── res/ # 리소스 (아이콘, 문자열 등) - res/ # 리소스 (아이콘, 문자열 등)
│ │ └── profile/ - profile/
│ ├── build.gradle # 앱 수준 빌드 설정 - build.gradle # 앱 수준 빌드 설정
│ └── ... - ...
├── build.gradle # 프로젝트 수준 빌드 설정 - build.gradle # 프로젝트 수준 빌드 설정
├── gradle/ - gradle/
├── gradle.properties - gradle.properties
└── ... - ...
``` </FileTree>
특히 중요한 파일들: 특히 중요한 파일들:
@ -138,16 +139,16 @@ android/
`ios/` 디렉토리는 iOS 플랫폼 관련 코드와 설정을 포함합니다. `ios/` 디렉토리는 iOS 플랫폼 관련 코드와 설정을 포함합니다.
``` <FileTree>
ios/ - ios/
├── Runner/ - Runner/
│ ├── AppDelegate.swift # iOS 앱 진입점 - AppDelegate.swift # iOS 앱 진입점
│ ├── Info.plist # 앱 구성 및 권한 - Info.plist # 앱 구성 및 권한
│ ├── Assets.xcassets/ # 이미지 에셋 - Assets.xcassets/ # 이미지 에셋
│ └── ... - ...
├── Runner.xcodeproj/ # Xcode 프로젝트 파일 - Runner.xcodeproj/ # Xcode 프로젝트 파일
└── ... - ...
``` </FileTree>
특히 중요한 파일들: 특히 중요한 파일들:
@ -242,12 +243,12 @@ analyzer:
### assets/ 디렉토리 ### assets/ 디렉토리
``` <FileTree>
assets/ - assets/
├── images/ # 이미지 파일 - images/ # 이미지 파일
├── fonts/ # 폰트 파일 - fonts/ # 폰트 파일
└── data/ # JSON, CSV 등의 데이터 파일 - data/ # JSON, CSV 등의 데이터 파일
``` </FileTree>
이 디렉토리는 `pubspec.yaml`에 명시적으로 등록해야 합니다: 이 디렉토리는 `pubspec.yaml`에 명시적으로 등록해야 합니다:
@ -263,12 +264,12 @@ flutter:
다국어 지원을 위한 디렉토리: 다국어 지원을 위한 디렉토리:
``` <FileTree>
l10n/ - l10n/
├── app_en.arb # 영어 번역 - app_en.arb # 영어 번역
├── app_ko.arb # 한국어 번역 - app_ko.arb # 한국어 번역
└── app_ja.arb # 일본어 번역 - app_ja.arb # 일본어 번역
``` </FileTree>
## 프로젝트 구조화 패턴 ## 프로젝트 구조화 패턴
@ -278,23 +279,23 @@ Flutter 앱의 구조는 프로젝트의 성격과 팀의 선호도에 따라
앱의 기능별로 디렉토리를 구성하는 방식: 앱의 기능별로 디렉토리를 구성하는 방식:
``` <FileTree>
lib/ - lib/
├── main.dart - main.dart
├── features/ - features/
│ ├── auth/ - auth/
│ │ ├── screens/ - screens/
│ │ ├── widgets/ - widgets/
│ │ ├── models/ - models/
│ │ └── services/ - services/
│ ├── home/ - home/
│ ├── profile/ - profile/
│ └── settings/ - settings/
└── shared/ - shared/
├── widgets/ - widgets/
├── utils/ - utils/
└── constants/ - constants/
``` </FileTree>
이 구조는 기능이 많은 대규모 앱에 적합합니다. 이 구조는 기능이 많은 대규모 앱에 적합합니다.
@ -302,16 +303,16 @@ lib/
앱의 아키텍처 계층별로 디렉토리를 구성하는 방식: 앱의 아키텍처 계층별로 디렉토리를 구성하는 방식:
``` <FileTree>
lib/ - lib/
├── main.dart - main.dart
├── screens/ # 모든 화면 UI - screens/ # 모든 화면 UI
├── widgets/ # 모든 재사용 위젯 - widgets/ # 모든 재사용 위젯
├── models/ # 모든 데이터 모델 - models/ # 모든 데이터 모델
├── services/ # 모든 서비스 로직 - services/ # 모든 서비스 로직
├── repositories/ # 데이터 액세스 로직 - repositories/ # 데이터 액세스 로직
└── utils/ # 유틸리티 함수 - utils/ # 유틸리티 함수
``` </FileTree>
이 구조는 작거나 중간 규모의 앱에 적합합니다. 이 구조는 작거나 중간 규모의 앱에 적합합니다.
@ -319,20 +320,20 @@ lib/
보다 체계적인 아키텍처 패턴을 적용한 구조: 보다 체계적인 아키텍처 패턴을 적용한 구조:
``` <FileTree>
lib/ - lib/
├── main.dart - main.dart
├── ui/ - ui/
│ ├── screens/ - screens/
│ └── widgets/ - widgets/
├── viewmodels/ - viewmodels/
├── models/ - models/
├── services/ - services/
├── repositories/ - repositories/
└── core/ - core/
├── utils/ - utils/
└── constants/ - constants/
``` </FileTree>
이 구조는 코드의 유지 관리성과 테스트 가능성을 높이는 데 도움이 됩니다. 이 구조는 코드의 유지 관리성과 테스트 가능성을 높이는 데 도움이 됩니다.
@ -368,41 +369,41 @@ lib/
다양한 환경(개발, 스테이징, 프로덕션)에 대한 구성을 지원하기 위해 다음과 같은 접근 방식을 사용할 수 있습니다: 다양한 환경(개발, 스테이징, 프로덕션)에 대한 구성을 지원하기 위해 다음과 같은 접근 방식을 사용할 수 있습니다:
``` <FileTree>
lib/ - lib/
├── main.dart # 공통 진입점 - main.dart # 공통 진입점
├── main_dev.dart # 개발 환경 진입점 - main_dev.dart # 개발 환경 진입점
├── main_staging.dart # 스테이징 환경 진입점 - main_staging.dart # 스테이징 환경 진입점
├── main_prod.dart # 프로덕션 환경 진입점 - main_prod.dart # 프로덕션 환경 진입점
└── config/ - config/
├── app_config.dart # 환경 설정 클래스 - app_config.dart # 환경 설정 클래스
├── dev_config.dart - dev_config.dart
├── staging_config.dart - staging_config.dart
└── prod_config.dart - prod_config.dart
``` </FileTree>
### 라우팅 구성 ### 라우팅 구성
앱의 화면 전환을 관리하기 위한 라우팅 구성: 앱의 화면 전환을 관리하기 위한 라우팅 구성:
``` <FileTree>
lib/ - lib/
├── router/ - router/
│ ├── app_router.dart # 라우터 설정 - app_router.dart # 라우터 설정
│ └── routes.dart # 라우트 상수 - routes.dart # 라우트 상수
``` </FileTree>
### 상태 관리 ### 상태 관리
선택한 상태 관리 솔루션에 따라 구조가 달라질 수 있습니다: 선택한 상태 관리 솔루션에 따라 구조가 달라질 수 있습니다:
``` <FileTree>
lib/ - lib/
├── providers/ # Riverpod/Provider - providers/ # Riverpod/Provider
├── blocs/ # Flutter_bloc - blocs/ # Flutter_bloc
├── stores/ # MobX - stores/ # MobX
└── state/ # 기타 상태 관리 - state/ # 기타 상태 관리
``` </FileTree>
## 결론 ## 결론