Flutter DevTools 을 활용해 퍼포먼스 Timeline Events 를 그려보면 다음과 같은 화면을 확인할 수 있다. 이는 Flutter 의 Main 스레드라고 볼 수 있는 UI 스레드에서 진행하는 작업으로, Build -> Layout -> Paint -> Compositing 을 차례로 수행한다. Compositing 까지 완료한 후 관련 데이터를 Raster 스레드로 보내주면, 해당 스레드에서 GPU 에게 명령을 전달하며 화면을 그리는 Rasterize 작업을 수행한다. 3~7 단계까지의 과정은 어느정도 이해가 되었으나, User input 이나 Animation 단계가 어떻게 동작하는지, VsnycProcessCallback 은 무엇이고 Animator::BeginFrame 이 무엇인지..
StatelessWidget widget 은 app's UI 의 blueprint, configuration 조각에 불과하다. 이 configuration 은 무엇을 위해 필요할까? element 다. element 는 screen 에 실제로 무엇이 보여질지를 나타낸다. widget 이 tree 에 마운팅 될 때 createElement() 메소드를 호출하며 일치하는 element 를 생성한다. StatelessWidget 은 StatelessElement 를 생성한다. 그런데 만약 데이터 변화에 따라 인터페이스를 rebuild 하고 업데이트 하려면 어떻게 해야할까? StatelessWidget 은 말그대로 stateless 이기 때문에 불가능하다. 해당 위젯은 data 변화를 트랙할 수 없다. Stat..
Flutter 렌더링 관련 두가지 주요한 명제가 있다. Everything's a Widget. A widget is an immutable description of part of a user interface Flutter 는 성능상의 이유로 widget 을 immutable 하게 관리한다. 만약 mutable 하다면, 위젯의 상태가 변했을 때 업데이트를 위해선 모든 위젯 내부의 상태를 비교해야 한다. 이를 immutable 하게 관리하고, 위젯의 상태가 변하면 새로운 위젯을 생성하는 방식을 사용하면, 업데이트를 위해서 단순히 같은 인스턴스인지만 확인하면 된다. Flutter 는 어떻게 UI 의 상태를 관리할까? 이를 이해하려면 Flutter 가 관리하는 3가지 트리에 대하여 알아야 한다. Tree ..
Dart 의 Event Loop 이란 무엇인가? 프로그램 수행중에 mouse click, file I/O 완료 등과 같은 다양한 이벤트가 비동기적으로 일어나는데, Dart 에선 이를 적절히 처리하기 위해 각 isolate 별로 event loop 를 유지한다. 어플리케이션이 실행되면 event loop 에선 매번 루프를 돌며 evenet queue 에 새롭게 쌓인 이벤트를 처리한다. 위 이미지에선 event loop 가 event queue 에서만 이벤트를 꺼내오만, event queue 외에도 microtask queue 가 존재하며, event loop 에서는 microtask 를 event 보다 우선적으로 처리한다. (이벤트 큐가 쌓여있을 때 새롭게 microtask 가 들어오면, 다시 micro..
Isolate 가 뭘까? Dart 는 많은 다른 프로그래밍 언어와 마찬가지로 스레드를 사용하여 여러개의 작업을 동시에 처리한다. 그러나, 일반적인 많은 언어들과 달리 Dart 의 스레드는 메모리를 공유하지 않는다. Dart 에선 이러한 특별한 방식의 수행 스레드를 Isolate 라고 정의한다. 각각의 isolate 는 다른 힙 영역을 사용하기 때문에 멀티 스레딩의 비교적 복잡한 문제인 동기화에 대하여 고려할 필요가 없다. 즉, race conditions 같은 문제가 기본적으로 발생하지 않는다. 왜 Isolate 를 사용하는가? 간단한 답변으로 코드를 병렬적으로 수행하기 위함이다. 특히 멀티코어를 사용할 경우엔 물리적으로 병렬적인 코드가 수행되어 훨씬 빠른 속도를 퍼포먼스를 보일 것이다. 그러나 이 답변..
