현재 진행중인 실전 프로젝트에서 progressBar를 맡게 되었다.
구현을 하다보니 여러가지 공부를 해야하는 것들도 많아서, 기록용으로 이 게시물을 만들게 되었다.
일단 우당탕탕 정리하고, 추후 예쁘게 정리해 볼 예정!
📅 작업기간
22/03/02(수) ~ 22/03/06(일)
✏️ 구현 포인트
1️⃣ 유튜브 영상 시간에 따른 progress bar
2️⃣ 특정 %에 따른 메시지 출력 기능
3️⃣ 모든 사용자에게 동기화되어 있음
호출 스케줄링 : setInterval - setTimeout
https://ko.javascript.info/settimeout-setinterval
setTimeout과 setInterval을 이용한 호출 스케줄링
ko.javascript.info
현재 프로젝트에는 setInterval이 더 적합할 듯
setInterval()
https://developer.mozilla.org/en-US/docs/Web/API/setInterval
setInterval() - Web APIs | MDN
The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
developer.mozilla.org
함수 매초마다 반복해서 실행하게 해주는 메소드. 퍼센티지 감소에 사용? cf. clearInterval().
유튜브 api : 동영상 길이
https://developers.google.com/youtube/v3/docs/videos?hl=ko
Videos | YouTube Data API | Google Developers
Videos video 리소스는 YouTube 동영상을 나타냅니다. 메소드 API는 videos 리소스에 다음 메소드를 지원합니다. getRating 지정된 동영상의 목록에 대해 인증된 사용자가 적용한 평가를 검색합니다. 지금
developers.google.com
| contentDetails.duration | string 동영상의 길이입니다. 태그 값은 ISO 8601 길이(PT#M#S 형식)입니다. 여기서 문자 PT는 이 값이 시간의 길이를 지정함을 나타내며 문자 M 및 S는 각각 분과 초를 나타냅니다. M과 S 문자 앞에 오는 # 문자는 둘 다 동영상의 분 또는 초 숫자를 지정하는 정수입니다. 예를 들어 값 PT15M51S는 동영상 길이가 15분 51초임을 나타냅니다. |
이걸 백엔드쪽에서 초로 변경해서 보내주게끔?
Building a Progress Bar component using ReactJS & Styled Components
Building a Progress Bar component using ReactJS & Styled Components
Building a ProgressBar component based on the html progress element, allowing users to control color and width.
blog.campvanilla.com
뭔가 형태는 다르지만 참고용
쉽게 구현하는 ProgressBar
https://www.geeksforgeeks.org/how-to-create-a-custom-progress-bar-component-in-react-js/?ref=lbp
How to create a custom progress bar component in React.js ? - GeeksforGeeks
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
www.geeksforgeeks.org
max값을 동영상 길이 받아온 값을 주고, value?값을 줄 수 있는 방법..?
https://katerinalupacheva.github.io/react-progress-bar/
React App
katerinalupacheva.github.io
react bootstrap : 진행률 표시 줄
https://runebook.dev/ko/docs/react_bootstrap/components/progress/index
React Bootstrap - 진행률 표시 줄 - 간단하면서도 유연한 진행률 표시 줄을 사용하여 워크 플로 또는
기본 구성 요소 CSS 기본 클래스 이름 및 수정 자 클래스 이름 접두사를 변경합니다. 이것은 고도로 맞춤화 된 부트 스트랩 CSS로 작업하기위한 탈출 해치 입니다.
runebook.dev
@ramonak/react-progress-bar
https://www.npmjs.com/package/@ramonak/react-progress-bar
@ramonak/react-progress-bar
> Progress Bar React Component. Latest version: 4.4.0, last published: 23 days ago. Start using @ramonak/react-progress-bar in your project by running `npm i @ramonak/react-progress-bar`. There are 9 other projects in the npm registry using @ramonak/react-
www.npmjs.com
react-sweet-progress
https://github.com/nickbullll/react-sweet-progress
GitHub - nickbullll/react-sweet-progress: A way to quickly add a progress bar to react app 🌈
A way to quickly add a progress bar to react app 🌈 - GitHub - nickbullll/react-sweet-progress: A way to quickly add a progress bar to react app 🌈
github.com
구현하는 것은 상당히 쉽다. 애니메이션도 들어가있다. 총 길이/퍼센티지를 동영상 길이와 맞출 수 있는 방법이 있다면 좋을텐데
axios 인터셉터
https://basketdeveloper.tistory.com/65
React로 ProgressBar 구현하기
요즘 몇몇 웹사이트 들어가보면 브라우저 상단에 ProgressBar가 동작하는 것을 확인 할 수 있습니다. 유투브, 구글애드센스 등 브라우저에서 요청을 하면 ProgressBar를 표시해서 사용자에게 나름(?)
basketdeveloper.tistory.com
인터셉터 참고용.
'WHAT I LEARNED > React' 카테고리의 다른 글
| setstate 사용 시 리렌더링 안되는 오류 (0) | 2022.08.25 |
|---|---|
| [React] 카카오 로그인 구현하기(자바스크립트 SDK) (0) | 2022.03.26 |
| [React] export ~~~ was not found in~~~ (0) | 2022.02.07 |
| [React] React Hook is called in function *** that is neither a React function component nor a custom React Hook function. (0) | 2022.02.07 |
| [React] onClick 함수가 페이지 로딩 직후 실행될 때 (0) | 2022.02.07 |