실전

Firebase와 Flutter

인증, 데이터베이스, 스토리지, 푸시 알림 같은 백엔드 기능을 빠르게 붙입니다.

핵심 개념

Firebase와 Flutter 주요 항목

Firebase가 맡는 일

Firebase Auth는 로그인과 사용자 식별을 제공합니다.

언제 쓰나: Firestore는 실시간 동기화가 가능한 NoSQL 데이터베이스입니다.

Flutter에서: Storage와 Messaging은 파일 업로드와 푸시 알림 기능에 활용됩니다.

await Firebase.initializeApp();
final user = FirebaseAuth.instance.currentUser;
final label = user == null ? '로그인 필요' : '로그인 완료';

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '강의 목록',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        Chip(label: Text('로딩 완료')),
        Chip(label: Text('Widget')),
        Chip(label: Text('Layout')),
        Chip(label: Text('State'))
      ],
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('3개의 강의를 불러왔습니다.')
      ],
    )
    ],
  ),
)

운영 주의점

보안 규칙을 잘못 작성하면 데이터가 노출될 수 있습니다.

언제 쓰나: 무료 할당량과 과금 구조를 이해해야 합니다.

Flutter에서: 개발, 스테이징, 운영 프로젝트를 분리하면 사고 가능성을 줄일 수 있습니다.

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text('운영 주의점', style: TextStyle(fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('보안 규칙을 잘못 작성하면 데이터가 노출될 수 있습니다.'),
      ],
    ),
  ),
)

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '운영 주의점',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    )
    ],
  ),
)

확장 개념

Firebase 연결 흐름

FlutterFire CLI로 프로젝트와 플랫폼별 설정 파일을 연결할 수 있습니다.
Authentication, Cloud Firestore, Storage, Messaging은 자주 함께 쓰이는 기능입니다.
보안 규칙과 비용 한도는 개발 초기부터 확인해야 운영 중 사고를 줄일 수 있습니다.

코드

예제

flutter pub add firebase_core firebase_auth cloud_firestore

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '실행 출력',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$ flutter pub add firebase_core firebase_auth cloud_firestore
Resolving dependencies...
Changed pubspec.yaml')
      ],
    )
    ],
  ),
)

다음 단계

실습 체크리스트

Firebase 프로젝트 연결firebase_core 추가보안 규칙 작성환경 분리

출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
Dart languageDart 문법 자체가 궁금할 때 함께 봅니다.