📝 효율성을 위한 Const Class

✏️ const class란?

Dart/Flutter에서 컴파일 타임 상수 객체를 만들기 위한 클래스
생성자 앞에 const를 붙이고, 해당 클래스로 만든 객체도 const로 생성해야 함
대표적으로 Text, Icon 같은 Flutter 위젯들이 이에 해당

✏️ Text 위젯에 뜨는 파란 줄의 의미

고정된 값으로 위젯을 생성했지만 const를 사용하지 않았을 때 발생
IDE 경고 메시지:

Use 'const' with the constructor to improve performance.

의미: const를 쓰면 성능이 더 좋아질 수 있다

✏️ 왜 const를 사용해야 할까?

불변 객체 (Immutable Object)

객체 생성 이후 속성 변경이 불가능한 객체
모든 필드가 final

class A {
  final String id;
  A(this.id);
}

상수 객체 (Const Object)

불변 객체 중에서도
생성자에 const가 붙어 있고
객체 생성 시 const로 생성한 경우
메모리에 캐싱되어 재사용됨

class A {
  final String id;
  const A(this.id);
}

const a1 = A('data');
const a2 = A('data');
print(identical(a1, a2)); // true

identical() → 두 객체가 완전히 같은 메모리 주소인지 비교

✏️ Text 위젯과 const

Text 위젯은 불변 객체
따라서 조건만 맞으면 const Text() 사용 가능

const Text('Hello');

---

✏️ const가 성능에 미치는 영향

핵심 개념

Flutter는 위젯 트리를 자주 rebuild함
하지만 상수 객체(const) 는

• rebuild 과정에서 다시 생성되지 않음
• build() 호출 자체가 생략됨

✏️ DevTools로 rebuild 횟수 확인하기

설정 방법

1. 앱 실행
2. Command Palette 열기
3. Open DevTools Performance Page
4. Track widget build counts 활성화

결과 비교

버튼 10번 클릭 시

• ✅ const 사용 → build 횟수 거의 없음
• ❌ const 미사용 → build 매번 호출

✏️ 언제 const를 써야 할까?

사용하면 좋은 경우

• 값이 고정된 위젯
• StatelessWidget 내부
• 아이콘, 텍스트, 패딩 등 UI 구성 요소

const Icon(Icons.home);
const SizedBox(height: 16);

사용할 수 없는 경우

• 런타임에 값이 바뀌는 경우
• 변수, 상태(State), context 의존 값 사용 시

---

✏️ 정리

const는 불변 + 캐싱 = 불필요한 rebuild 제거 → 성능 향상

Flutter에서는 "쓸 수 있으면 무조건 const"가 기본

---

📝 Clean Architecture

✏️ Clean Architecture란?

• 제안자: Robert C. Martin(Uncle Bob)
• 핵심 아이디어: 소프트웨어를 관심사(Responsibility) 별로 계층 분리
• 의존성 규칙: 항상 바깥 → 안쪽 단방향
• 내부 계층은 외부 계층을 모른다

목적

• 유지보수: 특정 부분(예: DB)을 바꿔도 다른 곳은 멀쩡함
• 테스트 용이성(Mock/가짜 데이터로 단위 테스트 가능)
• 프레임워크/플랫폼 변화에 강함

✏️ 클린 아키텍처의 4계층 (동심원)

Entities

비즈니스의 핵심 개념
순수 Dart 클래스

예: User, Movie

Use Cases

비즈니스 규칙 + 흐름
Entity를 사용해 무엇을 할지 정의

예: 영화 목록 조회, 회원가입

Interface Adapters

외부 ↔ 내부 변환 계층
Controller / Presenter / ViewModel
데이터 형태 변환 담당

Frameworks & Drivers

UI, DB, API, Flutter 프레임워크
언제든 교체 가능한 영역

✏️ Flutter에서의 계층 매핑

Presentation Layer

UI 및 상태 관리, 사용자와 만나는 곳

• Widget (ui) : 상태를 구독(Watch)하여 화면에 그림
• ViewModel : UseCase를 실행하고 그 결과로 상태(State)를 업데이트

Domain Layer

가장 안쪽, 순수함

• Entity : 비즈니스의 핵심 데이터 모델 (예: Movie)
• UseCase : 앱이 수행해야 할 구체적인 기능 단위 (예: FetchMoviesUseCase)
• Repository Interface : "난 이런 데이터가 필요해"라고 정의만 해둔 명세서

Data Layer

바깥쪽, 구현 담당

