Create ch05.md

hong/flutter/코드팩도리의 플러터 프로그래밍/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
+
+<img width="789" alt="Screenshot 2024-08-03 at 12 46 42 PM" src="https://github.com/user-attachments/assets/b42c2a85-8b3f-45e2-aec3-68e65b7df927">
+
+- 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
+
+<img width="1167" alt="Screenshot 2024-08-03 at 12 51 14 PM" src="https://github.com/user-attachments/assets/29ea7b3d-4825-4356-9156-b25a8b87c3d8">
+
+- 재생 버튼 클릭 시 생성한 안드로이드 에뮬레이터 실행됨.
+
+<img width="551" alt="Screenshot 2024-08-03 at 12 57 25 PM" src="https://github.com/user-attachments/assets/2af85472-79d1-49e5-b95b-bcd0837bde61">
+
+### iOS 시뮬레이터 실행하기
+
+- 상단에 있는 device 선택 항목 클릭 → Open iOS Simulator → Xcode에 설정한 iOS 시뮬레이터 앱이 자동으로 실행됨.
+
+<img width="610" alt="Screenshot 2024-08-03 at 12 59 42 PM" src="https://github.com/user-attachments/assets/c4689563-32ce-43e4-8934-33b14e38b53e">
+
+<img width="686" alt="Screenshot 2024-08-03 at 1 00 13 PM" src="https://github.com/user-attachments/assets/0baf3062-7dd4-4db2-8a2f-a22c5dee1e88">
+
+## 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',
+        ),
+      ),
+    ),
+  );
+}
+```
+
+<img width="450" alt="Screenshot 2024-08-04 at 1 02 34 AM" src="https://github.com/user-attachments/assets/848cf18d-3cf8-446f-b5db-e6e7c1332909">