본문 바로가기

# 02/Flutter

[Flutter] 위젯 트리 Flutter 에는 화면을 구성하는 3개 트리 구조가 존재 한다. 개발자가 코드를 작성하는 위젯 트리(Widget Tree)와 Flutter 프레임워크가 화면을 만들 때 만드는 엘리먼트 트리(Element Tree), 렌더 트리(Render Tree) 이다. 위젯은 화면에 보일 뷰를 설명할 뿐 실제 화면에 출력할 대상은 아니다. 프레임워크에서 뷰 설명을 보고 위젯 트리를 참조해 실제 화면에 출력할 객체들을 별도의 트리 구조로 만든다. (플러터 인스펙터[Flutter Inspector]를 통해 위젯의 트리 구조를 확인할 수 있다.) Text 위젯을 사용하면 하위에 RichText 위젯이 자동으로 생성된다. 그리고 각 위젯의 상세 설명에서 어떤 위젯은 renderObject 정보를 가지고 있고 어떤 위젯은 ..
[Flutter] 플러터 아키텍처와 특징 플러터 아키텍처 앱 개발은 Dart 언어로 개발된 프레임워크에서 제공하는 다양한 API를 이용한다. 이렇게 개발한 앱을 플러터 엔진이 실행하는데 엔진은 대부분 C++로 작성되어 있다. 엔진이 제공하는 기능 가운데 플랫폼 채널은 각 플랫폼의 네이티브 코드와 연동하는 방법을 제공한다. 플러터는 애플리케이션의 화면을 스키아 그래픽 엔진으로 직접 출력한다. 플러터로 개발한 애플리케이션을 어느 플랫폼에서 실행하든 프레임워크와 엔진 부분은 같으므로 모든 플랫폼에서 동작하는 애플리케이션을 똑같은 코드로 작성할 수 있다. 각 플랫폼마다 어느정도 차이가 각 플랫폼에 맞게 실행되도록 하는 역할이 임베더이다. 임베더는 플랫폼에 종속된 부분이다. 안드로이드 용 임베더는 자바와 C++로, iOS와 macOS 용은 오브젝티브-C..
[Flutter] 크로스 플랫폼 앱 개발과 플러터 네이티브 앱 개발 네이티브 라고 하면 플랫폼에 종속된 방법을 의미하는 용어이다. 모바일 운영체제인 안드로이드와 iOS 처럼 각 플랫폼에 종속된 코드를 네이티브 코드라고 한다. 이런 네이티브 코드를 사용하면 각 플랫폼에서 제공하는 기법으로 최적화된 앱을 개발할 수 있지만, 다른 플랫폼에서는 서비스할 수 없다는 단점이 있다. 안드로이드 앱은 안드로이드 런타임(Android runtime, ART)에서 동작하므로 앱을 개발할 때 안드로이드 런타임에서 제공하는 라이브러리를 이용하고 언어는 자바나 코틀린을 사용한다. 반면에 iOS 앱은 코코아 터치 환경에서 실행되므로 코코아 터치에서 제공하는 라이브러리를 이용하며 개발 언어는 오브젝티브-C 또는 스위프트를 사용한다. 크로스 플랫폼 앱 개발 한 가지 기술로 여러 플..
[Flutter] 플러터 아키텍처! Flutter의 아키텍처는 크게 다음과 같은 레이어로 구성된다. Flutter Engine : Flutter 앱이 구동되는 기본 환경이다. Dart 언어로 작성된 애플리케이션 코드와 Flutter Engine이 구성된 C/C++ 코드가 결합되어 동작한다. (텍스트의 표시 및 형식을 처리) Flutter Framework : Flutter Engine 위에서 동작하는 UI 프레임워크이다. 앱 개발자는 Flutter Framework를 사용하여 UI 요소, 애니메이션, 그래픽 효과 등을 구현한다. (앱 위젯, 제스쳐, 애니메이션, 일러스트 및 자료를 처리하는 플랫폼) Dart Platform (embedder) : Dart 플랫폼은 Flutter Engine과 Flutter Framework의 기반 구조를 ..
[Flutter] 렌더링 원리 Flutter의 렌더링 원리는 다음과 같다. Flutter는 애플리케이션의 UI를 위해 커스텀 위젯 트리를 생성한다. 위젯 트리는 자신의 위치, 크기, 레이아웃, 스타일 등 각 위젯의 속성을 갖는다. Flutter는 각 UI 요소에 대한 그래픽 객체(graphics object)를 생성한다.(렌더링 트리) 이 객체는 각 UI 요소의 레이아웃, 스타일, 그래픽 효과 등을 정의한다. Flutter는 GPU에 최적화된 Skia 그래픽 라이브러리를 사용하여 렌더링 트리를 화면에 그린다. 마지막으로, Flutter는 다시 화면에 그려진 결과를 반영하여 애플리케이션의 UI를 갱신한다.(디스플레이 장치에 표시)
[Flutter] isolate / embedder / taskRunner Flutter에서 isolate는 독립적인 스레드의 단위를 의미한다. (Dart의 스레드와 같은 개념이다. ) isolate는 독립적인 메모리 공간 내에서 독립적으로 실행되는 프로세스이다. 이를 통해 개발자는 복잡한 앱을 구성하는데 필요한 병렬적인 처리를 쉽고 안전하게 수행할 수 있다. (스레드 끼리 메모리를 공유하면 한 스레드가 메모리를 변경할 때 다른 스레드가 실행되지 않도록 Lock을 걸어 공유 리소스를 보호해야 하는데 Lock 은 심각한 교착상태, 기아상태를 유발할 수도 있다. 따라서 독립적인 메모리 공간을 갖는 isolate 는 안정성을 높이는데 도움을 준다.) isolate은 Dart 프로그래밍 언어의 개념으로, 플러터 프레임워크에서도 지원한다. 예를 들어, 앱의 UI를 렌더링하는 동안 동시에..
[Flutter] StatelessWidget / StatefulWidget 생명 주기 Stateless Widget 생명 주기 Stateless Widget은 상태 변화가 없는 위젯으로 생명주기는 간단하게 다음과 같다. 위젯 생성: build() 메서드가 최초 호출될 때 생성된다. build() 메서드 호출: build() 메서드는 Flutter Framework에서 UI를 그리기 위해 호출된다. UI 그리기: build() 메서드에서 정의한 UI가 화면에 그려진다. 위젯 소멸: 위젯이 더 이상 필요하지 않을 때 소멸된다. Stateless Widget은 간단하게 build() 메서드만 호출하면 된다. build() 메서드가 호출될 때마다 새로운 위젯을 생성하지 않고 기존 위젯을 재사용한다. Stateful Widget 생명 주기 Stateless Widget 과 달리 Stateful w..
[Flutter] Widget / Stateless Widget / Stateful Widget / Inherited Widget Widget Flutter 에서 위젯은 화면에 표시되는 구성 요소를 나타내는 객체이다. 안드로이드에서 뷰라고 볼 수 있다. 버튼, 이미지, 텍스트, 입력 필드 등의 UI 뿐아니라 눈에 보이지 않는 요소 padding, center 등도 위젯이다. (네이티브 안드로이드 뷰를 정의할 때 내부 속성값으로 margin이나 padding 등을 정의해서 뷰의 크기나 위치 등을 지정하는데 이는 그저 단순 속성값일 뿐 뷰라고 칭하지는 않는다. 단, 플러터는 다 위젯으로 존재한다.) Widget은 Flutter의 구조적 요소이며, 다양한 위젯을 결합하여 앱의 디자인과 기능을 구현할 수 있다. Stateless Widget 값이 변경되지 않는 UI 요소를 나타낸다. 예를 들어, 화면에 표시되는 텍스트, 이미지 등이 이에 ..

티스토리툴바