전체 글

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

문제 상황 feature 브랜치에서 작업이 진행되었고,  develop 브랜치에 머지하려고 할 때 컨플릭트 발생아래와 같은 브랜치 상태에서 develop 브랜치로 변경하려고 하니 변경 사항이 겹쳐서 checkout이 막힌 상황이었다. A --- B --- C --- D --- E --- F --- G (develop, old) \ X --- Y --- Z (feature/chat-list, new)develop 브랜치는 기존 G 커밋에서 멈춰 있었고,feature/chat-list 브랜치에서 X, Y, Z 커밋이 추가됨develop 브랜치로 이동하려고 했지만 변경 사항이 겹쳐버려 컨플릭트가 발생했다.이때 강제로 develop ..

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

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

🎨 What I Designedhttps://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/02/01.dart flutter_ui_lab/lib/2025/02/01.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎  How I Made It

🎨 What I Designedhttps://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/01/31.dart flutter_ui_lab/lib/2025/01/31.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎  How I Made It사용한 주요 위젯: ClipRect, BackdropFilter, ImageFilter What is ClipRect?ClipRect는 자식위젯(child)을 사각형 형태로 클리핑하는 역할을 한다. 화면 전체에 위젯이 있더라도 ClipRect..

🎨 What I Designedhttps://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/01/30.dart flutter_ui_lab/lib/2025/01/30.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎  How I Made It애니메이션 구현 순서1. 먼저 원의 중심을 설정한다.2. 원 테두리를 이루는 점을 설정한다.3. 테두리에 있는 점들의 각도 차이를 계산한다.4. Blob의 기본 반지름을 설정한다.5. 테두리의 점들을 출렁이게한다. (Sin함수 이용)6. 출렁..

🎨 What I Designedhttps://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/01/29.dart flutter_ui_lab/lib/2025/01/29.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎  How I Made It사용된 주요 위젯: Container, BoxDecoration, BoxShadow What is Container?A container first surrounds the child with padding and then applies ad..

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은 빌드 메타데이터를 나타내며, 기능이 동..

이번에 채팅SDK 를 구현하면서 백엔드 서버를 어떻게 배포해야하나 고민하게 되었다. 현재 인프라에서는 백엔드 서버를 로드밸런싱을 하고 있다. RESTAPI 였다면 매 요청이 Statless 하기때문에 로드밸런싱을 하더라도 로그인 빼고는 크게 고민할게 없었다. 하지만 소켓의 경우에는 connection이 계속 유지되어야하기 때문에 로드밸런싱을 할 시에 연결유지를 위해 Sticky Session 방식을 사용해야할까? 만약 세션고정을 할거면 로드밸런싱 장점이 너무 퇴색되는거 아닌가..? 다들 어떻게 하고 있는거지? 라는 궁금증이 생겼다. 결론적으로는 웹소켓 서버 배포할때 세션고정대신 3가지 방법을 통해 로드밸런싱의 이점을 가져갈 수 있다. 해결방법을 알아보기전에 먼저 원리부터 살펴보자 WebSocket 통신 ..