플로그

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

이전글 위젯이 왜.. 다르게 보이지? 1. 해상도 이해하기 Android OS 와 iOS 는 각각 논리적 픽셀을 사용하고 있고 Flutter도 logical pixel이라는 논리적픽셀을 사용한다. 플러터에서 위젯에 주는 width와 height는 논리적 픽셀값이고 실제로 위젯이 그려지는것은 이 width, height 값과 devicePixelRatio가 곱해진 값으로 화면에 위젯이 그려진다. 플러터에서 일반적으로 사용하는 이미지는 래스터 이미지인데... 플러터에서 이미지를 사용하는 위젯을 만들때 어떻게 이미지를 넣어줘야 할까? 이미지의 종류 앱을 만들때 사용하는 이미지는 크게 래스터 이미지와 벡터이미지 2가지로 구분 할 수 있다. 컴퓨터 과학에서 래스터 그래픽스(Raster graphics) 이미지, ..

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..

Flutter 공식 문서, (아직은 부족한) Bard, 나의 영어 독해 능력과 추측이 결합된 문서로 신뢰성이 높지 않음을 주의하자. Root Object & Reachability 모든 Dart 앱은 실행 시에 Dart VM 으로부터 'Root Object'(우리가 아는 모든 클래스의 root 인 'Object' 클래스와는 별개이다)를 할당 받고, 그 Root Object 는, 직접적으로든 간접적으로든, 메모리에 할당된 모든 다른 객체들을 참조한다. 앱의 실행 중에, 특정 객체가 Root Object 로부터 Unreachable(닿을 수 없는) 상태가 되면 GC는 그 객체의 메모리 공간을 해제한다. Root Object 까지의 참조를 Retaining Path(메모리를 유지시켜주는 경로?)라고 하고, 최..

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

플러터로 사용자가 보는 화면을 작업한다면 누구나 사이즈를 어떻게 주지? 라는 고민을 해봤을 것이다. 위젯사이즈는 어떻게 줘야 할까, 얼마만큼 줘야 할까? 기기별로 나눠야 한다면 수많은 기기들이 가진 해상도 사이의 구분은 어떻게 할까 등등... 을 고민하기전에 먼저 화면과 관련된 용어와 개념에 대해 알아보자. Pixel 픽셀은 디지털 이미지와 디스플레이 장치에서 사용되는 개념으로, 이미지를 구성하는 가장 작은 단위를 의미한다. 픽셀은 "picture element"의 줄임말이며, 말 그대로 화면에 표시되는 모든 그래픽 요소의 구성 요소이다. 픽셀은 정사각형 또는 직사각형의 형태를 가지며, 각 픽셀은 특정한 색상과 밝기 값을 나타낸다. 컴퓨터 화면이나 디지털 이미지에서 픽셀은 그리드 형태로 배열되어 있으며,..

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

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

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

플러터를 통해 개발을 진행하다 보면 다양한 문제 상황에 직면하게 된다. 여기 있어야 할 위젯이 저기 가 있다거나, 메모리 오류가 발생해 앱이 종료된다거나, 알 수 없는 버그로 기이한 현상을 창조하는 것을 모두들 겪기 마련이다. 그때마다 다양한 방법을 사용해 앱의 실행을 정상 궤도에 올려야 한다. 이 글에서는 그 방법들 중, 플러터에서 제공하는 툴들을 이용해 해결하는 방법을 소개하고자 한다. 참고로, Visual Studio Code 기준으로 설명한다. Widget Inspector 내가 배치한 위젯이 어느 정도의 영역을 차지하는 지, 특히나, Flex 위젯(Row, Column 등) 내에서 어떤 설정 덕에 이런 요상한 레이아웃을 만들어 낸 것인지 알고 싶을 때가 있다. 그런데 대부분의 경우 위젯의 레이아..