티스토리

플로그

검색하기

블로그 홈

플로그

flog.tistory.com/m

구독자: 1

방명록 방문하기

공지 공지사항은 뭐지? 모두보기

주요 글 목록

함수의 실행을 제한하자. Debounce와 Throttle 이번에 무한 스크롤이 있는 검색페이지를 만들게 되었다. 그런데, 가끔씩 스크롤을 내리다 보면 페이지를 여러개 가져와버리고, 검색편의성을 위해 넣은 자동완성은 쓸데없이 많은 api요청으로 트래픽을 증가시킨다. 그래서 비용을 조금이라도 아껴보고자 debounce와 throttle개념을 이용해보기로 했다. 성능을 향상시키거나 비용을 줄이고 싶은 경우에 debounce와 throttle이라는 개념을 이용해서 사용자의 의도와 상관없이 반복적으로 실행되는 함수의 실행 빈도를 제어를 할 수 있다. 개념 Debounce와 Throttle은 특정 함수의 실행을 제한하는데 목적을 두고 있다. Debounce는 특정기간동안 추가로 실행되지 않으면 함수를 실행한다. Throttle은 함수를 실행 하고 특정 기간동안의 추가실행.. 공감수 0 댓글수 0 2023. 8. 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.. 공감수 0 댓글수 0 2023. 7. 18.
flutter 렌더링 과정에 대해서 알아보자 우리가 작성한 flutter 코드는 어떤 과정을 거쳐서 화면에 표시되는걸까? 엉성하게 보고 대충 이렇군..넘어가다가 제대로 알아보고자 마음먹고 작성합니다.. 플러터는 부드러운 UI를 위해 1초에 60프레임을 목표로 합니다. 그 뜻은 1초에 최소 60번 화면을 다시 그린다는 의미입니다. 플러터는 이런 빠른 렌더링 성능을 보장하기 위해 build 단계에서 widgetTree와 elementTree를 만들어 사용하고, layout 단계에서 RenderObjectTree를 생성합니다. 아래에 자세히 설명하겠습니다. 위와 같이 총 3개의 트리를 사용하는 이유는 한번 화면을 그린 후에는 전체를 다시 재렌더링 하는게 아닌 꼭 필요한 부분만 다시 그리기 위해서라고 합니다. 플러터의 모든 것은 위젯으로 이루어진다 라는 .. 공감수 0 댓글수 0 2023. 7. 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) 타입에서 특히 중요한 역할을 하는.. 공감수 0 댓글수 0 2023. 7. 6.
조건에 따라 위젯을 보여주거나 숨기는 좋은 방법을 찾아서 (Opacity, Visibility, Offstage ) 활동량 페이지를 만들면서 위아래로 둥둥 움직이고, 조건에 따라 보이고 / 안보이는 챗버블 위젯을 만들게 되었습니다. 저는 조건이 true이면 버블을 빌드하고, false면 SizedBox.shrink()를 빌드하는 코드를 작성했었습니다. 그런데 pr로 '뎁스를 사라지게 하는것보다 Visibility, Offstage를 사용하고 상태관리를 사용하는 것이 좋다'는 피드백을 받게 되어 둘중 뭘 사용하는게 더 좋을지 비교하며 찾아 보게 되었는데요, 이것을 정리해서 공유해 보려고 합니다! 앱을 만들면서 조건에 따라 보여주거나 보여주지 않는 UI를 만들일이 많이 있습니다. 한번 결정되어서 변동이 없는경우에는 if statement 을 사용해서 위젯의 빌드 여부를 결정하는 방식을 사용해도 뎁스가 변동될 일이 없어 괜.. 공감수 0 댓글수 0 2023. 7. 1.
backgroundservice를 사용해보자. Flutter document를 살펴보는 중에, happypath 라는 프로젝트를 발견했다. 해당 링크를 타고 가면 볼 수 있는 문서에서 보듯 다양한 유형의 기능 추가를 위한 가이드 정도로 생각할 수 있다. 그 중 backgroundservice 항목에서 추천하는 workmanager 패키지에 대해 살펴보았다. 현재 우리의 프로젝트에서 사용하고 있듯, background에서 실행되어야 로직을 callbackDispatcher 메서드에 구현 후, main에서 initialize 해주고 있다. 그러면 어떻게 background에서 로직이 실행되는지 알아보자. 패키지 초기화 후 실행되는 Workmanager().registerOneOffTask 메서드는, 일회성 백그라운드 로직 실행 명령이다. uniqueNa.. 공감수 0 댓글수 0 2023. 6. 29.
[Flog Favorite] go_router 패키지 Flutter에는 정말 많은 패키지들이 존재하고, 지금도 누군가는 새로운 기능, 유용한 기능을 만들어 내고 있다. 필자는 항상 패키지의 사용 대신, 직접 구현을 하고자 하려는 편인데, 쉽지않다. 또한 생산성 측면에서도 아주 최악이다. 그럼에도 직접 구현을 하는 것에 여러가지 장점이 있다고 생각하지만, 커뮤니티 내에서 생산되는 수많은 패키지들에 대한 정보들을 아는 것 또한 개인의 업무 역량, 효율적인 시간 투자 등 여러 이점을 제공한다고 생각하여 많은 패키지들을 알아보기로 하였다. 그래서 Flog Favorite 을 또 새로 만들었다. 현재 진행하고 있는 프로젝트 내부에는 GetX에서 제공하는 route 기능을 사용하고 있다. 각각 view의 위치 및 기능 등에 맞추어 일련의 규칙에 따라 route 이름을.. 공감수 0 댓글수 0 2023. 3. 22.
다트의 인스턴스 복사 우리 앱의 식단 기록 기능을 구현하던 중, 깊은 복사의 중요성을 간만에 느끼게 되어 작성하게 되었습니다. List, Map 또는 클래스 안에 다른 인스턴스들을 넣어 사용할 때 리마인드 할 수 있다면 좋을 것 같습니다. 원본은 바꾸고 싶지 않다고 우리 앱의 식단 기록 기능은 다른 기록 기능들보다, 1회 기록 할 때의 데이터 크기가 큽니다. 또한, 사용자가 원하는 대로 그 데이터를 수정할 수도 있죠. 실제 식단 기록 과정을 예로 들면, 1회 식단 기록 안에는 다수의 음식 정보, 끼니 타입, 시간 등이 존재하고, 음식 정보 안에는 섭취 용량, 단위 정보 등이 존재합니다. 간식의 경우에는 이 식단 정보가 다수로 존재할 수도 있고, 기록 전에 사용자는 대부분의 정보를 조작할 수 있습니다. 사진이나 새로운 음식을 .. 공감수 0 댓글수 0 2023. 3. 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.. 공감수 0 댓글수 0 2023. 3. 8.
dart의 EventLoop는 어떻게 동작할까? 아시다시피, 다트는 싱글스레드 언어입니다. 같은 싱글스레드 언어인 js에서는 eventLoop를 중요시 여기며 많이 들어보았는데, Dart의 eventLoop는 어떻게 동작하는지 궁금하여 찾아보게 되었습니다. dart는 isolate라는 독립적인 코드 실행 공간을 가지고 있는데요. flutter앱을 실행시키는 순간 isolate라고 불리는 프로세스가 생성된다고 합니다. 이 isolate는 내부적으로 하나의 eventLoop를 가지고 있고 두개의 관련 Queue를 갖습니다. dart의 isolate isolate는 별도의 메모리 공간에서 실행되는 독립적인 작업자로 스레드와 유사하지만 몇가지 다른 점을 갖습니다. isolate는 dart vm의 별도 인스턴스입니다. 각 isolate에 자체 메모리 힙, 프로.. 공감수 0 댓글수 0 2023. 3. 8.
다트의 가비지 컬렉터 어떻게 동작할까? 해당 글은 공식문서와 chatGPT의 약간의 도움을 받아 작성되었습니다. (고마워 따봉 chatGPT야) 플러터 팀에서 초기 언어를 선택할 때 12개 이상의 언어를 선택해 평가하였다고 한다. 플러터는 다트를 선택하였는데, 플러터가 다트를 선택한 주요 이유들 중 하나는 바로 다트가 lock(앱이 실행이 중지되는 상태)없이 가비지 컬렉션을 수행할 수 있다는 점이였다. 많은 언어에서 가비지 컬렉션이 메모리를 수집하는 동안 lock 상태가 된다고 한다. 하지만 다트는 항상 가비지 컬렉션을 lock 없이 수행할 수 있다는 점에서 플러터 팀의 선택을 받은 것.. 그럼 다트의 가비지 컬렉터는 어떻게 lock 없이 가비지 컬렉션이 동작을 할까? Dart의 가비지 컬렉터는 두 개의 세대(generation)로 구성된다... 공감수 0 댓글수 1 2023. 3. 2.
[Flutter 주석 파헤치기] 03-1. Key Flutter의 Widget을 사용할 때면 항상 마주하게 되는 것이 Key이다. Key는 다음과 같은 모습으로 처음 눈에 띄게 된다. class MyWidget extends StatelessWidget { const MyWidget({super.key}); @override Widget build(BuildContext context) { return const Placeholder(); } } StatelessWidget을 상속받을 때 생기는 template의 super.key가 바로 앞으로 살펴 볼 Key 타입의 파라미터이다. 0. Key Key 클래스의 정의는 다음 파일에서 찾을 수 있다. .../flutter/lib/src/foundation/key.dart abstract class인 Key에.. 공감수 0 댓글수 0 2023. 3. 1.
[Flutter Widget] 스크롤 가능한 레이아웃 만들기 - 1 Sliver란? A sliver is a portion of a scrollable area that you can define to behave in a special way. You can use slivers to achieve custom scrolling effects, such as elastic scrolling. 사용자가 특수한 동작을 수행하도록 할 수 있고, 스크롤이 가능한 영역을 말합니다. 플러터에서 Sliver를 사용한 기본 위젯 Flutter에서는 ListView, GridView, SingleChildScrollView 등 Sliver를 사용하지 않는 스크롤 가능한 위젯을 기본으로 제공합니다. 이러한 위젯들은 간단하고 직관적이며, 일반적인 스크롤 동작을 구현하는 데 적합합니다. 언.. 공감수 0 댓글수 0 2023. 2. 22.
[Flutter 주석 파헤치기] 02. Inherited Widget Flutter Framework 내부의 위젯 종류에는 크게 3가지 정도가 있다. StatefulWidget, StatelessWidget, InheritedWidget StatefulWidget과 statelessWidget은 지난 글에서 내용을 확인 할 수 있고, 그 다음 InheritedWidget에 대하여 알아보고자 한다. InheritedWidget InheritedWidget은 정보를 트리 아래로 효율적으로 전달하기 위한 위젯의 기본 클래스다. class FrogColor extends InheritedWidget { const FrogColor({ super.key, required this.color, required super.child, }); final Color color; stati.. 공감수 0 댓글수 0 2023. 2. 22.
[Flutter 아는 척하기] 플러터 선택의 이유 왜 Dart일까? 정적 컴파일, 동적 컴파일 체리픽 프로그램 실행 방식 정적 컴파일 방식: AOT(Ahead Of Time), Static Compilation 정적인 방식이다. 실행 전에, 고급 언어의 명령어들을 컴파일러를 통해 기계어나 중간 언어로 변환한다. 변환된 기계어를 실행한다. 장점: 실행 속도가 빠르다. 컴파일 과정중에 성능 최적화가 가능하다. 단점: 컴파일 과정의 시간이 오래 걸린다. 예시: C/C++, Java, 인터프리터 방식: JIT(Just In Time), Dynamic Interpretation 동적인 방식이다. 실행 중에, 고급 언어의 명령어들을 한 번에 한 줄씩 인터프리터를 통과시켜 중간 언어로 변환한다. 한 줄의 명령어가 변환되면 바로 실행한다. 장점: 빠르게 수정하고 테스.. 공감수 0 댓글수 0 2023. 2. 15.
[Platform integration] 1. Method Channel 사용방법 요즘 센트리에서 발생한 에러를 추적하면서 네이티브 기기에대해 이해할 필요하다는 생각이 들었습니다. 그러던 중 플러터에서 네이티브 기기들의 속성을 가져다쓸때 사용하는 Method Channel에 대해 궁금증이 생겨 이번 주제로 정해 보았습니다. 잘못된 부분과 보충할 부분을 공유 해주신다면 정말정말 감사하겠습니다! 언제 사용할까? 앱을 만들다보면 notification, app lifecycle, sensor, camera, battery, sound, connectivity, device information, geolocation 등 플랫폼에 특화된 API의 사용이 필요할 때가 있습니다. 플러터로 플랫폼 코드의 사용을 도와주는 패키지들이 많이 있지만, 마땅한 패키지가 없을때 직접 플랫폼별 코드를 작성할 .. 공감수 0 댓글수 0 2023. 2. 8.
[Flutter Widget] size를 줄수 있는 위젯과 size를 줄 수 없는 위젯 Flutter내에서 레이아웃을 잡는 위젯으로 보통 Row와 Column을 사용합니다. Row와 column은 동일하게 children으로 자식 요소들을 가질 수 있습니다. Row위젯을 먼저 살펴보도록 하겠습니다. Row는 X축을 기준으로 정렬하며 MainAxisAlignment라는 인자를 사용하여 정렬합니다. 아래는 spaceBetween을 사용하였고 기기의 전체 사이즈에 맞춰서 공백을 나눠 정렬해줍니다. 코드를 실행하면 UI는 이렇게 그려집니다. UI에서 맨 오른쪽 위젯이 기기의 남은 사이즈를 전체 다 차지해야 한다면 Expanded나 Flexible 위젯으로 감싸줄 수 있습니다. Expanded와 Flexible은 남은 공간을 모두 차지한다는 공통점이 있습니다. 두 위젯의 큰 차이점은 Flexble .. 공감수 0 댓글수 0 2023. 2. 5.
[Flutter 주석 파헤치기] 01. StatefulWidget과 State .../flutter/lib/src/widgets/framework.dart 에는 각종 Key 클래스들과, BuildContext, Widget, Element 등이 선언돼 있습니다. Flutter 위젯의 두 축을 이루는 StatelessWidget과 StatefulWidget도 해당 파일에 선언돼 있는데, 항상 사용하기에 앞서 고민을 하게 만드는 StatefulWidget에 대해 조금 더 알아보고자 합니다. StatefulWidget은 Widget을 상속하는데, Widget은 다시 DiagnosticableTree라는 디버깅용 클래스를 상속합니다. 실질적으로는 Widget이 최상위 추상 클래스인 거죠. Flutter 팀에서는 Widget 클래스 상단에 다음과 같은 주석으로 설명을 시작합니다. Descr.. 공감수 0 댓글수 0 2023. 1. 31.
[Flutter Forward] 레코드에 대해 알아보자 최근 구글에서 Flutter Forward를 열어 플러터와 다트의 신기술에 관한 내용을 발표하였다. (한국 시간으론 새벽에 열어서 기다리다 지쳐 잠들었지만..) 다음날 일어나서 발표한 내용들을 쭉 훑어보니 꽤 흥미로운 내용들이 많았는데, 그 중 눈에 띄는 다트 3.0에 반영될 예정인 '레코드'의 좋은 점에 대해 쉽고 간단히 이야기해보려한다. (자바의 레코드, 파이썬의 튜플의 개념을 알고계신 분들은 유사한 개념이라고 생각하면 된다! ) 하위 코드들은 모두 Flutter Forward에서 발표한 예시 코드입니다. 아래 내용 중 틀린 내용이 있으면 피드백 언제든 환영입니다. 1. record를 활용해 함수 여러개 뱉기 가능! 간단하게 사용자의 이름과 나이 정보를 받아 처리해주는 함수를 짠다고 가정해보자. 현재.. 공감수 0 댓글수 0 2023. 1. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.