카메라 인디케이터 라이트 항상 표시되는 오류WebRTC 화상회의 기반 프로젝트를 하면서 화상회의를 구현했다. 해당 화상회의에서 유저는 카메라를 끄거나 켤 수 있도록 구현했다. 카메라를 꺼도 화면은 의도대로 피어들에게 송출되지 않고 검은 화면으로 나오는 것을 확인했다. 하지만 카메라를 사용하고 있다는 의미의 카메라 인디케이터가 항상 켜져있는 것을 발견했다. 카메라 인디케이터는 아래 사진처럼 비디오를 사용 중이라는 것을 직관적으로 볼 수 있게 해준다. 맥OS는 이처럼 화면 상단 툴바에 위치하고, 윈도우의 경우에는 브라우저 탭에 표시가 된다.🚩 문제 상황카메라를 끄는 버튼은 이미 구현이 되어있다. 해당 버튼을 누르면 videoTrack의 enabled 속성을 false / true로 토글하여 비디오를 끄고 ..

이 에러는 SQL쿼리를 날리는 도중 쿼리의 문법이 잘못되었다는 오류이다. 시퀄라이즈를 쓰고 있었기 때문에 어떤 부분에서 에러가 나는지를 찾아야했는데 Sequelize에서 You have an error in your SQL syntax 에러 해결 방법문제 상황아래는 문제가 발생한 코드이다. 유저 모델을 정의하는 코드인데, 여기서 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'true' at line 1 이런 오류가 발생하면서 유저 테이블이 생기지 않는 문제이다.'use strict';const { Model} ..

WebSocket 연결 에러 처리에 대해서상황webrtc를 위한 웹 소켓 연결을 수립할 때 만약 시그널링 서버가 존재하지 않거나 특정한 이유로 인해 웹소켓 서버와의 연결이 실패하는 문제가 발생할 수 있다.사용자 혹은 개발자에게 애플리케이션이 작동하지 않는 이유를 빠르게 알리기 위해서라도 웹 소켓 연결 실패에 대한 처리를 해줘야겠다고 판단했다.오류를 잡는 대표적인 try-catch 구문개발에서 대표적으로 오류를 캐치하는 구문인 try-catch 구문을 사용해서 socket 연결 오류를 잡아보려고 했다. 코드useEffect(() => { try { // 소켓 연결 const newSocket = io( import.meta.env.VITE_SIGNALING_SERVER_URL || "" ); ..

react-icons 라이브러리과 트리 쉐이킹트리 쉐이킹 (Tree Shaking)트리 쉐이킹, 용어 자체의 사전적 의미는 "나무를 흔들다." 라는 뜻이다. 자바스크립트에서는 번들러가 사용하지 않는 코드를 제거하는 과정을 의미한다. 개발 후 최종 번들링을 하는 과정에서 사용하지 않는 모듈을 제거하는 것을 나무를 흔들어 잎을 떨어뜨리는 것에 빗대어 생긴 용어이다.Javascript에서 중요한 이유트리 쉐이킹은 자바스크립트에서 중요한 개념이다. 모듈과 번들링 과정에서 사용되기 때문이다.모듈은 하나의 독립적인 기능을 가진 코드 블록을 의미한다. 번들링은 여러 모듈들을 빌드 과정에서 하나의 파일로 합치는 과정이다. (이 경우 로딩 시간과 성능을 최적화할 수 있다.)번들링 과정에서 사용되는 것이 트리 쉐이킹이다...

처음 HTML, CSS, JS를 공부하고 리액트를 처음 배우기 시작할 때에 이벤트 핸들러를 JSX 태그에 onClick={} 형식으로 인라인으로 달아주길래 각 태그에 이벤트 핸들러를 부착하는 줄 알고 있었다. 하지만 최근에 리액트에 대해서 더 공부를 해보면서 리액트는 이벤트를 위임 방식으로 효율적으로 처리한다는 것을 알게 되었다. 이번에는 리액트에서 이벤트를 어떻게 효율적으로 처리하는지를 알아보려고 한다.React에서 이벤트를 처리하는 방법Event이벤트는 마우스를 클릭하거나 키보드를 누르는 것처럼 사용자의 액션에 의해 발생하거나, 비동기적 작업의 진행을 나타내는 등의 목적을 위해 API 들이 생성할 수도 있다. 한글로는 사건이라고 할 수 있다. 클릭 이벤트를 발생시키려면 어떤 요소를 클릭하거나, Ele..