[20220512 T]

오늘은 (5) 월 (12) 일 / 날씨: (nice?)

한줄: 2주동안 생일파티한 기분이...이제 텐션낮추고 일상으로 돌아와서 공부해..📕 플레이어 말고 다른 공부도 파이팅🤸‍♂️Keep pushing forward..! 내일은 금요일이쟈나나나나나 쒼나 침대 그만 눕기 졸리자나

💻 1) WORK MEMO & REVIEW

Everyday

✍️ 소스코드

• memo

  • 코드정리
  • 과장님이 알려주신 오픈소스 svg 라이브러리 교체
    https://heroicons.dev/
    https://blog.logrocket.com/how-to-use-svgs-in-react/

• 버그 개선사항 및 What I learnd ...

  • use-select: 드래그나 더블클릭 막을 때
    https://www.w3schools.com/cssref/css3_pr_user-select.asp
  • :fullscreen css
    https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
  • controller 보이기 style.visibility="hidden/visible" 로 조절 or classList로 css 뗐다 붙였다하기
  • canvas snapshot

      const capture = () => {
    const canvas = document.createElement('canvas');
    canvas.width = 160;
    canvas.height = 90;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(secondVideo.current, 0, 0, canvas.width, canvas.height);
    setSnapShot(canvas.toDataURL());
    };

  • style jsx vs style jsx global
    https://velog.io/@dasu/Next.js-styled-jsx-%EB%A1%9C-component-style-%EC%A0%81%EC%9A%A9
  • fullscreen

    const handleFullScreen = () => {
    if (!document.fullscreenElement) {
      refPlayerWrapper.current.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
    };

  • 비디오 이벤트리스너

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event

  • 이벤트리스너 - pointer~ vs mouse~

    document.addEventListener('pointermove', handleScrubbing);
    document.addEventListener('pointerup', handleScrubEnd);

The support for touch devices will also “magically” improve. Although, we may need to add touch-action: none in some places in CSS. We’ll cover it below in the section about pointercancel.

포인터 이벤트는 다양한 Pointing Devices 를 다룰 수 있는 현대적인 방법
pointing devices(mouse, pen/stylus, touchscreen)

https://javascript.info/pointer-events

• 프로그래스바 퍼센트 구하기

  const getProgressbarRect = () =>
   refProgressbar.current.getBoundingClientRect();
  
  const getProgressPercent = (e.pageX, rect) =>
   Math.min(Math.max(0, e.pageX - rect.left), rect.width) / rect.width;

  • 클리어 함수를 쓰시오 removeEventListener
  • input range step range
    

💻 2) CODING & STUDY

20 to 24

✍️ 대제목:

• 소제목
  • draggable ui ~
  • 주말까지 완성? pushpush
• 소제목

🆎🎾 3) ENGLISH/ GERMAN / TENNIS

Monday/ Wednesday/ Thursday (Clarisse랑 날짜 조정하기)
Wednesday/ Saturday

19 to 20

• Memo
  There is on more person with us.
  Except him,
  have no religion
  mother's side
  bear with me
  roller coaster of experiences
  despite of that
  urgency tenacity

📌 4) ETC (READING/ ECONOMY)

Free time

6) TODO & QUESTIONS

• 코드정리 =>ok?
• svg 변경 => 완료
• 비플 버그 개선사항 정리
• 은행
• 언니청담 => 완료
• 클라리스 7시 => 완료
• 코딩공부 2hours => ok
• 밀린 일 헤치우기 => ok
• 알렉스카톡
• 테니스 레슨예약 => 대기
• 내일 광명

❤️ 5월 GOALS

• 재밌는 프론트엔드기능 만들어보기
• nodejs 공부하기
• 실무 질문 많이하기
• 테니스 꾸준히 나가기 (운동량 너무 부족해 테니스를 늘리든지 운동을 하나 더 하든지)
• 책읽을 휴식시간이 필요해