| 작성자 | 임혜진 |
| 일 시 | 2024. 3. (목) 18:00 ~ 21:00 |
| 장 소 | 복지관 b128-1호 |
| 참가자 명단 | 임혜진, 이재영, 성창민, 김명원, 장원준 |
| 사 진 |  |
https://www.udemy.com/course/learn-flutter-dart-to-build-ios-android-apps/
위 링크의 강의 내용을 정리한 글입니다!
Basic1 - Getting a Solid Foundation
코드와 코드파일이 다트로 파싱됨. 다트가 내 코드를 분석
코드가 파싱되면 대상플랫폼에서 이해할 수 있게 해석되어야. 이 과정은 다양한 다트와 프러터 툴로 번역됨. 즉 다른 코드로 번역됨. ios나 android가 이해할 수 있는 코드로. 그렇게 해석된 코드 번들이 기기마다 실행됨
다트파일은 위에서 아래로 구문분석된 후 컴파일됨.
키워드(keywords)와 식별자(identifiers)
17
퀴즈 !
1. 플러터 프로젝트를 작업할 때 가장 많은 시간을 보내게 될 가장 중요한 폴더는 ?
- web
- android
- lib
- pubspec
answer: 3. lib
lib 폴더는 플러터 프로젝트를 작성할 “.dart” 코드 파일을 가지고 있는 폴더이다.
2. 플러터 앱의 entry point가 되는 파일은?
- android/app/build.gradle
- lib/app.dart
- pubspec.yaml
- lib/main.dart
answer : entry point란 프로그램이 시작하는 시점을 의미한다. 정답은 4번. 플러터 어플리케이션의 진입점은 lib/main.dart file이다.
오답: 2번은 main application 위젯이 있는 파일이다. 진입점은 아니다.
3. 다트 컴파일러의 주요 목적은?
- 다트 프로젝트 안의 패키지 자동적으로 불러오기
- 플러터 앱의 유저 인터페이스 생성하기
- 다양한 플랫폼에서 실행할 수 있도록 다트 코드를 변환하기
- 개발 중 다트 코드를 디버깅하기
정답 - 3번
4. 프로그래밍에서 함수란 무엇인가?
- data container
- 특정한 작업을 수행하는 일련의 명령어
- 코드를 컴파일할 수 있는 도구
- 유저인터페이스를 생성하기 위한 방법
정답 - 2번. 함수란, 호출되었을 때 특정한 작업을 수행하도록 고안된 명령어
5. 다트 파일 안의 패키지를 불러오려면 어떻게 해야하는가?
- use “pakage_name”
- include “pakage_name”
- import “pakage_name”
- require “pakage_name”
ans : 3) import “pakage_name”
6. 어떤 key ‘elements’가 포함되는가? 기기의 화면에 UI를 띄우는 시작 프로세스에서
- main 폴더와 runApp() 함수
- runApp()함수와 Main 위젯
- main 함수와 App 위젯
- main 함수와 runApp 함수
정답 - 4번. main 함수는 다트에 의해 자동적으로 실행되고, runApp()함수는 화면에 위젯이 나오도록 한다.
21
flutter widget cattalog? 스펠링 맞?
첫번째로 배우는 위젯. MaterialApp()
함수처럼 호출하는데 클래스 혹은 생성자 함수임
시작점으로 사용하는 주요 위젯
-
- MaterialApp()의 괄호 안에도 입력값이 필요함. 화면에 띄울 것
MaterialApp( home: ) - 화면에 뭔가를 디스플레이 하기 위해
어떤 종류의 위젯인지, 어떤 UI 요소가 앱 안에 디스플레이 돼야 하는지 정의
ex) MaterialApp(home: Text())
24
ex) runApp(MaterialApp(home: Text(’Hello World!’)) )
텍스트 위젯을 생성하고, Marterial App 위젯으로 넘기고, runApp()으로 넘어감
위젯과 위젯을 결합한 결과
- const
runApp(const MaterialApp(home: Text(’Hello World!’)) )
const를 통해 다트의 런타임 성능을 높일 수 있음
다시 같은 텍스트를 사용하면, 두번째 메모리 개체가 생성되는 대신에 기존의 메모리가 재사용됨
즉 const를 사용하면 다트가 동일한 값을 재사용 가능 → 메모리에서 데이터를 중복하는 것을 방지 → 앱의 메모리 효율 및 전반적 성능 상승
사용할 수 있는 모든 값 앞에 const를 사용하는 것이 좋음.
올바른 곳에 const를 사용하는 방법은 코드에디터가 알려주면, 하면 됨
26
Material - 전체 앱을 설정하는데 중요한 루트 위젯
scafford 위젯 - 우리 앱에 보기 좋은 화면을 설정하도록 돕는 위젯.
runApp(const MaterialApp(home: Scaffold(body: Text(’Hello World!’))))
이런게 위젯트리임
위젯안에 위젯 안에 위젯 ….
근데 이제 너무 길어 코드가
괄호를 닫을 때마다 콤마를 넣기 of vs에서 코드 자동화시키기fomat 문서명령
Format Document 맥 vs 단축키 : option + shift + F
27
근본적인 다트의 개념
다트는 type - safe language
작업하는 모든 값은 특정 타입을 가지고 있음
32
mac vscode 트리거 제안 option + esc
실습 !
text 스타일링 해보기
글씨 색상 흰색으로 변경, 글씨 크게 28로 변경
48 - Stateful Widgets
StatelessWidget과 Stateful Widgets의 차이
상태 위젯은 그 안에서 상태를 관리하게 해줌. ui가 바뀔 수 있는 상태.
50 모듈 써머리
- main.dart 가 가장 기본 파일. 플러터는 이 파일을 위에서부터 아래로 쭉 읽고 이 파일을 실행할 기기에 맞게 코드를 번역한다. main.dart 파일 안에 main() 메소드, 그리고 그 안에 runApp()이라는 내장 함수는 화면에 어떤 것을 띄울지 말하는 함수이다.
- 플러터는 위젯들의 조합이다. 위젯들은 서로 결합되며 플러터의 UI는 위젯들의 결합으로 이루어진다.
- 다트의 핵심적인 특징은 types, functions, variables. classes, object …
- 커스텀 위젯들 - statelessWidget은 내부적으로 상태변화를 시키지 못한다. image변수를 다른 사진으로 변경했을 때도 출력값은 콘솔에 찍히는 반면, UI상의 이미지는 변화가 없었다.
→ 파일을 하나 더 생성하여 그 안에 StatefulWidget을 상속받은 class를 만들어서 필요한 부분만 옮겨 주었다. 그러나 여전히 변화가 없었다.
→ setState() 메소드를 이용하여 변화를 줄 수 있었다. 변화에 따라 build함수가 다시 렌더링(?) 되어서 변화가 이루어진 곳을 찾아 실제 UI 상에서 바꾸었다.
- configuring widgets 많은 빌트인 위젯들은 configuration argument 들이 제공된다. 일반적으로 configuration objects 들이 사용된다.
- const로 성능을 최적화시킬 수 있고, 어디에 사용해야할지는 vs가 알려준다.
오늘도 모각코를 통해 배운 내용을 정리할 수 있어서 좋았다. 다음 번에는 플러터의 상태관리 패키지인 GetX에 대해 알아보아야겠다.