• Repository Impl : Interface를 실제로 구현하여 UseCase에 데이터 전달
• DataSource : 실제 데이터에 접근 (네트워크 통신, 로컬 DB)
• DTO (Data Transfer Object) : 서버에서 오는 데이터 형태 그대로를 담는 객체 (Entity와 분리하여 서버 변경에 대응)

중요: Domain은 Data를 모른다

✏️ 의존성 문제와 해결

문제

UseCase가 Repository 구현체를 직접 참조
→ 의존성 역전 위반

해결

Interface 도입
Repository는 Domain에 인터페이스로 정의
Data Layer에서 구현

DTO 사용 이유

• DataSource가 Entity에 의존하지 않게 하기 위함
• API/JSON 구조 변경 시 Domain 보호

영화 앱 예제 구조

lib/
 ├─ data/
 │   ├─ data_source/
 │   ├─ dto/
 │   └─ repository/
 ├─ domain/
 │   ├─ entity/
 │   ├─ repository/
 │   └─ usecase/
 └─ presentation/
     ├─ pages/
     │   └─ movie_list/
     └─ widgets/

✏️ 실행 흐름 (정방향)

1. 사용자가 버튼 클릭
2. View → ViewModel 호출
3. ViewModel → UseCase
4. UseCase → Repository(Interface)
5. Repository Impl → DataSource
6. DTO → Entity 변환
7. 결과를 다시 ViewModel → View

---

✏️ 테스트 전략

왜 Mock을 쓰나?

서버/API 없이도 로직 검증 가능
계층별 단위 테스트 가능

테스트 대상

• DTO 변환 테스트
• DataSource 테스트 (Mock AssetBundle)
• Repository 테스트 (Mock DataSource)
• UseCase 테스트 (Mock Repository)
• ViewModel 테스트 (Mock UseCase)

---

✏️ Riverpod + Clean Architecture

• ViewModel = Notifier
• UseCase는 Provider로 주입
• 테스트 시 Provider override로 Mock 주입 가능

✏️ 언제 쓰면 좋을까?

👍 추천

• 중/대형 프로젝트
• 팀 협업
• 테스트 중요 프로젝트

👎 비추천

• 작은 토이 프로젝트
• 단기 MVP

작은 프로젝트에선 오버엔지니어링이 될 수 있음

정리

클린 아키텍쳐 쓰는 이유

클린 아키텍처가 없을 때 (스파게티 코드)
손님이 오면 웨이터가 주문을 받고, 직접 주방에 들어가서 재료를 냉장고에서 꺼내고, 요리까지 해서 서빙
웨이터 한 명이 모든 걸 다 알아야 하고, 냉장고 위치가 바뀌면 웨이터가 일을 못 하게 됨 -> 엉망진창

클린 아키텍처를 적용했을 때

역할을 확실히 나눌 수 있음

• 홀 서빙 (Presentation Layer): 손님 주문만 받고 음식만 내줌. 요리법은 모름
• 셰프 (Domain Layer): 요리 레시피(비즈니스 로직)만 전문으로 알고 있음. 재료가 어디서 오는지 신경 안 씀
• 재료 담당 (Data Layer): 마트에서 재료를 사 오고 다듬어서 셰프에게 넘겨줌

이렇게 나누면 마트가 바뀌어도 셰프는 상관없고, 메뉴판 디자인이 바뀌어도 요리 맛은 변하지 않음!

인터페이스와 의존성 역전

인터페이스

너랑 나랑 지켜야 할 약속
인터페이스는 구체적인 기능이 아니라 "어떤 기능이 있어야 한다"라는 표준 규격

콘센트 = 인터페이스

• 콘센트는 전기를 준다는 약속만 지킴
• 거기에 선풍기를 꽂든, 토스터를 꽂든 콘센트는 상관하지 않음
• 플러그 모양(규격)만 맞으면 무엇이든 연결할 수 있음

DTO vs Entity

왜 같은 데이터를 두 번 정의할까?

DTO (Data Transfer Object)

밭에서 막 캐온 흙 묻은 당근
서버(API)에서 주는 날것 그대로의 데이터
우리 앱에는 필요 없는 정보(흙)가 묻어있을 수도 있고, 형식이 지저분할 수도 있음

엔티티 (Entity)

셰프가 요리에 쓰기 좋게 깨끗이 씻고 다듬은 당근
우리 앱의 핵심 비즈니스 로직에서 사용하는 깔끔한 데이터

데이터 계층(창고)에서는 흙 묻은 당근(DTO)을 받아서,
깨끗한 당근(Entity)으로 씻어서 도메인 계층(주방)으로 넘겨줌

클린 아키텍처는 ‘변경에 강한 구조’를 만드는 설계 방법

---

📝 ChatBot App 만들기 - UI

✏️ 프로젝트 구조

