Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutter Bloc 을 제품개발에 야무지게 적용하기
Search
LINEヤフーTech (LY Corporation Tech)
PRO
October 11, 2024
Technology
0
390
Flutter Bloc 을 제품개발에 야무지게 적용하기
Future 2024 행사에서 진행한 세션 발표자료입니다.
LINEヤフーTech (LY Corporation Tech)
PRO
October 11, 2024
Tweet
Share
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
280
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
380
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
9
740
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
360
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
3
430
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
2
880
Yahoo!知恵袋におけるフロントエンド開発
lycorptech_jp
PRO
0
1.1k
"LINE Planet" and AI: Conversations with AI
lycorptech_jp
PRO
0
83
Seamless inventory management with AI
lycorptech_jp
PRO
0
41
Other Decks in Technology
See All in Technology
株式会社ARAV 採用案内
maqui
0
360
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
620
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
200
Browser
recruitengineers
PRO
5
560
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
440
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
5
390
JOAI発表資料 @ 関東kaggler会
joai_committee
1
380
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
4
4.7k
Backboneとしてのtimm2025
yu4u
4
1.6k
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの3つのシナリオ
masayamoriofficial
0
190
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Navigating Team Friction
lara
189
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Unsuck your backbone
ammeep
671
58k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Become a Pro
speakerdeck
PRO
29
5.5k
Agile that works and the tools we love
rasmusluckow
329
21k
We Have a Design System, Now What?
morganepeng
53
7.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Why Our Code Smells
bkeepers
PRO
338
57k
Transcript
Flutter Bloc을 제품 개발에 야무지게 적용하기 최정연, LINE / ABC
Studio
https://github.com/hohoins/flutter_bloc_abc_studio
https://www.inflearn.com/courses?s=%EC%83%88%EC%B0%A8%EC%9B%90
LINE ABC Studio Flutter App 개발 데마에칸 (일본 No.1 푸드
딜리버리) https://demae-can.com/
Consumer Manager Merchant Retail Driver Merchant Driver Yahoo Quick Mart
목차 1. Bloc을 선택한 이유 2. 일회성 동작 처리 3.
코드 작성 피로도 줄이기 4. widget build 최적화 5. Bloc test 개선하기
1. Bloc을 선택한 이유
리뉴얼 + 다양한 기능 추가 예정됨 프로덕트 규모 커짐 개발자
수 증가 보다 효과적 구조 고민 https://techblog.lycorp.co.jp/ko/how-to-ux-research-and-renewal-for-overseas-users
비즈니스 로직 분리 용이 높은 인지도 (유지보수⇧, 참고자료⇧) bloc_test 용이
규모가 커진 앱에 적합하다고 판단 https://engineering.linecorp.com/ko/blog/flutter-architecture-getx-bloc-provider
2. 일회성 동작 처리
일회성 동작 ???
스낵바, 토스트 메시지, 다이얼로그 다음 화면으로 이동, 등등 일회성 동작
???
스낵바 같이 만들어 봅시다
None
https://bloclibrary.dev/naming-conventions/
https://bloclibrary.dev/naming-conventions/
None
None
None
None
스낵바 간단하네요?
하지만... 문제가 있습니다
None
반복적 실행 문제 발생 ‘+’를 눌렀는데 스낵바는 왜 보입니까?
None
status: initial counterA: 0 counterB: 0 counterC: 0
status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()
status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()
status: success counterA: 0 counterB: 0 counterC: 0
status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()
status: success counterA: 0 counterB: 0 counterC: 0 onTap IncrementA()
status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()
status: success counterA: 0 counterB: 0 counterC: 0 status: success counterA: 1 counterB: 0 counterC: 0 onTap IncrementA()
status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()
status: success counterA: 0 counterB: 0 counterC: 0 status: success counterA: 1 counterB: 0 counterC: 0 onTap IncrementA() onTap IncrementA()
status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()
status: success counterA: 0 counterB: 0 counterC: 0 status: success counterA: 1 counterB: 0 counterC: 0 status: success counterA: 2 counterB: 0 counterC: 0 onTap IncrementA() onTap IncrementA()
None
반복 문제 해결하려면 success가 아닌 status로 변경 필요
None
지금의 설계로는 해결이 어렵습니다
다이얼로그 다음 화면 이전 화면
다이얼로그 다음 화면 이전 화면
다음 화면 이전 화면
이전 화면
None
논리적 충돌
불필요한 data
emit 호출 시 반복적 실행 status enum 논리적 충돌 state
class 불필요한 data
이전 화면 다음 화면 화면을 그리는 데이 터 일회성 동작
데이터
화면을 그리는 데이 터 이전 화면 다음 화면 일회성 동작
데이터
None
class Empty
class ShowDialog String dialogMessage class Empty
class ShowDialog String dialogMessage class GoToPrevPage int prevPageData class GoToNextPage
int nextPageData class Empty class ShowSnackBar
화면을 그리는 데이터 일회성 동작 데이터 중첩된 클래스로 구분
살짝 복잡해 보이는데요 코드는 어떻게 합니까
None
None
None
논리적 충돌 해 결
논리적 충돌 해 결
불필요한 data 해 결
불필요한 data 해 결
None
반복적 실행 해결
반복적 실행 해결 논리적 충돌 해결 불필요한 data 해결
None
None
그런데... 코드가 길어져서 코드 작성이 부담스럽습니다
3. 코드 작성 피로도 줄이기
작성할 최소한의 코드 파일 3개 60줄 1200자
IntelliJ IDEA: Live Templates VS Code: Snippets
Visual Studio Code
None
None
None
None
None
Snippets 작성 완료 !!! 잘 되는지 확인해 봅시다
None
이렇게 좋은 것은 반드시 팀원들과 공유!!!
https://github.com/hohoins/flutter_bloc_abc_studio/tree/main/code_snippets Snippets mac 파일 경로 ~/Library/Application Support/Code/User/snippets/
템플릿 처리 1석 3조 코딩 피로도 감소 일관된 코딩 컨벤션
작업 속도 향상
IntelliJ IDEA Android Studio Settings> Editor> Live Templates
None
None
File> Manage> IDE Settings> Export Settings File> Manage> IDE Settings>
Import Setting Live templates(schemes) 선택
팀원들과 공유하세요 1석 3조 코딩 피로도 감소 일관된 코딩 컨벤션
작업 속도 향상 https://github.com/hohoins/flutter_bloc_abc_studio/tree/main/live_templates
None
state는 정리되었습니다 UI 최적화를 해봅시다
4. widget build 최적화
State가 변경되면 대부분의 widget 다시 build 되는 문제
None
원인을 찾아봅시다
None
None
참조하는 값이 변경될 때만 build 하고 싶습니다
https://bloclibrary.dev/flutter-bloc-concepts/#blocselector
https://bloclibrary.dev/flutter-bloc-concepts/#blocselector
None
None
None
값이 1개가 아니면 BlocSelector 적용이 어렵네요
https://bloclibrary.dev/flutter-bloc-concepts/#blocbuilder
https://bloclibrary.dev/flutter-bloc-concepts/#blocbuilder
None
None
이제 잘 되겠지요?
None
아직 더 개선 가능합니다 !!!
None
유지보수가 어려운 중첩된 조건문
state 전체 접근이 가능해 bug 발생 가능성 내포
유지보수 어려운 조건문 State 노출로 bug 발생 가능성 내포
그래서 BlocSelector2 … BlocSelector6 만들었습니다
https://github.com/hohoins/flutter_bloc_abc_studio/blob/main/lib/common/bloc_selector.dart
https://github.com/hohoins/flutter_bloc_abc_studio/blob/main/lib/common/bloc_selector.dart
BlocSelector3 적용해 봅시다
None
None
유지보수가 어려운 중첩된 조건문 해결
state 전체 접근이 가능해 bug 발생 가능성 내포 해결
유지보수 어려운 조건문 해결 State 노출로 bug 발생 가능성 내포
해결
아무리 그래도... 2 ~ 6은 조금 어색한데요 BlocSelector2 BlocSelector3 BlocSelector4
BlocSelector5 BlocSelector6
https://pub.dev/documentation/provider/latest/provider/provider-library.html
widget build 최적화 완료! 마무리로 테스트 코드 작성~
5. Bloc test 개선하기
https://pub.dev/packages/bloc_test
https://pub.dev/packages/bloc_test
https://pub.dev/packages/bloc_test
https://pub.dev/packages/bloc_test
https://pub.dev/packages/bloc_test
https://pub.dev/packages/bloc_test
더하기 테스트 해봅시다
None
None
None
None
API 호출 테스트
emit 1 loading emit 2 서버 데이터 처리 emit 3
success
None
None
None
None
테스트 성공!!!
테스트 코드 작성이 어려운 문제가 있네요
state 유지가 안 되는 문 제 수작업으로 처리
state 수정 ex) 멤버 변수명 변경
수정할 내용이 많습니다 state 수정 불리한 문제
state 유지가 안 되는 문제 state 수정 불리한 문제 해결해
봅시다
None
None
None
None
None
None
None
None
None
테스트할 값에만 집중 가능 state class 변화 대응이 좋음
state 유지가 안 되는 문제 해결 state 수정 불리한 문제
해결
소개해 드린 모든 내용은 데마에칸 MerchantApp 제품 개발에 적용된 내용입니다
도움이 되었으면 좋겠습니다
Bloc 야무지게 사용하시기를 바랍니다
감사합니다 Flutter Bloc을 제품 개발에 야무지게 적용하기 샘플 코드 깃허브
https://github.com/hohoins/flutter_bloc_abc_studio