잔재미코딩 · 교육과정 소개서
풀스택을 위한 Flutter 앱개발 부트캠프
Dart 기본기부터 Flutter 위젯·상태 관리, Firebase 인증과 Firestore까지 익힙니다. 화면 예제와 프로젝트를 직접 만들며 앱 개발 흐름을 연결하는 풀스택 Part4 강의입니다.
- 과정 구성
- 영상 94개
- 총 영상 시간
- 24시간 30분
- 강사
- Dave Lee · 잔재미코딩
배우는 내용
- Dart 문법·객체지향·비동기 프로그래밍
- Flutter 위젯·레이아웃·화면 구성
- 상태 관리·Provider·화면 이동
- Firebase Authentication·Firestore 연동
- 앱 프로젝트·에뮬레이터 실행·ChatGPT 활용 팁
선수 지식
한 가지 프로그래밍 언어를 경험했다면 시작할 수 있습니다. 프로그래밍 자체가 처음이라면 파이썬 기초를 먼저 익히거나 함께 수강하는 것을 권합니다.
자료는 다운로드할 수 있나요?
모든 Flutter 예제 코드는 파일로 제공합니다. 문서 자료는 온라인 PDF 이북 형태로 확인할 수 있으며, 저작권 보호를 위해 문서의 복사 및 다운로드는 제한합니다.
수업별 전체 목차
01. 시작하기(수업 준비)
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Flutter 입문 강의 소개 | 영상 |
| 02 | 강의 방법 및 효율적인 학습 팁 | 영상 |
| 03 | 왜 Flutter인가? React Native와의 비교 | 영상 |
02. 강의 자료와 Flutter 와 Android Studio 설치
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 강의 자료 [꼭 들어주세요!!!~] | 영상 |
| 02 | 강의 자료/코드 다운로드 | 자료 |
| 03 | Flutter 와 Android Studio 설치 (맥) [라이브 강의] | 영상 |
| 04 | Flutter 와 Android Studio 설치 (윈도우) [라이브 강의] | 영상 |
03. Dart 시작하기
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Dart 첫걸음 | 영상 |
| 02 | Dart 변수 시작하기 | 영상 |
| 03 | Dart 컬렉션: List | 영상 |
| 04 | Dart 컬렉션: Map | 영상 |
| 05 | Dart 컬렉션: Set | 영상 |
| 06 | Dart 연산자 | 영상 |
| 07 | Dart 조건문 | 영상 |
| 08 | Dart 반복문 | 영상 |
| 09 | Dart 함수 | 영상 |
| 10 | Dart 익명 함수, 람다 함수, Try Catch | 영상 |
| 11 | Dart Null Safety | 영상 |
| 12 | 직접 풀어봐야 익숙해집니다! Dart 퀴즈와 풀이1 | 영상 |
| 13 | 직접 풀어봐야 익숙해집니다! Dart 퀴즈와 풀이2 | 영상 |
04. Dart 객체지향 프로그래밍
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Dart 클래스, 생성자, Setter/Getter | 영상 |
| 02 | Dart 상속, Mixin | 영상 |
| 03 | Dart 추상 클래스, 제네릭 | 영상 |
| 04 | Dart Static, Cascade | 영상 |
| 05 | 직접 풀어봐야 익숙해집니다! Dart OOP 퀴즈 | 영상 |
05. Dart 비동기 프로그래밍
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Dart Future, Async | 영상 |
| 02 | Dart Stream, Async | 영상 |
| 03 | 직접 풀어봐야 익숙해집니다! Dart Future 퀴즈 | 영상 |
06. Flutter 시작하기
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Flutter에서의 위젯이란? | 영상 |
| 02 | Flutter 프로젝트 설정과 코드 시작하기 | 영상 |
| 03 | Flutter 첫 화면 레이아웃과 가시성 | 영상 |
| 04 | Container 기본 개념 | 영상 |
| 05 | Row, Column 기본과 MaterialApp | 영상 |
| 06 | Scaffold 속성 | 영상 |
07. Flutter 위젯 익히며, 바로 만들어보기1
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | AppBar, Stack, Align 위젯 | 영상 |
| 02 | Expanded, SingleChildScrollView, Text 위젯 | 영상 |
| 03 | 바로 만들어보기: 날씨 앱 화면 구성하기 | 영상 |
| 04 | 바로 만들어보기: 날씨 앱 화면 그럴듯하게 개선하기 | 영상 |
08. Flutter 위젯 익히며, 바로 만들어보기2
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Font, Image, Assets 위젯 | 영상 |
| 02 | Icon, IconButton 위젯 | 영상 |
| 03 | 바로 만들어보기: Music 앱 화면 구성하기 | 영상 |
| 04 | 바로 만들어보기: Music 앱 화면 그럴듯하게 개선하기 | 영상 |
09. Flutter 위젯 익히며, 바로 만들어보기3
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | MaterialApp과 Material3 | 영상 |
| 02 | TextField 위젯 | 영상 |
| 03 | 바로 만들어보기: 로그인 화면 구성하기 | 영상 |
| 04 | 바로 만들어보기: 로그인 화면 그럴듯하게 개선하기 | 영상 |
10. Flutter 중급 위젯 이해하며, 바로 만들어보기1
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Stateful Widget 작성 방법 | 영상 |
| 02 | Checkbox, Radio와 Stateful Widget | 영상 |
| 03 | Slider, Switch와 Stateful Widget | 영상 |
| 04 | Form과 Stateful Widget | 영상 |
| 05 | ListView 사용 방법 | 영상 |
| 06 | 바로 만들어보기: 피드백 서베이 화면 구성하기1 | 영상 |
| 07 | 바로 만들어보기: 피드백 서베이 화면 구성하기2 | 영상 |
| 08 | 바로 만들어보기: 피드백 서베이 화면 그럴듯하게 구성하기 | 영상 |
11. 플러터 개발에 챗GPT(chatGPT) 활용 팁
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 플러터 개발에 챗GPT(chatGPT) 활용해서, 플러터 개발 도움받기 팁1 | 영상 |
| 02 | 플러터 개발에 챗GPT(chatGPT) 활용해서, 플러터 개발 도움받기 팁2 | 영상 |
12. Flutter 중급 위젯 이해하며, 바로 만들어보기2
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | GridView, PageView 위젯 | 영상 |
| 02 | 바로 만들어보기: 이미지 갤러리 화면 구성하기1 | 영상 |
| 03 | 바로 만들어보기: 이미지 갤러리 화면 구성하기2 | 영상 |
| 04 | 바로 만들어보기: 이미지 갤러리 화면 그럴듯하게 개선하기 | 영상 |
13. Flutter 중급 위젯 이해하며, 바로 만들어보기3
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | AlertDialog 위젯 | 영상 |
| 02 | BottomSheet, TabBar 위젯 | 영상 |
| 03 | SizedBox, Card 위젯 | 영상 |
| 04 | Bottom Navigation Bar 위젯 | 영상 |
| 05 | GestureDetector, Buttons 위젯 | 영상 |
| 06 | 바로 만들어보기: Music Info 화면 구성하기 | 영상 |
| 07 | 바로 만들어보기: Music Info 화면 그럴듯하게 개선하기 | 영상 |
| 08 | 참고: Cupertino App, SafeArea | 영상 |
14. Flutter 중급 이해1
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 위젯 생명 주기(Widget Life Cycle) | 영상 |
| 02 | Flutter Key 이해 | 영상 |
| 03 | Flutter Navigator 이해 | 영상 |
| 04 | Flutter Routes 이해 | 영상 |
| 05 | Flutter Navigator 데이터 전달 이해 | 영상 |
15. Flutter 중급 이해2
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Provider 기본 이해 | 영상 |
| 02 | ChangeNotifierProvider 사용법 이해 | 영상 |
| 03 | MultiProvider 사용법 이해 | 영상 |
| 04 | FutureProvider 와 Consumer 이해 | 영상 |
16. Flutter와 Firebase: 프론트엔드를 넘어 백엔드까지
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Firebase 이해와 기본 설정 방법 이해 | 영상 |
| 02 | Firebase Authentication 설정 및 Flutter 프로젝트 연동 | 영상 |
| 03 | Firebase Authentication 기반 Flutter 회원가입/로그인/로그아웃 코드 작성 방법 | 영상 |
| 04 | 바로 만들어보기: Firebase Authentication 기반 회원가입/로그인 기능 구현1 | 영상 |
| 05 | 바로 만들어보기: Firebase Authentication 기반 회원가입/로그인 기능 구현2 | 영상 |
| 06 | 바로 만들어보기: Firebase Authentication 기반 회원가입/로그인 기능 구현3 | 영상 |
17. Flutter와 Firestore: 프론트엔드를 넘어 백엔드 데이터베이스까지
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Firestore 이해와 Flutter 프로젝트 연동 방법 | 영상 |
| 02 | Firestore 기반 Flutter 로 Firestore 데이터 다루기 | 영상 |
18. 최종 프로젝트로 익히는 실전 Flutter
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | Flutter와 Firebase/Firestore 까지 활용한 그럴듯한 서비스 만들어보기1 | 영상 |
| 02 | Flutter와 Firebase/Firestore 까지 활용한 그럴듯한 서비스 만들어보기2 | 영상 |
| 03 | Flutter와 Firebase/Firestore 까지 활용한 그럴듯한 서비스 만들어보기3 | 영상 |
| 04 | Flutter와 Firebase/Firestore 까지 활용한 그럴듯한 서비스 만들어보기4 | 영상 |
| 05 | Flutter와 Firebase/Firestore 까지 활용한 그럴듯한 서비스 만들어보기5 | 영상 |
| 06 | Flutter와 Firebase/Firestore 까지 활용한 그럴듯한 서비스 만들어보기6 | 영상 |
| 07 | 작성한 그럴듯한 서비스, 안드로이드와 iOS 에뮬레이터에서 실행하기 | 영상 |
| 08 | 참고: 배포를 위한 작업과 제출 참고 사항 | 영상 |
| 09 | 참고: 플러터 개발에 챗GPT(chatGPT) 활용 실제 예 | 영상 |
19. Outro
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | [Outro] Flutter 와 풀스택 개발에 도움이 되는 이야기 | 영상 |
20. 강의 완강 인증서 발급
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 강의 수강평 및 제안사항 | 링크 |
| 02 | 강의 완강 인증서 발급 | 수료증 |