0. 설계

페이지 내 컴포넌트와 상태 관계도

• 다시보기 진행 시간 상태에 따라 헤더의 진행시간, 스크립트 하이라이팅, 바 진행도를 갱신합니다.

1. 설계: 프로그래스 바 드래그로 제어하기

• 드래그 판단 조건: 프로그래스 바에서 MouseDown && MouseMove라고 생각했습니다.
• 그래서 마우스 버튼을 클린한 경우 isProgressBarDrag flag state를 true로 변경하도록 했습니다.
• MouseMove 이벤트가 발생할 때마다 isProgressBarDrag가 true일 때, progressMsTimeState와 프로래스 바의 width를 조절하도록 했습니다

2. 해당 설계의 문제

문제 - MouseMove 이벤트가 너무 많이 발생해 부하 발생 가능성

• MouseMove 이벤트는 마우스의 좌표가 바뀔 때마다 발생합니다. 만약 900pixel의 프로그래스 바의 끝에서 끝까지 드래그 할 경우 적어도(x축 이동 뿐만 아니라 y축 이동에도 이벤트가 발생할 것이기 때문입니다.) 900회 이상의 이벤트가 발생할 것 입니다.

  

  

• 단순히 프로그래스 바를 랜더링 하는 수준에서는 감당 가능한 부하겠지만, 프로그래스바의 이동에 따라 다시보기 화면 전체를 랜더링 하는 경우는 부하가 커질 것이라고 판단했습니다. 그리고 추후 다시보기의 내용을 쪼개서 요청을 보내 캔버스를 랜더링 할 경우 요청이 너무 많아 클라이언트 뿐만 아니라 서버에도 큰 부하가 발생할 수 있을 것이라고 판단했습니다.

3. 해당 설계의 문제 해결

해결 - 쓰로틀링 적용