Feature(#256): 프로그래스바 드래그 기능 구현 #260
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 프로그래스 바 드래그 기능 구현
- 오타 수정 prograssBar -> progressBar - 프로그래스바 드래그로 프레임을 탐색할 수 있다. - 쓰로틀링 적용으로 성능적, 사용자 경험적 개선
❌ Deploy Preview for boarlog failed.
|
Jw705
reviewed
Dec 12, 2023
frontend/src/pages/Review/Review.tsx
Outdated
| @@ -27,7 +27,7 @@ const Review = () => { | |||
| let fabricCanvasRef = useRef<fabric.Canvas>(); | |||
| let canvasCntRef = useRef<number>(0); | |||
|
|
|||
| const [prograssBarState, setPrograssBarState] = useState<"disabled" | "playing" | "paused">("disabled"); | |||
| const [progressBarState, setprogressBarState] = useState<"disabled" | "playing" | "paused">("disabled"); | |||
frontend/src/pages/Review/Review.tsx
Outdated
| // onFrameIdRef.current = window.requestAnimationFrame(onFrame); | ||
| // setprogressBarState("playing"); | ||
| // } | ||
| // --> 프로그래스 바를 드래그 할 때, 마우스 클릭을 유지한 경우 타이머가 멈춰야해서 이 부분을 추후 리뷰에서 승인 후 제거하겠습니다. |
| } else { | ||
| clearInterval(timerRef.current); | ||
| const handleProgressBarMouseMove = (event: React.MouseEvent) => { | ||
| console.log("ff"); |
LellowMellow
approved these changes
Dec 12, 2023
| } else { | ||
| clearInterval(timerRef.current); | ||
| const handleProgressBarMouseMove = (event: React.MouseEvent) => { | ||
| console.log("ff"); |
There was a problem hiding this comment.
디버깅을 위한 용도였다면 지워주시면 좋을 것 같습니다.
Comment on lines
+77
to
+84
| if (throttle) return; | ||
| else { | ||
| setThrottle(true); | ||
| setTimeout(() => { | ||
| handleProgressBarDrag(event); | ||
|
|
||
| setThrottle(false); | ||
| }, 250); |
There was a problem hiding this comment.
쓰로틀링을 이렇게 적용하는거군요! 매번 신기한 것 같습니다. 👏👏
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
작업 개요
프로그래스바 드래그 기능 구현 close #256
작업 사항
고민한 점들(필수 X)
문제 - MouseMove 이벤트가 너무 많이 발생해 부하 발생 가능성
MouseMove 이벤트는 마우스의 좌표가 바뀔 때마다 발생합니다.
단순히 프로그래스 바를 랜더링 하는 수준에서는 감당 가능한 부하겠지만, 프로그래스바의 이동에 따라 다시보기 화면 전체를 랜더링 하는 경우는 부하가 커질 것이라고 판단했습니다. 그리고 추후 다시보기의 내용을 쪼개서 요청을 보내 캔버스를 랜더링 할 경우 요청이 너무 많아 클라이언트 뿐만 앙니라 서버에도 큰 부하가 발생할 수 있을 것이라고 판단했습니다.
문제 해결
해결 - 쓰로틀링 적용
디바운싱 vs. 쓰로틀링(쓰로틀링을 적용한 이유)
쓰로틀링을 적용했을 때 예상되는 단점
예상되는 단점에도 이런 성능 개선을 위한 방법을 선택해도 되는 이유
개선의 결과(성능, 사용자 경험)
관련 노션 게시글
스크린샷(필수 X)
2023-12-11.11.06.34.mov
추가사항
드래그 중 마우스가 프로그래스바를 넘어가면 생기는 문제를 해결했습니다.