반응형 useCallback2 KT AIVLE School 빅프로젝트 - 텍스트 입력 Debounce 처리 사용하게된 이유 RTK의 useAppSelector, useAppDispatch를 사용하여 state를 갱신하고 가져오는 과정이 있었는데, dispatch를 할 때마다 관련된 state들이 리랜더링이 일어나면서 미리보기를 제공하는 영상과 이미지가 플리커 현상이 일어났습니다. 뿐만 아니라 tiptap 라이브러리를 사용했었는데, tiptap의 useEditor의 인자로 객체의 안에 onUpdate 키의 값으로도 입력할 때마다 리랜더링 되는 현상을 늦게 발견하게 되었습니다. 불필요한 리랜더링은 줄이는게 맞다는 판단이 들어서 사용하게 되었습니다. debounce 함수 코드 export default function debounce any, T>( func: F, delay: number ): (this: T, .. 2023. 7. 20. KT AIVLE School 빅프로젝트 - 웹캠 녹화 구현 댄서블(춤을 연습하는 사람)이 춤을 추고 다음 구간 영상으로 넘어갈 때 POST요청을 보내는데, 댄서블이 춤을 춘 모습을 담기 위해서 react-wecam의 녹화할 필요가 있었습니다. 이를 구간 연습이 끝나거나, 한 번 더 연습하거나, 다음 구간으로 넘어가거나 여러 상황에 따라서 녹화를 시작하고 끝내야 하는 로직이 생각보다 복잡했습니다. hook 사용은 옳은 방법이 아닐 수 있습니다. 녹화 로직만 참고하시길 바랍니다. 구현 과정 Navigator.mediaDevices는 읽기 전용 속성은 카메라, 마이크, 화면 공유와 같이 현재 연결된 미디어 입력 장치에 접근할 수 있는 MediaDevices 객체를 반환합니다. - mdn web docs // 녹화 시작 함수 const startRecording = u.. 2023. 7. 19. 이전 1 다음 반응형
