13년차 응용프로그래머, Gemini에게 Flutter 배우기 - 1



1단계: 개발 철학 및 언어 적응 (1~2주)
기존 지식과 가장 크게 충돌하는 '생각의 전환'이 필요한 단계입니다.

Dart 언어 마스터 (3일이면 충분): C++, Object Pascal을 하셨다면 Dart는 아주 귀엽게 느껴지실 겁니다. Java나 C#과 매우 유사합니다. 대신 async/await를 통한 비동기 처리와 Null Safety 개념만 명확히 짚고 넘어가세요.

선언형(Declarative) UI 이해하기 (핵심):

MFC/Delphi (명령형): Button.SetWindowText(_T("Click"))나 Button1.Caption := 'Click'처럼 이미 존재하는 객체의 속성을 직접 변경했습니다.

Flutter (선언형): UI는 상태(State)의 결과물입니다. UI = f(State). 상태가 바뀌면 UI를 처음부터 다시 그리도록 지시합니다. 이 패러다임 전환이 가장 중요합니다.

2단계: 핵심 컴포넌트 및 레이아웃 (1주)
Delphi의 Palette나 MFC의 Resource Editor 대신, 코드로 화면을 배치하는 방식을 익힙니다.

모든 것은 위젯(Widget)이다: 화면에 보이는 글자, 버튼부터 눈에 안 보이는 정렬(Padding, Center)까지 전부 위젯입니다.

Stateless vs Stateful:

StatelessWidget: 화면이 한 번 그려지면 절대 변하지 않는 정적 컴포넌트

StatefulWidget: 유저 상호작용이나 데이터 변경에 따라 화면이 갱신되어야 하는 컴포넌트 (기존 TForm이나 CDialog처럼 상태를 가지는 화면)

기본 레이아웃 배치: Row, Column, Stack 세 가지만 알면 델파이의 Align이나 Anchors처럼 원하는 모든 레이아웃을 잡을 수 있습니다.

3단계: 상태 관리(State Management) 정복 (2주)
응용프로그램 개발자에게 가장 중요한 단계입니다. Flutter의 성패는 상태 관리를 얼마나 깔끔하게 하느냐에 달렸습니다.

왜 필요한가? Flutter는 전역 변수나 컴포넌트 간 직접 참조(예: Form2.Edit1.Text := ...)를 극도로 지양합니다. 하위 위젯으로 데이터를 넘기거나 위로 올리는 규칙이 필요합니다.

추천 테크 트리:

기본 내장 기능인 setState()로 맛보기

현재 Flutter 업계 표준이자 시니어 개발자가 구조적으로 좋아할 만한 Provider 또는 Riverpod 중 하나를 선택해 깊게 파기 (의존성 주입(DI)과 결합되어 있어 Delphi의 DataModule이나 MFC의 싱글톤 패턴처럼 비즈니스 로직을 분리하기 좋습니다.)

4단계: 기존 경험(MFC/Delphi) 매핑 및 심화 (2주)
12년 차의 내공을 Flutter에 이식하는 과정입니다.

비동기 및 네트워크 통신: http나 dio 패키지를 사용해 REST API(JSON 패런트 로그 분석 등)를 연동하는 법을 익힙니다.

플랫폼 연동 (MethodChannel): MFC/Delphi의 강점인 Win32 API 제어나 하드웨어 제어(C++ 라이브러리 연동 등)가 필요할 때가 있습니다. Flutter에서 C/C++ 코드를 직접 호출하는 Dart FFI나 네이티브 API를 호출하는 MethodChannel을 봐두시면 고유한 경쟁력이 됩니다.

데스크톱(Windows) 빌드: Flutter는 모바일뿐만 아니라 Windows 데스크톱 앱 빌드도 공식 지원합니다. 기존에 만들었던 간단한 Windows 유틸리티를 Flutter로 포팅해 보는 것을 첫 프로젝트로 강력 추천합니다.

https://rm-dart.web.app/guides/language/language-tour?utm_source=academy_site&utm_medium=article&utm_campaign=journal&utm_content=15.07.2024

Introduction to Dart

1단계로 위 공식페이지에서 "A tour of the Dart language" 부분을 대충 눈으로 읽어보며 이런 차이가 있구나 정도만 느끼고 넘어갔음 

---

이후 환경을 잡아보고 설치해보라고 하길래 VSCODE를 사용해서 설치 후 프로젝트를 생성하니 숫자 증가 앱이 디폴트로 생성됨

🚀 VS Code에서 첫 프로젝트 만들기
1.필수 확장 프로그램(Extension) 설치
	:최초 1회.VS Code의 왼쪽 마켓플레이스 탭(Ctrl+Shift+X)에서 Flutter를 검색해 설치하세요.
    (Dart도 함께 자동으로 설치됩니다.)
2.명령 팔레트 열기 및 프로젝트 생성
	:Ctrl + Shift + P. 상단 단축키로 명령 팔레트를 열고 **Flutter: New Project**를 입력 후 선택합니다.
    이어서 **Application**을 선택하세요.
3.폴더 선택 및 프로젝트 이름 입력
	:소문자만 가능.프로젝트 코드가 저장될 상위 폴더를 지정한 뒤, 프로젝트 이름을 입력합니다 (예: flutter_counter).
    주의: Flutter 프로젝트 이름은 **소문자와 언더바(_)**만 사용할 수 있습니다. 
    대문자는 쓸 수 없으니 myApp 대신 my_app 형태로 적어주세요.
4.시뮬레이터(디바이스) 선택
	:화면 오른쪽 아래.VS Code 우측 하단(Status Bar)을 보면 디바이스를 선택하는 영역이 있습니다. 
    Windows 데스크톱 개발에 익숙하시니 우선 가장 가볍고 직관적인 Windows (desktop) 또는 Chrome을 선택하시는 걸 추천합니다. 
    (모바일 에뮬레이터보다 구동이 훨씬 빠릅니다.)
5.앱 실행하기
	:F5 버튼.lib/main.dart 파일이 열려있는 상태에서 F5 키를 누르면 빌드가 시작됩니다. 
    잠시 후 숫자와 함께 + 모양의 플로팅 버튼이 있는 화면이 뜨면 성공입니다.

Main 구조와 build에 대해서 학습함

( Flutter의 위젯(Widget)은 실제 화면의 픽셀을 다루는 무거운 윈도우 핸들(HWND)이 아니라, 단순한 **설정값(C++의 가벼운 Struct 구조체 느낌)**에 불과합니다. build가 수백 번 호출되어도 메모리 타격이 거의 없으며, Flutter 내부의 핵심 엔진이 이전 위젯 트리와 새로운 위젯 트리를 비교(Diffing)하여 실제 픽셀 값에 변화가 생긴 컴포넌트만 쏙 골라서 다시 렌더링하기 때문에 60~120fps의 부드러운 성능이 나옵니다. )