틈

audio.play() audio.pause() audio.volume 이 외, 핸들러를 이용한 여러 상태 변경 요소들 - playing-time/duration-time(with progressBar) const onTimeUpdate = (event) => { if (event.target.readyState === 0) return; const currentTime = event.target.currentTime; const duration = event.target.duration; const progressBarWidth = (currentTime / duration) * 100; prograssBar.current.style.width = `${progressBarWidth}%`; }; - p..

e.preventDefault()의 기능을 css로 해결할 수 있는 속성 클릭이 가능한 태그의 이벤트를 막아줄 수 있다. pointer-events: auto; pointer-events: none; svg 에 대한 추가 속성도 있다! 더보기+

yarn create react-app 폴더명 이전에는 터미널에서 npx create-react-app을 사용했는데, 어느 순간 방식이 바꼈다. yarn create react-app {폴더명} --template typescript 타입스크립트 template 설정

react-dropzone : 파일을 drop-down으로 추가할 수 있음 yarn add react-dropzone yarn add @types/react-dropzone(타입스크립트 사용시 추가 설치) babel for react - es5이하 버전으로 빌드 yarn add -D @babel/cli @babel/preset-react uuid - 아이디를 유니크하게 만들어줌 yarn add uuid react-icons - 각종 font-icon을 모아놓은 라이브러리 yarn add react-icons lodash - 우선은 debounce(이벤트의 무한 실행을 setTimeout 방식으로 끊어줌) yarn add lodash _.debounce

javascript ES6 이상 문법이지만, React문법이 섞여 있어서 부득이하게 react 카테고리로... const Test:React.FC = () => { const [imageList, setImageList] = useState([]); return ( { if (e.currentTarget.files?.[0]) { const file = e.currentTarget.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = (event) => { setImageList((prev) => [ ...prev, event.target?.result as string, ]); }; } }} /> ..

이미지를 넣다보면, 화면에 가득차게 하고 싶을 때가 많다. 그럴때는 주로 background를 이용해서 이미지를 넣고, background-size:cover를 적용했다. 하지만, 의미있는 이미지의 경우, 접근성을 고려해서 노출하는 게 맞기도 하고, background 속성으로 지정하는 게 가끔은 귀찮기도 했다. 그럴때 사용하면 좋을 css! 왼쪽의 이미지처럼 높이가 큰 이미지를, 왼쪽처럼 정사각형 안에 가득차게 설정했다. img { width:200px; height:200px; object-fit:cover; } img에 높이, 너비를 설정하고 object-fit:cover 속성을 추가하면 overflow 적용한 듯한 효과를 볼 수 있다. object-fit에는 fill, contain, cover ..