6. Flutter 소개

Flutter를 학습하기에 앞서 전반적인 기능 소개와 UI에 적합한 이유에 대해 알아보고 기록했다.

 

• 크로스플랫폼 프레임워크

ios, mac, 안드로이드, window 등 어디에서나 개발이 가능하다.

구글이 제작하였다.

 

웹 어플리케이션도 가능하다.  

 

 

• 동작 원리

기존 swift나 java로 만든 것은 운영체제와 직접적으로 소통하는 방식을 취한다.

 

flutter는 기존 방식과 다르게 엔진이라는 것을 사용한다.

엔진은 C나 C++로 구성되어 있다.(JVM 생각하기)

엔진이 dart언어로 적힌 코드를 보고 화면 상에 구현한다.

 

운영체제 내에 내장된 플랫폼 위젯을 사용하지 않는다.

엔진이 프레임워크를 동작시키고 엔진이 그려주는 역할을 수행하게 된다.

 

유저의 앱 실행 -> 앱이 flutter라이브러리 불러옴 -> UI렌더링

 

가짜 위젯, 엔진이 실행한 위젯을 사용한다는 점에서 문제가 있기도 했다.

부자연스러워 보인다는 점이 문제점이다.

모든 것은 렌더링 엔진에 의해 실행되기 때문이다.

 

하지만, 이는 flutter를 통해 더 많은 것을 통제할 수 있다는 것을 의미한다.

운영체제의 영향을 받지 않기 때문에 여러 플랫폼에서 똑같이 보인다.

 

Flutter / 엔진 / embedder 3가지로 나눠서 동작한다.

 

embedder: 안드로이드, ios, mac, 윈도우, 리눅스를 위한 다양한 embedder가 존재한다.

                  호스트 플랫폼 상에서 엔진을 가동시키는 역할을 한다.

 

어플리케이션 시작 -> 엔진 가동(가상 머신) -> UI렌더링

 

• React Native와의 차이

React Native를 만들면 운영체제에 의해 만들어지기 때문에 플랫폼마다 다르게 보인다.

React Native를 사용하면 자바스크립트를 이용하여 운영체제와 소통한다.

호스트가 만든 위젯, 컴포넌트들을 사용하려면 이걸 사용하는 것이 좋다.

 

세심한 디자인이나 커스터마이징이 들어가면 Flutter를 사용하는 것이 낫다.

 

• 설치

이 부분에 정말 애를 먹었다.

강의보고 하려니 어떤 부분을 선택할 지 모르겠고, 그냥 하자니 놓치는 부분이 있을까 걱정했다.

 

일단 vsCode가 있기 때문에 이를 이용하여 진행하기로 결정했고

확장 프로그램으로 깔아줬다.

 

처음엔 users 로컬 폴더에 프로젝트를 생성했는데 이 폴더 자체가 보안성이 강해서

생성하는데 자꾸 오류가 떴다. 구글 출신 제미나이한테 물어보니

아예 새로운 폴더를 C: 에 생성해서 하면 좋다고 해서 이대로 진행했더니 성공했다!

 

아직 안드로이드 스튜디오를 설치하진 않았다.

강의를 좀 더 따라가보고 내 결과물이 잘 안나올 때 다시 한 번 설치해봐야겠다.

 

• main dart 파일 & 실행

설치가 완료되면 수많은 파일들이 존재하는데 우리는 main dart  파일만 신경쓰면 된다.

 

시뮬레이터를 선택해서 실행하면 원하는 화면에 원하는 내용을 실행시킬 수 있다.

플러터에 있는 모든 건 widget이다. 따라서 레고 블럭을 조립한다고 생각하면 된다.

 

우리가 원하는 App 클래스는 3개의 코어 위젯 중에서 하나를 상속받는다.

그리고 그 위젯은 build메소드를 구현해줘야 한다.

 

이 build 메소드는 내가 만드는 위젯의 UI를 빌드한다.

 

• root 위젯

기본 UI설정과 같은 재료들을 선택해줘야 한다. 앱의 시작점과도 같다.

2가지 옵션이 있다.

 

구글의 디자인 MaterialApp, 애플의 디자인 CupertinoApp

자신이 개발하는 것에 맞춰서 선택하면 된다.

 

구글이나 애플 디자인이라고 해서 자신의 커스텀마이징 된 앱을

만들지 못하는 것이 아니다. 

 

우선적으로 플러터에서

화면이 scaffold (구조)라는 걸 가져야 한다.

키워드로 동작한다.

 

위젯 안에 위젯 안에 위젯 이런 구조로 프로그래밍 한다.

따라서 class들을 사용해서 프로퍼티들을 넣고 사용하고 이런 식이다.

 

---

 

Dart언어 문법을 사용하기 때문에 해석이 그렇게 어렵지는 않았다.

다음에는 직접 UI를 개발해서 시뮬레이터를 돌려보고 기록해야겠다!