[Flutter 9기 창업반] 앱 개발 창업 부트캠프 38일차

오늘 챕터 3 블로그 앱 만들기 완료

 

📝 TIL: Flutter Blog App 개발 & 트러블슈팅

이번 블로그 앱 만들기를 실습하면서 학습한 핵심 개념과 해결했던 주요 에러 정리

 

 

1. 프로젝트 아키텍처 & 패턴 (Architecture & Patterns)

MVVM 패턴 적용

• Repository: 데이터 통신 담당 (PostRepository). Firebase Firestore와 직접 통신하여 CRUD를 수행
• ViewModel: UI 상태 관리 (HomeViewModel, DetailViewModel). 
  Riverpod의 Notifier를 상속받아 상태(state)를 변경하고 UI에 알림
• View: UI 렌더링. ConsumerWidget 등을 사용 → ViewModel의 상태 변화 구독

Repository 패턴과 Firebase

• CRUD 구현
  Create: docRef.set({...})
  Read: collectionRef.get() (단발성), snapshots() (실시간 업데이트 Stream)
  Update: docRef.update({...})
  Delete: docRef.delete()
  
• Stream 활용: postListStream() 메서드에서 snapshots()을 사용
  → 데이터 변경 시 실시간으로 앱에 반영되도록 구현

2. Dart 문법 및 트러블슈팅 (Troubleshooting)

 

🔴 Riverpod 버전 및 Notifier 사용 이슈

• 문제 상황: AutoDisposeFamilyNotifier를 사용하려고 했으나 버전 호환성 혹은 설정 문제로 인해 사용할 수 없었습니다.
• 해결: 대신 기본 Notifier 또는 AsyncNotifier 등을 활용하거나, 프로젝트 설정에 맞는 방식으로 상태 관리 클래스를 구현하여 해결했습니다. (현재 프로젝트는 flutter_riverpod: ^3.1.0 사용 중)

🔴 클래스 상속 에러 (Class Inheritance)

• 에러 메시지: Classes can only extend other classes.
• 원인: 클래스가 아닌 것을 extends 하려고 했을 때 발생
  (예: 잘못된 타입이나 존재하지 않는 클래스 지정).
• 해결: 올바른 부모 클래스(예: Notifier, ViewModel 등)를 상속하도록 수정

🔴 클래스 선언 에러 (Class Declaration)

• 에러 메시지: A class declaration must have a body, even if it is empty.
• 원인: 클래스 이름 뒤에 중괄호 {}를 빠뜨림.
• 해결: 클래스 선언부 뒤에 {}를 추가하여 빈 본문이라도 명시

🔴 문법 오류 (Syntax Errors)

• 세미콜론 누락: Expected to find ';' 에러. Dart에서는 구문 끝에 반드시 세미콜론
• 메서드 정의 누락: The method '...' isn't defined.
  Repository에 없는 메서드를 호출하려다 발생.
  해당 메서드(postListStream 등)를 올바르게 정의

🔴 타입 불일치 (Type Mismatch)

• FutureOr 반환 타입: Future를 반환해야 하는 함수에서 null이 반환될 가능성이 있는데
  반환 타입이 Non-nullable로 되어있던 문제 등을 수정

 

3. UI 및 위젯 (UI & Widgets)

• GridView: crossAxisCount(열 개수), childAspectRatio(비율) 등을 조정하여 그리드 레이아웃을 구성
• TextField 스타일링: 포커스 여부에 따라 테두리 색상이 변경되도록 커스텀하거나, 힌트 텍스트 스타일을 적용