From b24cfa32d7dd7cb691fc80eacc728b372c393bf5 Mon Sep 17 00:00:00 2001
From: Roo Ryu <34956359+deepbig@users.noreply.github.com>
Date: Sun, 4 Aug 2024 01:27:32 +0900
Subject: [PATCH] Create ch05.md
---
.../ch05.md" | 112 ++++++++++++++++++
1 file changed, 112 insertions(+)
create mode 100644 "hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/ch05.md"
diff --git "a/hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/ch05.md" "b/hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/ch05.md"
new file mode 100644
index 0000000..c8359f3
--- /dev/null
+++ "b/hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/ch05.md"
@@ -0,0 +1,112 @@
+# 05. 플러터 입문하기
+
+## 5.1. 플러터 소개
+
+- Flutter는 구글이 구현한 cross platform framework.
+- 초기엔 AOS, iOS 앱만 지원했지만, 현재는 웹, macOS, windows, linux 데스크톱 앱까지 지원.
+- Flutter로 개발하면 한 소스 코드로 수많은 플랫폼에 대응할 수 있어서 개발 비용을 아끼고 관리 부담을 줄일 수 있음.
+- Flutter는 React Native에 비해 상대적으로 다루기 쉽고, 크로스 플랫폼 호환성이 상당히 자연스러움 (플랫폼 간의 이질감이 적음.)
+ - 기존 크로스 플랫폼 프레임워크들은 코드를 네이티브 프레임워크 코드로 전환하는 데 중점을 둠.
+ - 하지만 플러터는 Skia 엔진이라는 2D 렌더링 엔진과 직접 통신을 하기 때문에 스키아 엔진이 실행되는 플랫폼에서는 똑같은 API를 사용해서 프로그래밍 할 수 있음.
+ - 이런 장점 덕분에 플러터 프레임워크는 어떤 플랫폼이든 일관된 UI를 제공할 수 있음 (= 플랫폼별 UI 디버깅 부담이 적음.)
+
+### 5.1.1. 플러터 구조
+
+- 플러터 프레임워크는 세 계층으로 나눠져 있음.
+ - embedder 계층: 하드웨어와 가장 가까운 low level.
+ - 임베더는 플러터가 현재 지원하는 6개 플랫폼의 네이티브 플랫폼과 직접 통신을 하고 운영체제의 자체적 기능을 모듈화해둔 계층
+ - 이 모듈들은 각 플랫폼의 네이티브 언어로 작성되어 있음.
+ - engine 계층: middle level.
+ - 이 계층은 대부분 C++로 작성되어 있으며 플러터 코어 API와 스키아 그래픽 엔진, 파일시스템 그리고 네트워크 기능 등이 정의돼 있음.
+ - framework 계층: 마지막 계층 (개발자가 실제 개발하는 계층. Dart 언어 사용)
+ - 프레임워크 계층에는 플러터 프레임워크를 사용하는 데 필수적인 위젯, 애니메이션, 머티리얼 패키지, 쿠퍼티노 패키지 등이 있음.
+- 이렇게 세 계층으로 나뉘고 잘 모듈화된 아키텍처 덕분에 플러터는 쉽게 여러 플랫폼을 지원하고 일관된 API 및 개발 경험을 제공해줌.
+
+- 플러터의 스키아 엔진 사용의 장점
+ - 대부분의 크로스 플랫폼 앱 개발 프레임워크들은 웹뷰를 사용하거나 각 플랫폼의 UI 라이브러리들을 사용함.
+ - 플러터는 웹뷰를 사용하지 않고 직접 스키아 엔진을 사용해 화면에 UI를 그려냄.
+ - 이때 새로 렌더링이 필요한 위젯들만 렌더링하기 때문에 다른 크로스 플랫폼 앱 개발 프레임워크보다 상당이 높은 퍼포먼스를 보임.
+ - 예를 들어,
+ - react native는 javascript bridge를 통해서 플랫폼과 통신함.
+ - 또한 플랫폼의 UI(OEM 위젯)을 그대로 사용함.
+ - 그래서 플랫폼과 리액트 네이티브 간 통신을 할 때 필요한 리소스 비용이 상당히 높음.
+ - 하지만 플러터는 위젯을 스키아 엔진에 직접 그려내고 필요한 제스처 및 이벤트를 브릿지를 통하지 않고 실행하기 때문에 리액트 네이티브에 비해 상당히 빠른 퍼포먼스를 보여줌.
+
+## 5.2. Hello Flutter 앱 만들기
+
+### 5.2.1. 안드로이드 스튜디오에서 프로젝트 생성
+
+- New Flutter Project → Generators → Flutter → Project 이름 및 정보 생성 → Create
+
+
+
+- Project type: Application이 일반 플러터 프로젝트임.
+- Organization: 프로젝트 먼들 아이디 (앱을 마켓에 출시할 때 식별하는 값) 예: [bandiboodi.com](http://bandiboodi.com) → com.bandiboodi.[앱 이름]
+
+### 5.2.2. 가상 머신 테스트 환경
+
+- 실제 기기 없이 안드로이드 에뮬레이터와 iOS 시뮬레이터에서 테스트하는 방법.
+
+### 안드로이드 애뮬레이터 생성하기
+
+- Device Manager → Add a new device → device 선택 후 Next → OS 선택 후 Next → 에뮬레이터 이름 설정 → Advanced Settings → Internal Storage = 8GB로 변경 → Finish
+
+
+
+- 재생 버튼 클릭 시 생성한 안드로이드 에뮬레이터 실행됨.
+
+
+
+### iOS 시뮬레이터 실행하기
+
+- 상단에 있는 device 선택 항목 클릭 → Open iOS Simulator → Xcode에 설정한 iOS 시뮬레이터 앱이 자동으로 실행됨.
+
+
+
+
+
+## 5.2.3. ‘Hello Roo’ 출력하기
+
+- 플러터 프로젝트를 생성하면 항상 같은 샘플 프로젝트가 /lib 폴더 아래 main.dart 파일에 생성됨.
+
+```dart
+void main() {
+ runApp(
+ const MaterialApp( // 머티리얼 디자인 위젯
+ home: Scaffold( // Scaffold 위젯
+ body: Text( // Text 위젯
+ 'Hello Roo', // 마지막 매개변수 끝에 콤마 추가
+ ),
+ ),
+ ),
+ );
+}
+```
+
+- MaterialApp: material design 가빈의 위젯들을 사용하게 해주는 위젯.
+- Scaffold: MaterialApp 위젯 다음으로 위치하는 위젯으로 화면 전체를 차지하며 레이아웃을 도와주고 UI 관련 특수 기능을 제공해줌.
+- 예:
+ - 화면에 알림과 같은 스낵바를 실행
+ - 화면의 위에 앱바를 추가하거나 아래에 탭바를 추가
+- flutter에서 main() 함수 안에 runApp을 실행하고 그 안에 MaterialApp과 Scaffold 위젯을 추가하는 것이 기본 설정.
+- 플러터 코딩 표준: 마지막 매개변수 끝에 `,` 기호를 추가하는 코딩 표준이 있음.
+- 이후 안드로이드 에뮬레이터를 실행하여 확인.
+
+### 5.2.4. Center 위젯으로 중앙 정렬
+
+```dart
+void main() {
+ runApp(
+ const MaterialApp(
+ home: Scaffold(
+ body: Center( // 중앙으로 위치
+ Text(
+ 'Hello Roo',
+ ),
+ ),
+ ),
+ );
+}
+```
+
+