JavaScript 썸네일형 리스트형 react에서 lottie 사용하기 1. react-lottie 설치 yarn add react-lottie --save --dev 2. 디자이너분께 lottie json 받기 3. 아래와 같이 작성 import React from 'react'; import Lottie from 'react-lottie'; import classNames from 'classnames/bind'; import { hot } from 'react-hot-loader/root'; import * as bear from '../../lottie/bear'; const style = require('./index.scss'); const cx = classNames.bind(style); const lottieOptions = { animationData: b.. react webpack build issue webpack dev 버전으로 보면 잘 보이는데, build 후 dist file을 보면 화면에 잘 보이지 않는다. 이슈 원인: BrowerRouter가 제대로 build 되지 않았기 때문이다 이슈 해결: HashRouter를 사용한다. as-is import * as React from 'react'; import { Switch, BrowserRouter as Router, Route } from 'react-router-dom'; import Home from '../components/Home'; import DynamicPage from '../components/DynamicPage'; const App = () => ( ); export default App; to-be import * as.. protobuf arrayBuffer 우회하기 ios safari에서 protobuf를 사용하면 arrayBuffer가 존재하지 않는다는 오류가 뜬다. .then(blob => { if (blob.arrayBuffer) { return blob.arrayBuffer(); } else { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = function() { resolve(fileReader.result); }; fileReader.readAsArrayBuffer(blob); }); } }) fileReader로 우회하면 된다. 참고: https://developer.mozilla.org/ko/docs/Web/API/File.. TypeError: Cannot read property 'range' of null eslint 를 webpack dev-server로 연결해서 사용하는 과정에 아래와 같은 에러가 발생하였다. TypeError: Cannot read property 'range' of null babel-eslint의 버전을 낮춰 사용하면 위와 같은 에러를 해결할 수 있다. "devDependencies": { "babel-eslint": "8.2.1" }, [webpack] webpack scripts 명령어에서 분기 처리하는 방법 cross-env 에서 BUILD_TYPE=share, BUILD_TYPE=production 과 같이 매개변수 전달 "scripts": { "dev": "webpack-dev-server --config webpack.config.development.js", "share": "cross-env NODE_ENV=production BUILD_TYPE=share webpack -p --config webpack.config.production.js", "build": "cross-env NODE_ENV=production BUILD_TYPE=production webpack -p --config webpack.config.production.js" }, webpack.config.js에서 process... [webpack] Invalid Host header 호스트 설정을 하고, webpack-dev-server를 통해 웹서버를 켰는데, Invalid Host header 에러가 발생했다. webpack.config.development.js에서 'disableHostCheck: true'를 추가하면 된다. devServer: { disableHostCheck: true, host: '127.0.0.1', port: port, historyApiFallback: true, open: true } canvas에 poster이미지 로드 video 태그를 createElement('video') 생성하고, dom에 그리지 않고 바로 canvas에 drawImage(video, 0, 0, videoWidth, videoHeight); 할 경우 video를 play하지 않으면 초기에 썸네일이 나오지 않는 이슈가 있다. video src에 t=0.1;을 추가해주면 된다. const POSTER_TIME = 0.1; export const videoUrl = `${HOST_API}/video/bear.mp4#t=${POSTER_TIME}`; 모든 브라우저, 디바이스에서 작동되는지는 확인해봐야 한다. 출처: https://stackoverflow.com/questions/7323053/dynamically-using-the-first-frame-.. requestAnimationFrame 을 지정된 시간동안 일정하게 호출하는 방법 1. setTimeout으로 1초에 30 프레임씩 render start = (callback, fps) => { const seconds = 1000 / fps; callback(); this.id = setTimeout(() => { this.start(callback, fps); }, seconds); } 2. requestAnimationFrame으로 1초에 30 프레임씩 render start = (callback, fps) => { const frame = timestamp => { if (this.timestamp === 0) { this.timestamp = timestamp; } this.totalProgress = timestamp - this.timestamp; this.progres.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
