오준석의 플러터 생존코딩 2.0 정리

지난10년간 모바일 앱 개발 플랫폼은 안드로이드와 IOS 로 양분화 되어 발전됨

하나의 모바일 앱을 개발하려면 안드로이드 ios 앱을 각각 만들어야 함

그러려면 각 플랫폼 개발환경에서 사용하는 언어를 알아야함

안드로이드는 자바 또는 코틀린을 배워야 하고,ios는 스위프트 또는 오브젝티브 -c 를 배워야함

이경우 개발자가 2명이 필요로함

한번의 개발로 안드로이드와 ios앱을 대응하려는 바람은 모바일 앱 초기부터 있었음

다양한 크로스 플랫폼 프레임워크가 등장 하고 사라지기를 반복 2017년 5월 구글에서 플러터를 발표함

• 앱 개발 방식

스마트폰 앱은 크게 네이티브, 하이브리드, 크로스 플랫폼 방식으로 개발

플러터 - 크로스 플랫폼

크로스 플랫폼이란?

한번 구현하여 안드로이드와 ios 각 플랫폼용 앱을 만들어줌

방식은 빌드 할때 네이티브 코드로 변환되기 때문에 결과적으로 네이티브 방식으로 개발했을때와 같은 성능을 보여줌

생산성과 품질을 모두 고려했을때 선호하는 방식

• 네이티브 방식 (안드로이드나 ios 같은 플랫폼 자체에서 제공하는 개발환경)

플러터는 앱뿐만 아니라 데스크톱 앱, 웹도 개발이 가능함

장점으로는 낮은 진입장볍, 높은 네이티브 성능, 예쁜 UI를 지원

플러터 개발언어는 Dart 언어인데 구글에서 웹 프론트 엔드로 개발한 언어였지만 지금은 플러터 개발에 주로 사용됨

플로터로 개발할수 있는 운영체제로는

윈도우 7 이상 (64bit)

맥OS

리눅스

• 32비트 운영체제는 동작하지 않음

개발환경 구성은 기존에 많이 해왔던 방식대로

SDK 설치 - 환경변수 등록 - 앱 개발에 필요한 도구 설치 (안드로이드 스튜디오 또는 vsCode) - 플러터 플러그인 설치

Dart 문법

• 다트언어 연습환경 (dartPad.dev)이 있음

다트는 main() 함수가 진입점임

문장끝은 세미콜론으로 마무리 해야함 - 안그러면 에러 발생

다트는 다음과 같은 타입을 제공함

※ check Point

int 와 double은 num 이라는 타입에 포함되어있음

ex ) num a = 10; num b = 10.0; 사용가능

dart는 타입추론이 가능함

var 를 사용하면 들어간 값을 보고 타입추론을함

• 하지만 타입추론보단 기본타입을 명시해주는걸 추천

상수 final, const 지원

변수값이 변하지 않도록 상수로 사용

ex) final String name = ‘홍길동’;

산술 연산자 지원

+,-,*,/,~/,% (더하기, 뺴기, 나누니, 몫, 나머지)

증감 연산자 지원 (전위, 후위)

비교 연산자 지원 (==, ≠, >,<,≥,≤)

논리 연산자 지원 (&&, ||, ==, !,≠)

타입 검사 지원 (

• is : 같은 타입이면 true
• is! : 다른 타입이면 true

)

접근지정자

변수명 앞에 _ 기호를 붙이지 않으면 외부에서 접근이 가능하고, 붙이면 접근 불가

getter, setter

프라이빗 변수에 접근하려면 게터와 세터 메서드가 필요함

_(접근지정자) 있으면 프라이빗 변수 이므로 외부에서 접근 가능하게 하려면 게터세터 작성 필요

 

열거 타입

상수로 정의하는 특수한 형태의 클래스

열거타입은 첫문자를 대문자로 쓰는게 관례

앞에 enum 키워드를 붙입니다.

중괄호에 상수값들을 나열함

• 사용 시기 한정된 상수 값 집합을 나타내기 위해 사용 직관적인 코드 작성이 용이 책에서는 switch 문을 함께 사용하는게 좋다고함 case가 검토하도록 강제 하기 때문에 에러 방지에도 효과가 있다고 함

컬렉션 (다트에서 말하는 컬렉션은 기본 제공하는 자료구조를 뜻함)

다트는 List, Map, Set 컬렉션을 제공함

