Recommended
More Related Content
Similar to Component, Redux 기반 비디오 구조 제안
Similar to Component, Redux 기반 비디오 구조 제안 (20)
More from Young-Hyuk Yoo
Component, Redux 기반 비디오 구조 제안
- 1. BuzzVideo Overview Component with Redux
- 2. BuzzVideo - BuzzVideo : VAST 기반의 비디오 광고를 재생하기 위해 필요한 BuzzVideoView를 제공 - 비디오 광고에 해당하는 초기값을 전달해주면 이후 플레이, 리워드, 랜딩 등 리워드 광고의 모든 기능을 수행 - Redux 패턴으로 상태를 관리 - Component 기반으로 UI를 관리
- 3. Redux 이벤트 비순수 함수 로직 순수 함수 로직 유일한 상태 저장소 Store 상태로 렌더링 이벤트 발생시 트리거
- 4. 실제 Redux 시나리오 - 이벤트 발생 이벤트 비순수 함수 로직 순수 함수 로직 유일한 상태 저장소 Store 상태로 렌더링
- 5. 실제 Redux 시나리오 - 미들웨어 처리 이벤트 비순수 함수 로직 순수 함수 로직 유일한 상태 저장소 Store 상태로 렌더링
- 6. 실제 Redux 시나리오 - 리듀서로 상태 변경 이벤트 비순수 함수 로직 순수 함수 로직 유일한 상태 저장소 Store 상태로 렌더링
- 7. 실제 Redux 시나리오 - 렌더링 이벤트 비순수 함수 로직 순수 함수 로직 유일한 상태 저장소 Store 상태로 렌더링
- 8. Component UI UI 를 컴포넌트 단위로 분해
- 9. Component UI View는 여러 Component로 나뉘고, Store의 상태에 따라 각 Component를 렌더링 Component Component Component Component Component
- 10. 실제 컨포넌트 구성 출처 : https://www.figma.com/file/S1HC7cwBFfOjiPS51DpwKz/BuzzAd-Video-AOS-(4)?node-id=12%3A8
- 11. Component 구조 XML로 부터 기본 뷰 초기화
- 12. Component 구조 뷰에 이벤트 등록
- 13. Component 구조 부모에 자신 소유의 뷰를 등록
- 14. Component 구조 모든 컴포넌트가 동일하게 처리. 부모가 라이프사이클에 맞게 이벤트 전달할지 말지 결정
- 15. Component 구조 Store의 상태가 변할 때마다 newState(state)가 호출됨. 자신이 의존하는 상태에 변화가 있으면 뷰 변경.
- 16. 장점 - 디버깅 편리 View를 변화시키는 모든 State가 VideoReducer로 오는 Action을 통해 수행. 즉, 리듀서 로그만 잘 봐도 이벤트의 변화가 잘 되는지 알 수 있음 또한, 브레이크 포인트를 이 곳에 걸면 액션이 들어오는 시점의 모든 상태를 바로 확인해볼 수 있음. 예시) Error 액션이 들어올 때 Campaign의 정보나 VastTag 등을 바로 접근 가능
- 17. 장점 - UI 분리 배치 편리 UI를 Component 단위로 쪼개서 관리하기 때문에 A/B 테스트가 용의 또한 각각의 뷰가 작은 컴포넌트 단위로 쪼개져있고 ConstraintLayout을 사용하기 때문에 배치를 쉽게 바꿀 수 있음 풀스크린 상태 변화에 따라 뷰 재배치 코드
- 18. 장점 - 비지니스 로직 분리 편리 모든 이벤트가 Middleware 를 거쳐서 Store를 가기 때문에 특정 비지니스 로직을 Middleware로 분리 가능 예시 : TrackerMiddleware
- 19. 장점 - 랜딩 액티비티 구현 용의 모든 상태가 Store에 저장되기 때문에 두 개의 View가 하나의 Store를 사용하면 동일한 상태로 뷰를 구현 가능 이를 이용해서 비디오 랜딩을 할 때 Store를 넘겨주고 랜딩 액티비티에 Store를 등록 이러한 상태 저장소가 없으면 progress 정보나 rewarded 정보 등을 모두 별도로 담아서 보내줘야 함 VideoLandingActivity 내 Store 등록 부분
- 20. 장점 - Unit 테스트 구현 편리 Action - State 를 기반으로 변화가 이뤄지기 때문에 UnitTest 구현이 편리
- 21. 단점 - 외부 아키텍쳐와 연동이 불편 Store라는 상태 저장소에 Ad, Creative, Config 등 외부의 데이터를 모두 초기화해줘야 함 링크
- 22. 단점 - 보일러 플레이트 Component를 구현하기 위해 구현해야 하는 인터페이스 등 다소 보일러 플레이트 존재 최초 Component를 많이 만드는 시점에 조금 귀찮게 느껴졌음 하지만 이제 대규모로 추가 수정이 이뤄지지 않기 때문에 나쁘지 않음 (Compose로 관리하면 더 수월할지도..)