TIL152 220816 오늘은 마우스 드래그앤드랍을 했다. mouse up, mouse down, mouseDragable을 사용해보았다. 마우스에도 다양한 이벤트들이 있다는 것을 알게 되었고 이것들을 직접 적용해보면서 익혀볼 수 있었다. 동영상 하단에도 컨트롤바를 생성했다. 아직 기능 구현은 안했다,, video 이벤트에서 currentTime을 사용해서 동영상이 현재 진행중인 시간을 알 수 있었다. event.key를 사용해서 스페이스바를 눌렀을때 동영상 재생,정지 기능을 구현할 수 있었다. 2022. 8. 16. 220815 오늘은 재생바를 구현했다. 간단할줄 알았는데,,, 해야할게 너무 많았다. 우선, 재생됨에 따라 재생바가 흰색으로 채워져야했고 그에 따라서 동그란아이콘(?)도 따라와야되고 재생바에 커서를 올렸을때 해당 위치에 대한 시간,, 그리고 그곳으로 이동할 수 있게끔 만들기도 해야되고,, 저 흰색 부분이 채워지는 것은 퍼센트로 계산해서 해당 시간에 대략 몇퍼센트 채워졌는지를 계산한 로직을 대입했다. 시간을 나타내는 부분은 pageX 위치를 보고 계산해서 구할 수 있었다. 여러 좌표값이 있는데 이 짤(?)을 보고 pageX나 clientX로 구하는 것이 적합하겠다고 생각했고 pageX 값을 사용했다. 동영상 시간 구하는 함수는 utils 컴포넌트를 따로 만들어서 분리하였다. 2022. 8. 16. 220814 동영상 일시정지랑 플레이 버튼 따로 만들어서 플레이중 일시정지 할 때 일지정지 버튼 보여야됨 일시정지중 플레이 할 때 플레이 버튼 보여야됨 위 기능 구현하려고 일단 버튼이랑 아이콘만 만들어놨는데,, 오디오 만들었던 거랑 똑같이 해보려다가 막혔다. new Video()는 못쓰는건가,,, 그리고 useRef 가 미디어 재생에 쓰이는 훅이라고 해서 사용해보려는데 쉽지 않다. useState를 사용해서 기본값을 false로 두고 버튼을 누르면 true이면서 play하고 다시 버튼을 누르면 false가 되면서 pause될 수 있도록 하였다. videoElement에 pause(), play()가 있어서 유용하게 사용할 수 있었다. https://developer.mozilla.org/en-US/docs/Web/A.. 2022. 8. 14. 220813 리액트 사용하려는 초기 셋팅부터 너무 시간이 오래 걸렸다. CRA를 사용하려고 했는데 환경 세팅하는 과정을 본다고 그래서,, ㅜ 코드숨 강의 보면서 해보는데 계속 잘 안돼서 너무 조급했다. 그러다가 웹팩 문제라는 것을 알았다. 웹팩의 entry 경로가 절대 경로로 설정되어 있어서 안되던거였다,,, 허무,, 그래도 에러가 완전히 해결된건 아니었다,, 예전에는 reactDOM from 'react-router-dom'으로 사용되던 부분이 이제는 import { createRoot } from 'react-dom/client'; 이렇게 처리를 해줘야한다. prettier 사용해서 eslint 설정도 해줬다. 원래는 single quotation만 쓰라고 되어있었던건지 double쓰면 에러나서 이거 일일히 고치.. 2022. 8. 13. 이전 1 ··· 13 14 15 16 17 18 19 ··· 38 다음
