• Video, StreamVideo 분리 vs 통합

• 안정민 : 겹치는 로직 hook으로 빼고, StreamVideo랑 StaticVideo 구분해도 좋을 듯.

• string 매직 넘버 삭제

• typeof src 부분 수정

• 컴포넌트의 재사용성을 올리기 위해 작은 컴포넌트로 나누어 개발하여 합치려고 생각하였음.

• 하위 컴포넌트부터 관심사를 정의해서 감싸가며 상향식 개발을 하였음.

  • 하위 컴포넌트에서 관심사를 정의해서 컴포넌트의 관심사에서 필요 없는 기능을 쳐내 위로 올릴 수 있었음.

• 하위 컴포넌트를 나름 개발했다고 해도, 기능들이 상위 컴포넌트로 올라가면서 하위 컴포넌트에서 제공받아야하는 값이나 등록해야하는 이벤트가 발생

  • 많은 props들이 생기게 되고, 결국 의존성 증가
  • props로 넘겨주는 값이 많아지면서 가독성 저하

  → 관련된 비지니스로직을 밑으로 이양하지 말고 한번에 관리해 한 눈에 보고싶다.

  → 그러면서 아토믹한 UI 컴포넌트의 재사용성은 올리고 싶다.

• feedback 페이지에서 feedbackBox와 Timeline 컴포넌트를 개발해야함

• feedbackBox는 작성 시간과, 본문, 핀, 편집, 삭제 버튼이 있음

• Timeline은 feedbackList를 feedbackBox 컴포넌트로 전달해 스크롤뷰를 렌더링

  • Timeline과 같은 계층인 영상 컴포넌트로부터 현재 시간을 받아,

    영상과 피드백 표시 시점을 일치시켜야함.

• 근데 타임라인?은? 종속된 컴포넌트여도 되는거 아닌감?

  범용 컴포넌트

  Timeline안에 Feedbackbox의 로직이

  문제사항

  원래는 컴포넌트는 ui와 해당 ui에 관련된 로직이 결합된 형태를 말한다.

  우리도 컴포넌트를 분리를 해야하는데

  • 모든 컴포넌트의 로직이 너무 강결합되어 있어, 응집도가 떨어진다.
    • video element의 상태인 current time을 상위 컴포넌트의 상태에서 사용하고 있다.
  • 서로 연관된 로직들이 여러 컴포넌트에 산재해 있어 관리가 안되고 있다.
  • 재사용할만한 컴포넌트에 비즈니스 로직이 강결합되어 있어 재사용하기가 힘들어진다.

  UI렌더링 로직은 컴포넌트랑 결합O

  비지니스 로직이 강결합

  해결방안

• 비즈니스 로직을 최상위 컴포넌트에서만 관리하고 범용컴포넌트에 내려주는 방식

  • 최상위 컴포넌트의 로직이 너무 두터워지지 않을까?
  • 커스텀 훅으로 분리한다.

• 가장 큰 feedback 페이지에서 compound을 적용한다.

• 비즈니스 로직과 랜더링 로직을 구분한다.

  • atomic paterrn 적용
  • composition 적용
  • 재사용성
  • 범용 컴포넌트 분리

• 범용 컴포넌트를 위한 디렉터리 관리

• feedback 박스에 composition 패턴 적용

걱정

• 이 패턴을 전역적으로 적용하는게 비용이 너무 크지 않을까?
  • 일관성과