피드로 돌아가기
CRM Pipeline + Horse Racing AI in Flutter Web: Lead Scoring Formula & Kanban with LinearProgressIndicator
Dev.toDev.to
Frontend

Edge Function 기반 로직 분리로 구현 시간을 기능당 2시간으로 단축한 Flutter Web 설계

CRM Pipeline + Horse Racing AI in Flutter Web: Lead Scoring Formula & Kanban with LinearProgressIndicator

kanta13jp12026년 4월 17일4intermediate

Context

클라이언트 사이드 로직 비대화를 방지하고 잦은 비즈니스 룰 변경에 유연하게 대응하기 위한 아키텍처 필요성 대두. 복잡한 Lead Scoring 및 경주마 예측 모델을 앱 내부에 구현할 경우 발생하는 잦은 리빌드와 유지보수 효율성 저하 해결이 핵심 과제.

Technical Solution

  • Deno 기반 Edge Function을 활용한 Server-side Scoring 로직 집중화로 Flutter 앱 리빌드 없는 실시간 공식 수정 구조 설계
  • Lead Scoring 및 Horse Racing 예측 공식을 Edge Function 내부로 캡슐화하여 클라이언트는 단순 렌더링 뷰 역할만 수행하는 SoC(Separation of Concerns) 적용
  • Dart 3의 switch expressions를 활용한 상태-색상 매핑 로직 최적화로 UI 코드 밀도 향상 및 가독성 확보
  • async gap 발생 전 필요한 Context 객체를 사전 추출하는 패턴을 통해 use_build_context_synchronously 린트 에러 방지 및 런타임 안정성 강화
  • 외부 차트 라이브러리 없이 LinearProgressIndicator를 활용한 통계 데이터 시각화로 번들 사이즈 최적화 및 렌더링 성능 유지
  • FutureBuilder와 setState 중심의 단순 데이터 흐름 설계를 통해 Edge Function 호출부터 렌더링까지의 파이프라인 단순화

1. 비즈니스 공식 변경이 잦은가? $\rightarrow$ Edge Function으로 로직을 이전하여 리빌드 제거

2. async/await 이후 context를 참조하는가? $\rightarrow$ await 호출 전 Navigator/ScaffoldMessenger 등을 변수에 사전 할당

3. 단순 수치 시각화가 필요한가? $\rightarrow$ 무거운 차트 패키지 대신 기본 ProgressIndicator 활용 검토

4. 상태-UI 매핑이 복잡한가? $\rightarrow$ Dart 3 switch expression으로 매핑 로직 간소화

원문 읽기