분류 전체보기 (168) 썸네일형 리스트형 Uncaught ReferenceError: regeneratorRuntime is not defined async/await 사용하다가 본 에러 chrome이 async, await를 지원하는데 에러가 날리가 없어서 이상했는데 babel 문제였다. 해결방법 pollyfill 추가 yarn add babel-polyfill entry: { app: ['babel-polyfill', './app'], }, targets 변경 상위 버젼 크롬만 지원한다. module: { rules: [{ test: /\.jsx?/, loader: 'babel-loader', options: { presets: [ // 배열로 선언하면 babel이 컴파일 할 대상 브라우저도 지정 가능 ['@babel/preset-env', { targets: { // 크롬 최종 버젼으로 부터 2개 버젼 https://github.com/bro.. [Custom Hooks] useInput, useFetch 커스텀 훅으로 자주 사용하는 것들 모듈화(Util 파일로 만들어서 사용하기) useInput, useFetch 만들어 쓰기 const App = () => { const nameHook = useInput(""); const { payload, loading, error } = useFetch("http://aws.random.cat/meow"); // console.log(nameHook) return ( use Hooks {loading && loading your cat} {!loading && error && {error}} {!loading && payload && } ); }; value와 onChange 바인딩된 input을 Hook으로 만들기 export function useInput(d.. [총정리] useEffect(), useMemo(), useCallback() Hook 유의사항 Hook은 순서가 매우 중요 최상위 바깥에 선언해서 실행순서가 일정하게 하는 것이 중요 if문에 넣는것 금지 -> if(조건) useState(값) hook안에 hook을 쓰는것 금지 -> useState안에 useState를 쓰는 등 반복문은 상관없음 -> 비추천 hook과 라이플 사이클 // componentDidMount useEffect(() => { // 실행 할 로직 }, []); // componentDidUpdate const mounted = useRef(false); useEffect(() => { if(!mounted.current) mounted.current = true; // 실행 할 로직 }, [/*변경되는값*/]); // componentDidMount, c.. [수요일 모각코] 내맘대로 코딩 내맘대로 코딩은 작년 여름부터 지속 하고 있는 모여서 각자 코딩하는 스터디이다.(나름 초창기 멤버 자부심!) 작년에 한창 일이 바쁠때는 여기와서까지 일관련된거 했었다. 어제 스터디에는 리액트 개발자가 3분이나 참석해서 내가 짠 코드를 리뷰 받을 수 있는 기회가 생겼다. 리액트 써서 만들어본 회원가입 유효성 코드를 보여주고 왜 이렇게 짯는지 얘기 했더니 각양각색의 대답이 나왔다. 심지어 리액트를 한번도 해본적 없는 방장님(전에 자바스크립트 개발자였음)도 이야기를 듣더니 기발한 발상도 이야기해주셨다.(awsome!) 끝나고 갑작스레 송년회겸 고기 먹자는 얘기가 나와서 고기만 후딱 먹고 헤어졌다. 집에 오면서 곱씹어보니 코드리뷰는 정말 중요한 것 같다. 고맙습니다 여러분들! p.s 대부분 얼굴 안나왔긴하지만,.. 캔버스와 비디오 캔버스 drawImage()에 넣을수 있는 인자들 이미지 비디오 캔버스 비디오 태그 비디오 태그 속성 autoplay: 자동재생 muted: 음소거 loop: 자동반복 전용 이벤트리스너 'canplaythroug' : 재생할 수 있을때 실행 크롬은 소리 있는 영상은 자동재생을 못하게 되어있음 Video 이 브라우저는 캔버스를 지원하지 않습니다. 비디오 객체와 폰트 글씨를 렌더링 하는 메서드: fillText(글씨, x, y) 비디오 Dom객체의 currentTime 속성 : 현재 재생 시간 const canvas = document.querySelector('.canvas'); const ctx = canvas.getContext('2d'); ctx.font =.. JavaScript - 정규표현식 JavaScript - 정규표현식 (2/7) : 패턴 만들기 정규표현식 객체 생성자 = 패턴 만들기 / 와 /사이에 찾을 패턴을 넣는다. new RegExp('패턴') 으로 만든다. JavaScript - 정규표현식 (3/7) : RegExp 객체의 정규 표현식 RegExp.exec() 패턴에 맞는 문자열이 0번째에 담긴 담긴 배열을 반환한다. [찾은문자열, index: 인덱스, input: 입력한문자열, groups: undefined]; 매칭되는 문자열이 없으면 null을 반환한다. var pattern = /a/; console.log(pattern.exec('abcde')); // ["a", index: 0, input: "abcde", groups: undefined.. 정규표현식 ?= 정규표현식의 패턴들 정규표현식의 패턴들 25~26) Assertions ?=pattern : ?=문자 검색할때는 뒤의 문자가 필요하지만 선택할때는 뒤의 문자를 빼고 선택한다. source : AAAX-aaax-111 \w+(?=X) 문자(특문제외)가 오고 1개이상이며 맨끝에 X가 오지만 X는 제외한다 first match : AAAX-aaax-111 all matches : AAAX-aaax-111 \w+ 문자(특문제외)가 오고 1개이상이다 first match : AAAX-aaax-111 all matches : AAAX-aaax-111 \w+(?=\w) 문자(특문제외)가 오고 1개이상이며 맨끝에 어떤 문자가 오던 상관없지만 그 문자는 제외한다 first match : AAAX-aaax-111 all .. 캔버스 #01 애니메이션 중지, 이미지 캔버스 애니메이션 멈추기 return 이용, 내부에서 실행할때 cancelAnimationFrame 이용, 외부에서 실행할때 clearInterval, setInterval로 구현시 function draw() { count++; if(count%30 === 0){ // 기존 원 지우기 : 빼먹으면 잔상 다 그려짐 context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); // 새로 원 그리기 context.arc(xPos, 150, 5, 0, Math.PI*2, false); context.fill(); xPos += 5; } // $1. 애니메이션 멈추는 방법 -> return 이용, 내부에서 실행할때 if(xPos >= ca.. 이전 1 ··· 16 17 18 19 20 21 다음 목록 더보기
