일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 네이버 부캠
- 스택
- React ssr
- beautifulsoup
- 비디오 스트리밍
- 자바스크립트 컴파일
- React.js
- PubSub 패턴
- c++
- 프로그래머스
- 멘션 추천 기능
- 네이버 부스트캠프 멤버십
- Image 컴포넌트
- 자바 프로젝트
- 코딩테스트
- 자바스크립트 객체
- 네이버 부스트캠프
- 웹크롤링
- Next.js
- Next/Image 캐싱
- Server Side Rendering
- react
- 씨쁠쁠
- 부스트캠프
- 파이썬 웹크롤링
- 자바스크립트
- git checkout
- 파이썬
- 브라우저 동작
- 파이썬 코딩테스트
Archives
- Today
- Total
목록canvas (1)
코린이의 개발 일지
[React] 리액트에서 Canvas API로 애니메이션 구현하기
window.addeventListener를 써보자 맨처음에 이 방법으로 keyDown이벤트를 발생시켜 보았다. 리액트스럽게 훅으로만 대부분을 해결해서 코드를 짜는게 목표였지만 onKeyDown으로 도저히 작동을 안해서 (내가 잘못쓰고 있는 것였다.) 그냥 직접 이벤트 리스너를 붙여봤다. (리액트에서 권유하는 방법은 아니니 안쓰는 편이 좋다) 근데 문제가 발생했다. 이벤트 리스너를 렌더링 할 때마다 달아주면 리스너가 너무 많이 달리니까 useEffect안에 넣어뒀는데 그것도 문제였다. 리스너는 딱 한번만 호출되어야하는데 useEffect가 여러번 호출되면서 이벤트 리스너가 너무 많이 붙여지는게 문제였다. 해결한 코드는 다음과 같다. import React, { RefObject, useRef, useEf..
웹 (web)/프론트엔드
2022. 10. 21. 14:37