전체보기

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

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

🧐 문제 발생Flutter CICD 비용개선을 위해 젠킨스 서버를 온디맨드 인스턴스에서 스팟 인스턴스로 이주했다. 그런데 이상하게 Build 속도는 빠른데 젠킨스 접속속도가 현저하게 느렸다. EC2 모니터링을 보면 CPU도 해봤자 7% 사용하고 있고 네트워크도 정상적인 것 같은데 당최 어떤게 문제인지 알 수가 없었다. 플러그인이 문제인가 싶어서 플러그인도 다 삭제해봤는데 접속속도가 너무 느렸다. 😭🧐 문제 분석 및 해결먼저 속도지연과정을 살펴보자면 아래와 같은 순서이다. 1. 사용자가 브라우저를 통해 젠킨스에 접속한다.2. EC2의 Jenkins Server는 등록된 내부 URL로 HTML, CSS 등의 웹 리소스를 보낸다.3. 만약 내부 URL의 ip와 해당 젠킨스가 배포된 EC2의 public ..

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

현재 참여하고 있는 프로젝트에서 샌드버드 같은 채팅 SDK를 만들고 있다. 프론트로 참여하고있지만 우연한 기회로 API 설계와 ERD 설계에 모두 관여하게 되어 ERD설계중 고려했던 사항을 포스트로 남겨두려고 한다. 먼저 설계한 API는 이 주소에서 확인할 수 있다.https://rakuraku.gitbook.io/rakuraku-docs/api-docs/authentication1대1 채팅과 그룹 채팅을 모두 지원하고 싶었고 실시간성을 유지하며 파일 공유가 가능하게끔 해야했다.  처음에는 사용자 정보, 채팅방 정보, 메시지 정보를 저장하기 위해 단순히 가장 기본적인 테이블인 users, chat_rooms, messages 테이블을 만들었다. 각각 사용자의 고유 정보를 관리하고, 채팅방을 정의하며, 메..

최근 함수형 프로그래밍을 연습하던중 비동기 데이터를 받는 함수를 평소 사용하는 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()은..

1. Write-Through 개념쓰기 작업 시 캐시와 데이터베이스를 동시에 업데이트하는 전략이다.읽기 작업은 캐시에서만 수행된다. TypeScript 예제class WriteThroughCache { private cache = new Map(); private database = new Map(); async write(key: string, value: any): Promise { this.cache.set(key, value); this.database.set(key, value); // DB와 캐시에 동시 쓰기 } async read(key: string): Promise { return this.cache.get(key); // 캐시에서 읽기 }} 다이어그램  2. ..