Flutter Bloc 을 제품개발에 야무지게 적용하기

Future 2024 행사에서 진행한 세션 발표자료입니다.

Transcript

1. Flutter Bloc을 제품 개발에 야무지게 적용하기 최정연, LINE / ABC Studio
2. https://github.com/hohoins/flutter_bloc_abc_studio
3. https://www.inflearn.com/courses?s=%EC%83%88%EC%B0%A8%EC%9B%90
4. LINE ABC Studio Flutter App 개발 데마에칸 (일본 No.1 푸드 딜리버리) https://demae-can.com/
5. Consumer Manager Merchant Retail Driver Merchant Driver Yahoo Quick Mart
6. 목차 1. Bloc을 선택한 이유 2. 일회성 동작 처리 3. 코드 작성 피로도 줄이기 4. widget build 최적화 5. Bloc test 개선하기
7. 1. Bloc을 선택한 이유
8. 리뉴얼 + 다양한 기능 추가 예정됨 프로덕트 규모 커짐 개발자 수 증가 보다 효과적 구조 고민 https://techblog.lycorp.co.jp/ko/how-to-ux-research-and-renewal-for-overseas-users
9. 비즈니스 로직 분리 용이 높은 인지도 (유지보수⇧, 참고자료⇧) bloc_test 용이 규모가 커진 앱에 적합하다고 판단 https://engineering.linecorp.com/ko/blog/flutter-architecture-getx-bloc-provider
10. 2. 일회성 동작 처리
11. 일회성 동작 ???
12. 스낵바, 토스트 메시지, 다이얼로그 다음 화면으로 이동, 등등 일회성 동작 ???
13. 스낵바 같이 만들어 봅시다
15. https://bloclibrary.dev/naming-conventions/
16. https://bloclibrary.dev/naming-conventions/
21. 스낵바 간단하네요?
22. 하지만... 문제가 있습니다
24. 반복적 실행 문제 발생 ‘+’를 눌렀는데 스낵바는 왜 보입니까?
26. status: initial counterA: 0 counterB: 0 counterC: 0
27. status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()
28. status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData() status: success counterA: 0 counterB: 0 counterC: 0
29. status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData() status: success counterA: 0 counterB: 0 counterC: 0 onTap IncrementA()
30. 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()
31. 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()
32. 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()
34. 반복 문제 해결하려면 success가 아닌 status로 변경 필요
36. 지금의 설계로는 해결이 어렵습니다
37. 다이얼로그 다음 화면 이전 화면
38. 다이얼로그 다음 화면 이전 화면
39. 다음 화면 이전 화면
40. 이전 화면
42. 논리적 충돌
43. 불필요한 data
44. emit 호출 시 반복적 실행 status enum 논리적 충돌 state class 불필요한 data
45. 이전 화면 다음 화면 화면을 그리는 데이 터 일회성 동작 데이터
46. 화면을 그리는 데이 터 이전 화면 다음 화면 일회성 동작 데이터
48. class Empty
49. class ShowDialog String dialogMessage class Empty
50. class ShowDialog String dialogMessage class GoToPrevPage int prevPageData class GoToNextPage int nextPageData class Empty class ShowSnackBar
51. 화면을 그리는 데이터 일회성 동작 데이터 중첩된 클래스로 구분
52. 살짝 복잡해 보이는데요 코드는 어떻게 합니까
56. 논리적 충돌 해 결
57. 논리적 충돌 해 결
58. 불필요한 data 해 결
59. 불필요한 data 해 결
61. 반복적 실행 해결
62. 반복적 실행 해결 논리적 충돌 해결 불필요한 data 해결
65. 그런데... 코드가 길어져서 코드 작성이 부담스럽습니다
66. 3. 코드 작성 피로도 줄이기
67. 작성할 최소한의 코드 파일 3개 60줄 1200자
68. IntelliJ IDEA: Live Templates VS Code: Snippets
69. Visual Studio Code
75. Snippets 작성 완료 !!! 잘 되는지 확인해 봅시다
77. 이렇게 좋은 것은 반드시 팀원들과 공유!!!
78. https://github.com/hohoins/flutter_bloc_abc_studio/tree/main/code_snippets Snippets mac 파일 경로 ~/Library/Application Support/Code/User/snippets/
79. 템플릿 처리 1석 3조 코딩 피로도 감소 일관된 코딩 컨벤션 작업 속도 향상
80. IntelliJ IDEA Android Studio Settings> Editor> Live Templates
83. File> Manage> IDE Settings> Export Settings File> Manage> IDE Settings> Import Setting Live templates(schemes) 선택
84. 팀원들과 공유하세요 1석 3조 코딩 피로도 감소 일관된 코딩 컨벤션 작업 속도 향상 https://github.com/hohoins/flutter_bloc_abc_studio/tree/main/live_templates
86. state는 정리되었습니다 UI 최적화를 해봅시다
87. 4. widget build 최적화
88. State가 변경되면 대부분의 widget 다시 build 되는 문제
90. 원인을 찾아봅시다
93. 참조하는 값이 변경될 때만 build 하고 싶습니다
94. https://bloclibrary.dev/flutter-bloc-concepts/#blocselector
95. https://bloclibrary.dev/flutter-bloc-concepts/#blocselector
99. 값이 1개가 아니면 BlocSelector 적용이 어렵네요
100. https://bloclibrary.dev/flutter-bloc-concepts/#blocbuilder
101. https://bloclibrary.dev/flutter-bloc-concepts/#blocbuilder
104. 이제 잘 되겠지요?
106. 아직 더 개선 가능합니다 !!!
108. 유지보수가 어려운 중첩된 조건문
109. state 전체 접근이 가능해 bug 발생 가능성 내포
110. 유지보수 어려운 조건문 State 노출로 bug 발생 가능성 내포
111. 그래서 BlocSelector2 … BlocSelector6 만들었습니다
112. https://github.com/hohoins/flutter_bloc_abc_studio/blob/main/lib/common/bloc_selector.dart
113. https://github.com/hohoins/flutter_bloc_abc_studio/blob/main/lib/common/bloc_selector.dart
114. BlocSelector3 적용해 봅시다
117. 유지보수가 어려운 중첩된 조건문 해결
118. state 전체 접근이 가능해 bug 발생 가능성 내포 해결
119. 유지보수 어려운 조건문 해결 State 노출로 bug 발생 가능성 내포 해결
120. 아무리 그래도... 2 ~ 6은 조금 어색한데요 BlocSelector2 BlocSelector3 BlocSelector4 BlocSelector5 BlocSelector6
121. https://pub.dev/documentation/provider/latest/provider/provider-library.html
122. widget build 최적화 완료! 마무리로 테스트 코드 작성~
123. 5. Bloc test 개선하기
124. https://pub.dev/packages/bloc_test
125. https://pub.dev/packages/bloc_test
126. https://pub.dev/packages/bloc_test
127. https://pub.dev/packages/bloc_test
128. https://pub.dev/packages/bloc_test
129. https://pub.dev/packages/bloc_test
130. 더하기 테스트 해봅시다
135. API 호출 테스트
136. emit 1 loading emit 2 서버 데이터 처리 emit 3 success
141. 테스트 성공!!!
142. 테스트 코드 작성이 어려운 문제가 있네요
143. state 유지가 안 되는 문 제 수작업으로 처리
144. state 수정 ex) 멤버 변수명 변경
145. 수정할 내용이 많습니다 state 수정 불리한 문제
146. state 유지가 안 되는 문제 state 수정 불리한 문제 해결해 봅시다
156. 테스트할 값에만 집중 가능 state class 변화 대응이 좋음
157. state 유지가 안 되는 문제 해결 state 수정 불리한 문제 해결
158. 소개해 드린 모든 내용은 데마에칸 MerchantApp 제품 개발에 적용된 내용입니다 도움이 되었으면 좋겠습니다
159. Bloc 야무지게 사용하시기를 바랍니다
160. 감사합니다 Flutter Bloc을 제품 개발에 야무지게 적용하기 샘플 코드 깃허브 https://github.com/hohoins/flutter_bloc_abc_studio