Flutter

채팅 SDK를 만들면서 팀원과 함께 어떻게하면 부하를 견뎌내면서도 채팅 순서를 지킬 수 있는 통신 방법에 대해서 고민해보았다.[Frontend]   →  [API Gateway]   →  [Message Service]    →   [Kafka/RabbitMQ]  →  [Consumer (Microservices)]   → [Database] 만약 MSA환경이었다면 위와 같은 플로우로 채팅 서버를 설계할 수 있다. 요청이 오는대로 메세지서비스가 바로 DB에 CRUD를 하면 요청이 많을수록 DB 부하가 증가되고 → 트랜잭션이 밀려서 → 서비스 속도가 저하된다. 하지만 위와 같이 사이에 큐를 끼게되면 DB에 저장은 순서보장과 함께 비동기로 돌리면서 프론트에게는 응답을 바로 줄 수 있게 된다.  (1) [프론..

Flutter는 선언적(declarative) UI 프레임워크로, 개발자가 UI의 현재 상태를 단순히 그리는 틀이라 볼 수 있는 코드만 작성하면 된다. 이 과정에서 Flutter는 위젯, 엘리먼트, 렌더 오브젝트라는 세 가지 핵심 계층을 활용하여 실제 화면에 변경된 부분만 효율적으로 페인팅한다. 이번 글에서는 Flutter가 어떻게 변경된 위젯만 정확히 찾아내어 다시 렌더링하는지, 그 내부 동작 원리를 자세히 설명하고자 한다. Flutter 아키텍처 Flutter의 UI 아키텍처는 크게 세 계층으로 구성된다.Widgets위젯은 UI의 “청사진(blueprint)”이다. 위젯은 불변(immutable) 객체이며, 개발자가 UI의 상태를 기술하는 선언적 도구이다. 위젯은 단순히 화면에 무엇을 보여줄지 기술할..

플러터에서 위젯은 크게 두가지 종류 StatlessWidget 과 StatefulWidget이 있다. 많은 블로그에서는 단순히 두 차이에 대해서만 기술해놓고 있을 뿐 어느상황에서 어떤 위젯을 선택해야하는지는 다루는 글이 없는 것 같아 적어보았다.  “상태가 변화하는 위젯이라면 무조건 StatefulWidget을 써야 하는 것 아닌가?"사실, Flutter의 페인팅 시스템과 Diffing(Reconciliation) 메커니즘 덕분에, 외부에서 상태가 주입되는 경우(예: Provider, Bloc 등)에도 StatelessWidget만으로 충분히 UI를 업데이트할 수 있다. 즉, 위젯 자체는 불변성을 유지하며, 부모나 글로벌 상태 관리에서 전달받은 값이 변경되면, 전체 트리의 일부만 효율적으로 다시 그려지게..

Dio 패키지에 문제점을 발견해서 이슈 제기하고 PR을 넣었다. 하지만 패키지 버전 기입을 수정하라는 답변이 날라왔고 이번기회를 통해 패키지 버전관리 전략에 대해 한 번 짚고 넘어가야겠다는 생각이들었다. 플러터 패키지 버전 관리 전략1 ^버전 (Caret 버전, 권장 방식)dependencies: http: ^0.13.6^는 Semantic Versioning을 따르는 범위 지정 방식이다.^0.13.6은 0.13.6 이상이면서 메이저 버전(첫 번째 숫자)가 변하지 않는 범위에서 최신 버전을 사용한다.0.13.7, 0.13.8 → 허용됨0.14.0 → 허용되지 않음2 +버전 (Build Metadata 버전)dependencies: http: 0.13.6+1+1은 빌드 메타데이터를 나타내며, 기능이 동..

Expanded와 Flexible은 Flutter에서 반응형 레이아웃을 구성할 때 자주 사용되는 위젯들이다. 둘다 목적은 Row, Column, Flex 등의 위젯 안에서 남은 공간을 어떻게 차지할지를 정의하는 데 있다. 이때 둘이 비슷해서 가끔헷갈리곤하는데 이번 기회에 정리해보려 한다. 1. Expanded기능: 남은 공간을 무조건 비율에 따라 강제로 차지한다.특징: 자식 위젯의 크기 제한을 무시하고, 남은 공간을 비율대로 채운다.언제 사용?고정된 비율로 화면을 나누고 싶을 때.남은 공간을 강제로 채워야 하는 경우. 2. Flexible기능: 자식 위젯의 크기를 우선적으로 고려한 뒤, 남은 공간을 비율에 따라 차지한다.특징: 자식 위젯이 필요로 하는 크기 제한만큼만 채운다.언제 사용?자식 위젯의 크기가..

🧐 Before세그먼트 버튼을 구현하던중 탭했을때 변화가 너무 단조롭다고 생각했다. 예쁘게 꾸미고싶어 세그먼트 버튼에 애니메이션을 넣어보았다.☺️ After 애니메이션 1 세그먼트 애니메이션은 AnimatedContainer을 통해 구현했다. AnimatedContainer는 색상, 크기, 모양, 위치 등 속성이 변경될 때 애니메이션 효과를 자동으로 적용해준다. 별도의 컨트롤러 없이 duration과 curve만 설정하면 된다는게 큰 장점이다. 위 애니메이션은 크게 버튼 배경색 변화와 텍스트색 변화로 구현할 수 있다. 배경색 변화duration: 애니메이션의 지속 시간(300ms). 버튼 클릭 시 색상이 천천히 변경curve: 애니메이션 속도 곡선. Curves.easeInOut은 부드럽게 시작하고 일..

최근 함수형 프로그래밍을 연습하던중 비동기 데이터를 받는 함수를 평소 사용하는 Future 대신 Task로 사용하는 것이 좀더 함수형 스타일에 가깝다는 것을 알게되었다.  Future야 머.. 너무 많이 쓰이고 다른 언어에도 다 있는거라 당연하다고 치지만 Task..? 이건 Swift Concurrency 에서 보고 다른 언어 쓸 땐 못봤던 네이밍인데 이게 왜 Future 대신 함수형 프로그래밍에서 쓰이는거지..? 라는 궁금증이 생겼다. 그래서 코드를 작성해보고 로그를 확인해보니, Future와 Task의 차이에 대해 확실히 알게되었다.   위 코드를 통해 알 수 있는 차이점실행 시점함수 호출 시 즉시 실행.run() 호출 시 실행.로그의 순서fetchNumber 호출 직후 "Fetching number..

🧐 문제상황 정규식(번호, 이메일)에 맞는 값이 들어오면 버튼 활성화, 그렇지 않으면 버튼 비활성화를 구현했어야했다.  이때 확장성을 고려하여 단순 버튼 구현이 아닌 디자인 시스템을 구축하고 구축한 디자인 시스템의 UI컴포넌트를 가져다 쓰고 있는 상황이었다.  그런데 버튼을 비활성화할 때마다 계속 버튼이 사라지는 것이었다..ㅠ 구글링 및 코드를 뚫어지게 바라본 결과 이유를 찾게되었다. ☺️ 문제 원인 분석 및 해결 현재 내가 구축한 디자인시스템에서 isDisabled == true 이면 onPressed 액션을 null을 주어 버튼을 비활성화 했었다.  https://stackoverflow.com/questions/78922775/flutter-elevated-button-not-displayed-a..

📌 에러 메시지Assertion failed: file:///Users/jayoengchoi/flutter/packages/flutter/lib/src/widgets/navigator.dart:5645:12!_debugLocked is not trueSee also: https://docs.flutter.dev/testing/errorsPresentation Layer를 MVVM-C 패턴으로 로그인 유무에따라 코디네이터로 네비게이팅하는 코드가 있었다.Navigator.push() 호출 시 앱이 강제 종료(Crash) 되는 현상이 발생했다.🔎 발생 원인 분석1️⃣ _debugLocked란?Flutter의 Navigator는 중복 네비게이션 호출을 방지하기 위해 _debugLocked 플래그를 사용한다...

결론부터 말하자면 Tree Shaking 과 AOT 때문이다. 1. Tree Shaking 이란?💡 트리 쉐이킹(Tree Shaking)이란 사용되지 않는(dead) 코드를 제거하여 앱 크기를 줄이고 최적화하는 기법이다. Flutter는 트리 쉐이킹을 통해 앱 크기를 줄이고 성능을 최적화한다. 즉, 쓰지 않는 코드를 "흔들어서 떨어뜨린다(Shaking the Tree)". 이때 플러터의 트리 쉐이킹은 웹프론트 진영의 웹팩 최적화에서 사용되는 트리쉐이킹 원리와 거의 동일하다. 둘다 빌드할 때 참조로 실행되는 코드만 남기고 나머지는 삭제하는 방법을 채택하고 있다. Flutter에서는 dart2js와 dart-compiler가 이 최적화를 수행한다. 만약 위 코드가 빌드된다면 unusedFunction()은..