1. Listex) List iteam = [’짜장면’,’라면’,’우동’]사용방법이 다른 언어의 배열과 흡사함print(iteam.length); ⇒ 3
2. print(iteam[0]); ⇒ 짜장면
3. 배열같지만 배열은 아님.
4. 다른 언어에서는 대부분 배열과 리스트가 별도로 제공되지만, 다트는 배열을 제공하지는 않음
5. Map요청하는 값이 없으면 null을 반환‘홍길동’ : ‘남성’}
6. ‘이순신’ : ‘남성’
7. var crinity = {
8. 순서가 없고 탐색이 빠른 자료구조 컬렉션입니다. 키 벨류 쌍으로 이루어져있음

1. Setadd()메서드 를 통해 집합에 추가 또는 삭제 가능var city= {‘서울’, ‘시흥’, ‘남양주’}
   crinity.add(’동탄’);crinity.contains(’서울’) ⇒ true
2. crinity.contains(’제주’) ⇒ false
3. crinity.remove(’시흥’);
4. contains() 는 찾고자 하는 자료가 집합에 있는지 bool 타입으로 반환
5. remove()
6. 집합을 표현하는 자료구조

프로젝트 구조 이해하기

1. 프로젝트를 구성하는 폴더
2. 프로젝트를 구성하는 파일

.idea : 개발 도구에 필요한 설정

.android : 안드로이드 네이티브 코드를 작성하는 부분

.build : 빌드시 생성되는 파일

.ios : IOS 네이티브 코드를 작성하는 부분

.lib : 다트 코드를 작성하는 부분

.test : 테스트 코드를 작성하는 부분

.gitgnore : Git 설정 파일. 버전 관리시 무시할 파일 규칙 작성 .metadata : 프로젝트가 관리하는 파일. 임의로 수정하지 않음 .packages : 각종 패키지 정보. 임의로 수정하지 않음 flutter_app.iml : 개발 도구에 필요한 설정 파일. 임의로 수정하지 않음 pubspeclock : 패키지 매니저가 이용하는 파일. 임의로 수정하지 않음 pubspec.yaml : 패키지 매니저가 이용하는 파일 README.md : 프로젝트 설명을 작성하는 파일

pubspec.yaml 

name: cts_app
description: cts app
version: 1.2.6+39

environment:
sdk: '>=2.18.4 <3.0.0'

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2

flutter:
uses-material-design: true

name

패키지의 이름입니다.어떤 곳이든 필수적으로 포함시켜야 하는 속성

description

해당 패키지의 대한 설명을 적는 곳입니다.

개인 패키지일 경우 옵션이지만 패키지를 게시하려면 필수적으로 포함 시켜야함

version

패키지의 버전을 의미함

environment

Dart SDK 환경을 설정하는 속성

sdk는 environment의 하위속성으로 sdk 버전을나타냄

dependencies

패키지의 의존성을 작성하는 곳임

주로 외부 패키지를 가져다 쓰기 위해 사용됨

예제로 보는 앱 구조

1.import 'package:flutter/material.dart';

2.void main() => runApp (MyApp ()); // runApp 함수에서 MyApp 인스턴스 전달

3.class MyApp extends StatelessWidget {MyHomePage()}

4.class MyHomePage extends StatefulWidget {

_MyHomePageState createState() ⇒ _MyHomePageState ()

}

5.class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
	return Scaffold(

	)
}

}

- 1,2,3 부분은 수정을 하지 않는다고 생각하면 됨(개발에 따라 다름)
    
- 4,5 부분은 화면을 나타내는 코드 임

모든 코드는 사실상 _MyHomePageState 에서 작성을 시작

화면을 그릴땐 2가지가 기본 클레스

😐StatelessWidget : 상태가 없는 위젯을 정의 하는데 사용

- 여기서 상태가 없다는 것은 한번 화면을 그려주고 그다음은 그리지 않는다는 뜻

화면이 로드될 때 한 번만 그려지는 State가 없는 위젯으로

변경이 필요한 Data가 없는 것을 의미하며

이벤트 또는 사용자 상호 작용에 의해 동작하지 않음

😐StatefulWidget  : 상태가 있는 위젯을 정의할때 사용

위젯이 동작하는 동안 Data 변경이 필요한 경우

화면을 다시 그려서 변경된 부분을 위젯에 반영하는 동적인 위젯으로

이벤트 또는 사용자 상호 작용에 의해 동작

 

 

Material Design App

 

머티리얼 앱 기본형태

현재 나온 대부분의 앱들은 머트리얼 디자인에 맞게 개발 해옴

구글에서 머티리얼 디자인 지원 라이브러리도 제공

• 머티리얼 디자인이란 2014년 구글 I/O 컨퍼런스에 공개되어 신규 안드로이드 운영체계인 롤리팝(5.0)부터 반영된 디자인 언어임.

 

 

머티리얼 앱 예제

 

😯 알고 넘어가요!

플러터에서 화면을 그릴때 보통 머트리얼 앱 디자인에 통일성을 위해 Scaffold 를 return 하면서 화면을 그려줌

Scaffold : 머터리얼 디자인 앱의 뼈대가 되는 위젯

만약 Scaffold 를 작성하지 않는 다면 상단 앱바가 없고 머티리얼 디자인이 적용안된 화면이 그려지므로 머티리얼 앱 구조를 유지하는것이 디자인 통일에 유익하다고함

머티리얼 앱 결론

단점 : 앱들의 개성적인 디자인이 사라지고 서로 유사해지면서 비슷한 느낌이 됨

장점 : 머티리얼 앱을 여태까지 사용하면서 사용자들은 앱이 어떻게 작동할지 짧은 시간안에 직관적 으로 예측할 수 있게 됨

디자인 통일을 위해서 머티리얼 앱 기본형태로 작성하는것이 좋은것 같음