본문 바로가기

분류 전체보기

 (166)
[총정리] 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..
캔버스 #01 그리기와 애니메이션 원리 캔버스 사이즈 설정 캔버스 태그의 크기는 css가 아닌 속성으로 넣어줘야 정확하다. 레티나 디스플레이에서 또렷하게 보이게 하기 위해 속성으로 크기 2배로 설정하고 CSS로 절반으로 줄여서 만드는 방법이 가능하다. ex) 풀사이즈라면 윈도우 사이즈를 구해서 2배로 하고 CSS로 100%를 준다. 색 fillStyle = 'color' 그릴 도형에 칠할 색을 선택 색상명 규칙은 CSS와 동일(name, rgba, #16진수) 도형을 그리기전에 먼저 붓에 물감은 바른다는 개념으로 이해 할 것 fillRect(x, y, width, height) 색칠한 도형을 그린다. 이전에 색을 고르지 않았다면 기본색은 black clearRect(x, y, width, height) 색칠한 도형에 색을 지움 strokeRe..
[비동기 처리] generator의 활용 -> function* generator 함수 실행 중지와 실행 재개가 컨트롤이 가능한 함수 function으로 구현하며 함수명 앞에 *이 붙는다. return이 아닌 yield로 값을 반환한다.(중단점 + 값 반환 역할) next()를 호출하면 yield 앞까지의 값이 반환된다. next()의 반환값은 {value: 반환값, done: 제너레이터 함수 끝까지 실행여부} function * counter() { yield 1 yield 2 yield 3 } const g = counter(); console.log(g.next()); // {value: 1, done: false} console.log(g.next()); // {value: 2, done: false} console.log(g.next()); // {value..

티스토리툴바