Mobile Develop

유저의 액션이 어떻게 UI에 렌더링될까? 먼저 큰 그림부터 살펴보자 플러터 아키텍쳐는 위와 같이 세가지 레이어로 이루어져있다. 먼저 Embedder Layer는 플러터앱을 각 플랫폼별 OS에 띄우도록 브릿징하는 역할을 수행한다. 따라서 이부분은 플랫폼별 언어(자바, 옵젝씨, c++)로 작성되어 있다. Engine Layer는 플러터의 저수준엔진으로 C++ 언어로 작성되어 그래픽,텍스트등의 렌더링을 수행한다. 이곳에는 우리가 접하는 dart:ui도 있는데 C++ 코드를 다트로 쉽게 다룰 수 있도록 래핑한 라이브러리이다. 위 그림에서 볼 수 있듯이 우리는 다트로 ui를 렌더링하려면 반드시 저수준 C++코드를 호출해야하고, 이러한 저수준코드를 다트로 호출하려면 dart:ui 를 쓸 수 밖에 없다. 즉,..

문제1. 특정 배열이 주어졌을 때 (ex [1, 2, 3])2. 해당 배열의 subarray 만들기 (ex [1], [2], [3], [1,2], [1,3]..)해결 1. 즉시 평가 방법으로 SubArray 만들기해결 2. 지연 평가 방법으로 SubArray 만들기왜 지연평가를 지향해야할까?생각해보면 두 방법 모두 시간복잡도는 n^2으로 두 번 순회하면서 도는건데 다를게 있나? 라고 생각할 수 있다. 하지만 자세히 살펴보면 먼저 메모리 사용공간에서 차이를 보이게 된다. 즉시평가에서는 result에 모든 subarray를 담게된다. 위 예시를 보았을 때 최종적으로 6개의 배열이 담기는 순간에 return이 호출되고 이를 순회하면서 print되는 것을 확인할 수 있다. 반면 지연평가는 계산 내내 메모리 공간..

예시 상황1. 만약 A 클래스(혹은 위젯)에서 특정 액션이 트리거되면2. B(Stateful Widget) 클래스 내부의 UI가 바뀌어야하는데3. 이때 B 클래스의 State 객체 내부 메서드를 호출해야한다. 이를 코드로 확인해보자면위 코드와 같이 외부클래스/위젯(ParentWidget) 에서는 Stateful 위젯의 Sate객체 메서드에 직접 접근할 수 없다. 당연한 이야기지만 state 클래스는 따로 선언되어있기 때문이다. 하지만 그렇다고 ParentWidget에서 State 인스턴스를 만들어 호출해야할까? 물론 그렇게하면 함수 자체에는 접근할 수 있겠지만 우리가 원하는 위젯의 UI는 단순 State 함수 호출에 의해 바귀지 않는다. 왜냐하면 Widget은 껍데기이고 여기에 업데이트된 내용물(Elem..

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

🧐 문제상황 매일 새벽 5시마다 플러터 프로젝트 develop 브랜치에서 단위테스트를 실행시키고자 했다. 1. 이를 위해 EC2에 도커로 젠킨스를 배포했다.2. Flutter 는 Docker Hub 에 마땅한 이미지가 없어서 (개인이 올려놓은 플러터 이미지가 있긴했는데 스타수가 워낙 낮아 신뢰하기 어려웠다.) EC2 로컬에 직접 설치한상태였다. 이 상태에서 파이프라인 스크립트를 작성하고 build 를 해보았더니 젠킨스가 flutter 파일을 찾지못하고 failure해버리는 이슈가 발생했다.☺️ 문제 원인 분석 및 해결Jenkins가 Docker 컨테이너로 실행되면, 컨테이너는 자체 격리된 파일 시스템을 사용한다. 따라서, EC2 로컬에 설치된 Flutter와 Android SDK 경로를 인식하지 못하고..

네비게이션 탭바를 Stateful 위젯으로 만들어 탭할시 파란색 아이콘 이미지로 바꿀 수 있었으나가급적 Stateless 위젯을 사용하여 최적화 시키고 싶었다.Statless 위젯을 사용하면서 이미지의 색을 바꾸는 방법에 대해 알아보자.배경 지식참고링크: https://api.flutter.dev/flutter/dart-ui/BlendMode.html Flutter의 UI렌더링 과정 이해하기 Flutter의 UI렌더링 과정은 아래와 같다개발자가 작성한 코드를 통해 위젯 트리가 생성된다.위젯 트리가 빌드된 후, Flutter는 상태와 위젯트리 생명주기를 관리하는 Element Tree, 그리고 위젯의 위치와 크기 정보를 가지고 있는 Render Tree를 만든다.상위위젯부터 하위위젯까지 제약조건이 잡히고,..

링크: https://product.kyobobook.co.kr/detail/S000003470645 Dependency Injection Principles, Practices, and Patterns | Seemann, Mark - 교보문고Dependency Injection Principles, Practices, and Patterns |product.kyobobook.co.krDependency Injection - Mark Seemann, Steven van Deursen 을 읽고 의존성 주입에 대한 포스트를 작성했습니다 :) 1. 왜 의존성 주입을 해야할까? 왜 의존성 주입을 해야할까? 결론부터 말하자면 객체간의 느슨한 관계 형성을 위함이다. 이에 대해 조금 더 자세히 들여다보자. 객체는..

Rx를 실제 사용한다고 생각해보자. Rx를 사용할 때 순서를 생각해보면 아래와 같이 크게 3가지 과정을 거칠것이다. 1. 먼저 Observable을 만든다.2. 원하는 연산자를 사용한다.3. 구독해서 사용한다. 그렇다면 위에서 반드시 만나는 문제는 어떤 Observable 과 Operator 를 사용할 것이냐이다. 이때 알아야할 지식이 바로 Hot Observable & Cold Observable 개념이다. 두 옵저버블의 특성을 알아보고 실전에서 어떻게 쓰이는지 살펴보자 Unicast vs Muticast먼저 Observable에는 개별적으로 스트림을 던지는 녀석과 던지는 스트림을 공유하는 녀석이 있다. 전자를 Unicast로, 후자인 multicast라고 부르며 Unicast 를 하는 대표적인 예로..