[html/javascript] videojs progress 처리를 위한 이벤트 및 함수 videojs환경에서 커스텀 프로그래스바를 만드는 중인데 #videojs timeupdate 함수를 통하여, 간단한 계산을 통하여 프로그래스 정보를 표현 할 수 있다. player.on("timeupdate", (e) => { console.log((player.currentTime()/player.duration()*100).toFixed(0)+"%"); }); #videojs #progress #timeupdate #event #html #javascript
[javascript/npm] npm i 설치 잘 안될때, ERESOLVE, could not resolve
[javascript/npm] npm i 설치 잘 안될때, ERESOLVE, could not resolve #리액트에서 다음과 같이 설치가 잘 안될때 충돌 및 버전 에러가 나는경우가 있다, 뒤에 --legacy-peer-deps 충돌처리를 해준다 npm i axios --legacy-peer-deps 잘된다 #react #error #npm #npm i #npm install #error
[react/javascript] 리액트 table에서 drag로 순서변경하기 #라이브러리 https://github.com/clauderic/react-sortable-hoc GitHub - clauderic/react-sortable-hoc: A set of higher-order components to turn any list into an animated, accessible and touch- A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️ - GitHub - clauderic/react-sortable-hoc: A set of higher..
[javascript/react] 리액트 리스트(테이블) 항목 드래그하기(with react-beautiful-dnd) #오픈소스 - 잘만든 드래그 라이브러리 https://github.com/atlassian/react-beautiful-dnd GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React Beautiful and accessible drag and drop for lists with React - GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with Reac..
[javascript/react] React.lazy / Suspense에 대하여 이해하기 lazy는 지연로딩이란 의미로, 데이터를 모두 한번에 로드시키는 것이 아니라, 현재 보이는 화면만 로드 시켜주면서 성능을 향상 시키는 것을 의미한다. import './App.css'; import { BrowserRouter, Route,Switch } from 'react-router-dom'; import React, { lazy, Suspense } from 'react'; const loading = () => Loading; const History = lazy(() => import('./views/History')); const Test = lazy(() => import('./views/Test')..
#react-sortablejs를 이용하여 구현하였다 https://github.com/SortableJS/react-sortablejs GitHub - SortableJS/react-sortablejs: React bindings for SortableJS React bindings for SortableJS. Contribute to SortableJS/react-sortablejs development by creating an account on GitHub. github.com #설치 npm install --save react-sortablejs sortablejs #구현 import React, { useState } from "react"; import { ReactSortable } fr..
#html #javascript var player = videojs("myPlayer", { sources: [{ src: "/resources/01.mp4", type: "video/mp4" }], poster: "/resources/poster.png", controls: false, playsinline: false, fluid: true, // fit preload: "metadata", }); //events player.on("loadedmetadata", () => { console.log("loadedmetadata"); }); player.on("loadeddata", () => { console.log("loadeddata"); }); player.on("canplay", () => ..
크롬에서는 기본 기능이 동작하지 않아서, 스크린 사이즈와 브라우저사이즈를 체크하여 확인하였다 addEventListener('resize', (event) => { if(window.innerHeight == window.screen.height){ console.log("full screen : o"); } else { console.log("full screen : x"); } }); #fullsize #full screen #풀스크린 #전체화면 #javascript #자바스크립트
[css/javascript] 애니메이션 연속으로 실행하기 @Keyframes에서 css에 연결된 애니메이션 실행 시 클래스를 remove / add 를 통해 애니메이션을 제어하면 한번 실행 후 더 실행이되지 않는다. 그럴때 다음과 같이 하면 문제가 해결 된다 .test { animation: fadein 2s; } @keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } #offsetWidth를 통하여 해결가능하다 const body = document.getElementById("body"); body.classList.remove("test"); body.offsetWidth; body.classList.a..