lib/
 ├ main.dart
 └ home_page/
    ├ home_page.dart
    └ widgets/
       └ chat_item.dart

✏️ ChatItem 위젯

📁 lib/home_page/widgets/chat_item.dart

채팅 화면에서 메시지 말풍선 1개를 담당하는 위젯
전달받은 값으로 UI만 그림

import 'package:flutter/material.dart';

class ChatItem extends StatelessWidget {
  const ChatItem({
    super.key,
    required this.content,
    required this.isReceived,
  });

  final String content;
  final bool isReceived;

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: isReceived ? Alignment.centerLeft : Alignment.centerRight,
      child: Container(
        decoration: BoxDecoration(
          color: isReceived ? Colors.purple[200] : Colors.grey[200],
          borderRadius: BorderRadius.circular(16),
        ),
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Text(
          content,
          style: TextStyle(
            fontSize: 16,
            color: isReceived ? Colors.white : Colors.black,
          ),
        ),
      ),
    );
  }
}

✏️ HomePage

📁 lib/home_page/home_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_chatbot/home_page/widgets/chat_item.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).unfocus();
      },
      child: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Expanded(
                child: ListView.separated(
                  padding: const EdgeInsets.all(20),
                  itemCount: 20,
                  separatorBuilder: (context, index) =>
                      const SizedBox(height: 10),
                  itemBuilder: (context, index) {
                    return ChatItem(
                        content: 'content', isReceived: index.isEven);
                  },
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: TextField(
                  decoration: InputDecoration(
                    border: MaterialStateOutlineInputBorder.resolveWith(
                      (states) {
                        return OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: BorderSide(color: Colors.purple[100]!));
                      },
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

📝 asChatBot App - Gemini AI 연동 및 API 키 관리

✏️ Gemini API 키 발급

발급 경로

API 키 발급 받기

발급 순서

1. Get API Key 클릭
2. 약관 동의
3. API 키 만들기
4. 발급된 키 복사 및 보관

✏️ 패키지 추가

Gemini SDK

flutter pub add google_generative_ai

상태 관리 (ViewModel용)

flutter pub add flutter_riverpod

✏️ API Key 관리 전략

API 키를 소스코드에 직접 작성 ❌

API 키를 분리하는 이유

GitHub 업로드 방지
키 변경 시 코드 수정 불필요
개발 / 배포 환경별 키 분리 가능

사용하는 방법

.env 파일 + dart-define 방식

.env 파일 생성

GEMINI_API_KEY=발급받은_API_KEY

VSCode 실행 설정 (.vscode/launch.json)

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "flutter_env",
      "request": "launch",
      "type": "dart",
      "toolArgs": ["--dart-define-from-file", "./.env"]
    }
  ]
}

코드에서 API 키 가져오기

String.fromEnvironment('GEMINI_API_KEY');

✏️ HomeViewModel 구현

채팅 상태 관리
Gemini AI와 통신 담당

Chat 모델

class Chat {
  final String content;
  final bool isReceived;

  const Chat({
    required this.content,
    required this.isReceived,
  });
}

content : 메시지 내용
isReceived : AI 응답 여부

HomeViewModel 구조

class HomeViewModel extends Notifier<List<Chat>> {
  @override
  List<Chat> build() => [];
}

상태: List<Chat>
초기 상태: 빈 리스트

Gemini 모델 생성

  final _model = GenerativeModel(
    model: 'gemini-3-flash-preview',
    apiKey: const String.fromEnvironment('GEMINI_API_KEY'),
  );

메시지 전송 로직

void send(String text) async {
  // 사용자 메시지 추가
  state = [...state, Chat(content: text, isReceived: false)];

  // Gemini 응답 요청
  final result = await _model.generateContent([Content.text(text)]);

  // AI 응답 추가
  if (result.text != null) {
    state = [...state, Chat(content: result.text!, isReceived: true)];
  }
}

Provider 선언

final homeViewModel =
  NotifierProvider<HomeViewModel, List<Chat>>(() => HomeViewModel());

✏️ HomePage 수정 (UI + 상태 연동)

StatelessWidget → ConsumerStatefulWidget
Riverpod 상태 구독
TextField 입력 시 AI 호출

상태 구독

final state = ref.watch(homeViewModel);

채팅 리스트 렌더링

ListView.separated(
  itemCount: state.length,
  itemBuilder: (context, index) {
    final item = state[index];
    return ChatItem(
      content: item.content,
      isReceived: item.isReceived,
    );
  },
)

메시지 전송 처리

onSubmitted: (value) {
  ref.read(homeViewModel.notifier).send(value);
  textController.clear();
},