본문 바로가기

DevOps/flutter

1장 플러터 개발 소개 (App Brewery)

https://www.appbrewery.co/courses/548873/lectures/9985809

 

What is Flutter?

The Complete Flutter Development Bootcamp with Dart

www.appbrewery.co

#Flutter 소개

 

플러터가 무엇인지 소개한다.

아이폰 앱 개발자가 유명한 앱을 개발했는데 여러 문제가 발생한다.

사용자들이 안드로이드 앱을 개발해달라고 요청해서 결국 개발자는 안드로이드 앱 개발을 공부한 뒤 앱을 출시한다. 하지만 또 다른 문제가 발생한다. 버그를 고치거나 새로운 기능을 추가하려면 두 앱을 모두 고쳐야하는 것이다. 또한 스마트폰 아이폰 버전마다 크기가 다르고 비율도 달라서 화면의 인터페이스가 깨지는 문제가 발생한다. 

하지만 플러터는 냉장고 화면이라도 모든 사이즈에 적용가능한 훌륭한 인터페이스를 제공한다. 

또한 안드로이드, 아이폰 기본 디자인인 머터리얼, 쿠퍼치노 디자인을 사용할 수 있는 위젯을 제공한다.

그리고 버튼을 누를 때마다 숫자가 올라가는 데모앱을 보여주며 얼마나 쉽게 앱을 개발할 수 있는지 설명한다. 

 

https://www.appbrewery.co/courses/548873/lectures/9985813

 

Why Flutter?

The Complete Flutter Development Bootcamp with Dart

www.appbrewery.co

#Flutter만의 특별한 장점

 

왜 플러터를 사용해야하는지 설명한다.

하나의 코드로 안드로이드, 아이폰 앱 두개를 개발할 필요가 없고 다른 언어를 배울 필요도 없다. 플러터는 다트 언어 하나로 개발이 가능하다. 다트는 최신 객제치향 언어와 매우 유사하다. 그리고 넌 곧 웹, 데스크탑 앱도 다트로 개발할 수 있게 될 것이다. 

심플하고 유연한 레이아웃 시스템을 제공한다. 아이폰은 출시 이후 크기의 사이즈의 아이폰, 아이패드를 만들었고 안드로이드는 심지어 비율마다 회사, 기종마다 모두 다르다. 앱 개발을 위해선 이러한 레이아웃을 모두 지원해야한다. 이러한 기종이 많아질수록 화면 구성의 복잡성은 더더욱 힘들어진다. 플러터는 웹을 추종한다. 부트스트랩을 사용하면 웹은 크기가 다양하게 변하지만 모든 사이즈의 화면을 지원한다. 

아이폰 앱을 개발하려면 저장하고 빌드하고 올리는데 많은 시간이 걸린다. 플러터는 수정 후 저장하자마자 디자인이 바로 변한다. 

마지막으로 플러터는 오픈소스이기 때문에 오리지날 소스코드를 볼 수 있다. 아이폰은 내장코드를 알 수 없었다.  반면 플러터 내장 모듈을 클릭하면 어떻게 코드가 되어있는지 볼 수 있고 커스텀하게 수정도 가능하다. 플로팅 액션 버튼을 예로 들며 커스텀하게 바꾸는 방법을 설명한다. 

 

https://www.appbrewery.co/courses/548873/lectures/9985823

 

The Anatomy of a Flutter App

The Complete Flutter Development Bootcamp with Dart

www.appbrewery.co

#플러터 화면 구현 방법

 

플러터는 트리구조의 레고 블럭과 유사하다. scaffold 를 생성한다. 이것은 앱의 빈 스크린을 말한다. 여기에 메뉴버튼에 해당하는 AppBar를 추가한다. 그리고 본문에 해당하는 Container를 넣고 그 안에 Column을 넣어 화면을 위아래로 슬라이스(Vertically 구성) 할 수 있게 한다. Row와 Text를 넣는다. 또 Row에는 Text와 Icon을 넣을 것이다. 이거는 당연 Horizontally 해질 것이다. Text대신 외부에 올라온 이미지를 넣으려면 Network Image로 교체해도 된다.

Scaffold(
	appBar: AppBar(),
	body: Container(
		child: Column(
			childeren: [
				Row(
					Text(),
					Icon(),
				),
				Text(),
			]
        )
    ),
)

 

https://www.appbrewery.co/courses/548873/lectures/9985804

 

[Optional] How to Get the Most Out of the Course

The Complete Flutter Development Bootcamp with Dart

www.appbrewery.co

#강의수강방법, 코딩공부방법

 

이 과정을 어떻게 해야하는지 설명한다.

모든 레슨은 10분 내로 되어 있을 것이다. 영상을 보면서 중간중간 멈추고 코드를 타이핑하면서 배우는 것보단 우선 10분동안 보면서 어떻게 코드가 작성되는지 이해하는 것을 추천한다. 그리고 모두 이해한다음 스스로 코딩을 하는 것이 낫다고 생각한다.

타이핑을 공부하고 싶으면 keybr.com에서 타이핑 연습하는 것이 더 낫다. 이 과정은 타이핑이 아니라 프로그래밍을 배우는 것이다.

그리고  한 페이지에 키워드 내용, 요약 형식으로 노트를 해라.

복습을 위해 영상의 스피드를 활용한다. 이미 앞서서 영상을 들었다면 2배의 속도로 영상을 다시 듣는다. 영어를 못한다면 속도를 느리게 해서들어도 좋다. 단 절대 영상을 Skip하면 안된다. 이 과정은 천천히 실력이 향상되도록 매우 정교하게 강의를 구성했다. 리뷰를 남겨서 나중에 다시 활용하는 것도 좋다. 

처음 배우는 것은 무엇이든 힘들다. 다만 연습하고 반복해야한다. 훌륭한 프로그래머는 그들의 시간 90%를 코드를 보는데 사용한다. 무엇이 문제일까? 왜 안 되는 것일까? 포기하지말고 고민하고 구글과 스택오버플로우에서 검색하자. 여기에 문제에 대한 똑같은 질문과 조언이 있을 것이다. 이러다보면 실력이 매우 향상되어 있을 것이다. 

 

 

 

'DevOps > flutter' 카테고리의 다른 글

2장 Mac Flutter 개발환경 설정  (0) 2021.08.05
플러터(fluttter)란?  (0) 2020.04.11