joseph.c

joseph.c

진정한 지식의 가치는 그것을 나눌 때 드러납니다.

Today I Learned 5회차 - Flutter 학습 여정 복습 🔥

2 분 소요

지난 9월 15일부터 18일까지 진행한 Flutter 학습 내용을 종합적으로 복습해보겠습니다. 4일 동안 Dart 기초부터 Firebase 연동까지 정말 많은 것들을 배웠네요! 📚✨

📋 학습 여정 요약

🗓️ 9월 15일 - Dart 기본 문법과 Flutter 시작

  • Dart 언어 기초: 함수, 비동기 처리(async/await), Future 개념
  • Flutter 위젯 트리: 컴포넌트 기반 UI 구조 이해
  • StatefulWidget: 상태 관리와 setState 메커니즘
  • 상태 끌어올리기: 위젯 간 데이터 공유 방법
  • 실습: 카드 짝 맞추기 게임 구현

🗓️ 9월 16일 - Flutter 위젯 기초 마스터

  • 프로젝트 구조: pubspec.yaml, assets 관리
  • 기본 위젯들: Text, Image, Icon 활용법
  • 레이아웃 위젯: Column, Row, Stack의 정렬과 배치
  • 크기 조절: SizedBox vs Container 차이점과 활용
  • 공간 분할: Expanded, Spacer로 유연한 레이아웃
  • 실습: 무지개 화면 만들기

🗓️ 9월 17일 - Flutter 위젯 심화와 인터랙션

  • StatefulWidget 생명주기: initState, build, dispose 등
  • 사용자 입력: TextField, TextEditingController
  • 리스트 처리: ListView.builder, ListView.separated
  • 내비게이션: BottomNavigationBar + IndexedStack
  • 페이지 라우팅: Navigator.push/pop을 통한 화면 전환
  • 실습: TODO 앱 UI 구현

🗓️ 9월 18일 - Firebase 연동과 백엔드 통합

  • Firebase Firestore: NoSQL 데이터베이스 개념
  • CRUD 작업: Create, Read, Update, Delete 구현
  • 실시간 데이터: 클라우드 기반 데이터 동기화
  • 구글 로그인: 암호화 개념과 OAuth 인증
  • 실습: TODO 앱에 Firebase 연동

🎯 핵심 개념 정리

1. Flutter의 핵심 철학

모든 것이 위젯(Everything is a Widget)
위젯 트리를 통한 컴포지션 패턴
상태와 UI의 분리

2. 상태 관리의 진화

StatelessWidget → StatefulWidget → 상태 끌어올리기
setState()를 통한 UI 재빌드
부모-자식 간 콜백을 통한 데이터 전달

3. 레이아웃 설계 원칙

Container > SizedBox (성능 최적화)
Column/Row의 MainAxis vs CrossAxis
Expanded를 통한 공간 활용
Stack을 통한 겹치기 배치

4. 사용자 경험 향상

TextField의 다양한 속성 활용
ListView를 통한 스크롤 최적화
Navigator를 통한 직관적인 페이지 전환
BottomNavigationBar로 앱 내비게이션

5. 백엔드 연동 패턴

Firebase 초기화 → 컬렉션 참조 → CRUD 작업
async/await를 통한 비동기 처리
실시간 데이터 동기화

💡 개발하면서 깨달은 것들

🔍 성능 최적화

  • ListView vs SingleChildScrollView: 대량 데이터 처리 시 ListView가 성능상 유리
  • Container vs SizedBox: 단순 크기 조절은 SizedBox가 경량
  • 위젯 분리: 재사용 가능한 컴포넌트로 분리하여 코드 관리

🎨 UI/UX 설계

  • 레이아웃 우선 설계: UI를 보고 먼저 골격을 잡은 후 세부 스타일링
  • 사용자 인터랙션: GestureDetector로 모든 위젯을 터치 가능하게
  • 키보드 처리: TextField 사용 시 FocusScope를 통한 포커스 해제

🗄️ 데이터 관리

  • 상태 끌어올리기: 공통 상태는 최상위 위젯에서 관리
  • Firebase 활용: 서버 없이도 실시간 데이터베이스 구축 가능
  • 데이터 흐름: 단방향 데이터 흐름으로 예측 가능한 상태 관리

🚀 다음 학습 목표

  1. 상태 관리 라이브러리: Provider, Riverpod, Bloc 패턴 학습
  2. 애니메이션: Flutter의 다양한 애니메이션 효과 구현
  3. 네이티브 연동: 플랫폼별 기능 활용 (카메라, GPS 등)
  4. 테스팅: 단위 테스트와 위젯 테스트 작성
  5. 배포: 앱스토어/플레이스토어 배포 과정

📈 학습 성과

4일간의 집중 학습을 통해:

  • ✅ Dart 언어 기본 문법 이해
  • ✅ Flutter 위젯 시스템 완전 이해
  • ✅ 상태 관리 패턴 습득
  • ✅ Firebase를 활용한 백엔드 연동
  • ✅ 완전히 동작하는 TODO 앱 완성

정말 짧은 시간에 많은 것을 배울 수 있었습니다. 특히 Flutter의 ‘모든 것이 위젯’이라는 철학이 처음엔 어색했지만, 이제는 이 구조의 강력함을 느끼고 있습니다.

앞으로도 꾸준히 학습하여 더 복잡하고 실용적인 앱을 만들어보겠습니다! 🔥💪

댓글남기기

참고