Weekly Flutter 19

함수의 실행을 제한하자. Debounce와 Throttle

이번에 무한 스크롤이 있는 검색페이지를 만들게 되었다. 그런데, 가끔씩 스크롤을 내리다 보면 페이지를 여러개 가져와버리고, 검색편의성을 위해 넣은 자동완성은 쓸데없이 많은 api요청으로 트래픽을 증가시킨다. 그래서 비용을 조금이라도 아껴보고자 debounce와 throttle개념을 이용해보기로 했다. 성능을 향상시키거나 비용을 줄이고 싶은 경우에 debounce와 throttle이라는 개념을 이용해서 사용자의 의도와 상관없이 반복적으로 실행되는 함수의 실행 빈도를 제어를 할 수 있다. 개념 Debounce와 Throttle은 특정 함수의 실행을 제한하는데 목적을 두고 있다. Debounce는 특정기간동안 추가로 실행되지 않으면 함수를 실행한다. Throttle은 함수를 실행 하고 특정 기간동안의 추가실행..

Weekly Flutter 2023.08.17

Flutter와 Material 3

flutter는 Android의 Material Design을 프레임워크 전반에 기본적으로 적용시킨다. 물론 원한다면 ios의 Cupertino Design을 사용할 수도 있지만, 탑재된 위젯의 양과 수준이 다르다. Material Design이라는 것은 무엇일까? 다음 사이트(https://developer.android.com/guide/topics/ui/look-and-feel?hl=ko)에 따르면, Material Design은 일종의 디자인 가이드라인이다. 여러 위젯 구성 요소나, UX의 측면에서 어떤 요소들을 어떻게 구성해야 하는 지 방향성을 제시해준다. 또한 Android 개발 단계에서는 Material Design을 구현하기 위한 일련의 추상화된 클래스들도 몇 가지 제공한다. flutter..

Weekly Flutter 2023.07.18

flutter 렌더링 과정에 대해서 알아보자

우리가 작성한 flutter 코드는 어떤 과정을 거쳐서 화면에 표시되는걸까? 엉성하게 보고 대충 이렇군..넘어가다가 제대로 알아보고자 마음먹고 작성합니다.. 플러터는 부드러운 UI를 위해 1초에 60프레임을 목표로 합니다. 그 뜻은 1초에 최소 60번 화면을 다시 그린다는 의미입니다. 플러터는 이런 빠른 렌더링 성능을 보장하기 위해 build 단계에서 widgetTree와 elementTree를 만들어 사용하고, layout 단계에서 RenderObjectTree를 생성합니다. 아래에 자세히 설명하겠습니다. 위와 같이 총 3개의 트리를 사용하는 이유는 한번 화면을 그린 후에는 전체를 다시 재렌더링 하는게 아닌 꼭 필요한 부분만 다시 그리기 위해서라고 합니다. 플러터의 모든 것은 위젯으로 이루어진다 라는 ..

Weekly Flutter 2023.07.13

Generic을 파다가 variance를 파다가 리스코프의 법칙을 파다가..

다트의 Generic의 동작 방식에 대해 공부를 하다가 찜찜하게 마음속으로 계속 걸리는 Variance에 대한 확실한 개념 정리가 필요하다 생각이 들어 글을 적는다.. 1. 변성이란? (공변, 반공변, 무공변) 가변성 또는 변성이라 불리는 variance는 한마디로 서로 다른 타입 간에 어떤 관계가 있는지를 나타내는 개념이다. 공변(covariant) : A가 B의 하위 타입일 때, T 가 T의 하위 타입이면 T는 공변 (직관적임) 반공변 : A가 B의 하위 타입일 때, T 가 T의 상위 타입이면 T는 반공변 불공변 또는 무공변(invariant) : A가 B의 하위 타입일 때, T 가 T사이에 상속 관계가 없으면 T는 불공변 또는 무공변 가변성은 제네릭(Generic) 타입에서 특히 중요한 역할을 하는..

Weekly Flutter 2023.07.06

조건에 따라 위젯을 보여주거나 숨기는 좋은 방법을 찾아서 (Opacity, Visibility, Offstage )

활동량 페이지를 만들면서 위아래로 둥둥 움직이고, 조건에 따라 보이고 / 안보이는 챗버블 위젯을 만들게 되었습니다. 저는 조건이 true이면 버블을 빌드하고, false면 SizedBox.shrink()를 빌드하는 코드를 작성했었습니다. 그런데 pr로 '뎁스를 사라지게 하는것보다 Visibility, Offstage를 사용하고 상태관리를 사용하는 것이 좋다'는 피드백을 받게 되어 둘중 뭘 사용하는게 더 좋을지 비교하며 찾아 보게 되었는데요, 이것을 정리해서 공유해 보려고 합니다! 앱을 만들면서 조건에 따라 보여주거나 보여주지 않는 UI를 만들일이 많이 있습니다. 한번 결정되어서 변동이 없는경우에는 if statement 을 사용해서 위젯의 빌드 여부를 결정하는 방식을 사용해도 뎁스가 변동될 일이 없어 괜..

Weekly Flutter 2023.07.01

backgroundservice를 사용해보자.

Flutter document를 살펴보는 중에, happypath 라는 프로젝트를 발견했다. 해당 링크를 타고 가면 볼 수 있는 문서에서 보듯 다양한 유형의 기능 추가를 위한 가이드 정도로 생각할 수 있다. 그 중 backgroundservice 항목에서 추천하는 workmanager 패키지에 대해 살펴보았다. 현재 우리의 프로젝트에서 사용하고 있듯, background에서 실행되어야 로직을 callbackDispatcher 메서드에 구현 후, main에서 initialize 해주고 있다. 그러면 어떻게 background에서 로직이 실행되는지 알아보자. 패키지 초기화 후 실행되는 Workmanager().registerOneOffTask 메서드는, 일회성 백그라운드 로직 실행 명령이다. uniqueNa..

Weekly Flutter 2023.06.29

[Flog Favorite] go_router 패키지

Flutter에는 정말 많은 패키지들이 존재하고, 지금도 누군가는 새로운 기능, 유용한 기능을 만들어 내고 있다. 필자는 항상 패키지의 사용 대신, 직접 구현을 하고자 하려는 편인데, 쉽지않다. 또한 생산성 측면에서도 아주 최악이다. 그럼에도 직접 구현을 하는 것에 여러가지 장점이 있다고 생각하지만, 커뮤니티 내에서 생산되는 수많은 패키지들에 대한 정보들을 아는 것 또한 개인의 업무 역량, 효율적인 시간 투자 등 여러 이점을 제공한다고 생각하여 많은 패키지들을 알아보기로 하였다. 그래서 Flog Favorite 을 또 새로 만들었다. 현재 진행하고 있는 프로젝트 내부에는 GetX에서 제공하는 route 기능을 사용하고 있다. 각각 view의 위치 및 기능 등에 맞추어 일련의 규칙에 따라 route 이름을..

Weekly Flutter 2023.03.22

다트의 인스턴스 복사

우리 앱의 식단 기록 기능을 구현하던 중, 깊은 복사의 중요성을 간만에 느끼게 되어 작성하게 되었습니다. List, Map 또는 클래스 안에 다른 인스턴스들을 넣어 사용할 때 리마인드 할 수 있다면 좋을 것 같습니다. 원본은 바꾸고 싶지 않다고 우리 앱의 식단 기록 기능은 다른 기록 기능들보다, 1회 기록 할 때의 데이터 크기가 큽니다. 또한, 사용자가 원하는 대로 그 데이터를 수정할 수도 있죠. 실제 식단 기록 과정을 예로 들면, 1회 식단 기록 안에는 다수의 음식 정보, 끼니 타입, 시간 등이 존재하고, 음식 정보 안에는 섭취 용량, 단위 정보 등이 존재합니다. 간식의 경우에는 이 식단 정보가 다수로 존재할 수도 있고, 기록 전에 사용자는 대부분의 정보를 조작할 수 있습니다. 사진이나 새로운 음식을 ..

Weekly Flutter 2023.03.15

[Platform integration] 2. Event Channel 사용방법

이전포스트에서 Method Channel을 다루면서 플러터가 네이티브의 OS정보를 가져올 수 있는 방법은 3가지가 있다고 설명 했었습니다. Method Channel : 단발적, 표준 메세지 코덱을 사용합니다 Event Channel : EventChannel은 stream 데이터가 필요할때 사용합니다. Basic Message Channel: Method Channel보다 더 기본적. 코덱을 커스텀하기위해 사용하는 방법입니다 MethodChannel을 사용하면 단발적인 요청으로 그에 대한 비동기적 응답을 얻을 수 있었습니다. 이번에 살펴볼 EventChannel은 단발적인 요청과 응답이 아니라, 채널이 열려있는동안 이벤트가 발생하면 지속적으로 데이터를 받아서 사용할 수 있도록 해줍니다. Event Ch..

Weekly Flutter 2023.03.08

dart의 EventLoop는 어떻게 동작할까?

아시다시피, 다트는 싱글스레드 언어입니다. 같은 싱글스레드 언어인 js에서는 eventLoop를 중요시 여기며 많이 들어보았는데, Dart의 eventLoop는 어떻게 동작하는지 궁금하여 찾아보게 되었습니다. dart는 isolate라는 독립적인 코드 실행 공간을 가지고 있는데요. flutter앱을 실행시키는 순간 isolate라고 불리는 프로세스가 생성된다고 합니다. 이 isolate는 내부적으로 하나의 eventLoop를 가지고 있고 두개의 관련 Queue를 갖습니다. dart의 isolate isolate는 별도의 메모리 공간에서 실행되는 독립적인 작업자로 스레드와 유사하지만 몇가지 다른 점을 갖습니다. isolate는 dart vm의 별도 인스턴스입니다. 각 isolate에 자체 메모리 힙, 프로..

Weekly Flutter 2023.03.08