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

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..

useEffect는 개인적으로 React에서 useState 급으로 핵심 요소라고 생각한다. useEffect는리액트 16 버전부터 도입된 Hook 중 하나로 컴포넌트가 렌더링된 이후에 실행될 작업들을 정의할 수 있도록 해준다.useEffect 역할과 사용 방법 🚩useEffect 뜻| useuse는 리액트의 hook 앞에 모두 들어간다. 그렇기 때문에 use로 시작하는 함수가 리액트 훅이라는 것을 의미하기도 한다. | EffectuseEffect는 왜 이름에 effect가 들어갈까? 프로그래밍에서 effect는 보통 사이드 이펙트를 의미한다. 이펙트는 효과라는 뜻이니까 사이드 이펙트는  주 목적이 아닌 효과 즉, 부수효과를 의미한다.  부수 효과는 함수의 주요 목적 외에 발생하는 모든 변화나 상호작용..

평소에는 상태관리를 할 때 깊게 들어갈 생각보다는 그냥 이용만 했던 것 같다. Redux나 Recoil, Zustand 같은 상태 관리 라이브러리는 많지만, 단순히 라이브러리를 이용만 하는 것보다는 패턴에 대해서 이해하고 활용하는 것은 큰 차이가 있을 것 같다고 생각해서 이번 글을 작성해보려고 한다.Flux 패턴에 대해서 📚Flux 패턴은 어떻게 등장했나?Flux 패턴은 지금은 Meta로 사명을 바꾼 페이스북에서 싱글 페이지 웹 애플리케이션을 구축할 때 사용하기 위해서 만들었다. 이 패턴을 이해하기 위해서 먼저 양방향 데이터 흐름과 단방향 데이터 흐름에 대해서 알고 가야한다.양방향 데이터 흐름 🔄일반적으로 MVC(Model-View-Controller) 구조가 양방향 데이터 흐름을 가진다. MVC는 ..

최근에 드래그 앤 드롭 기능을 만들어보면서 느낀 점은 정말 재미있는 기능이라는 점인 것 같다! 이번에는 간단한 드래그앤드롭,DND 예제를 만들어보고, 그 후에 어떤 최적화를 할 수 있을까에 대해서 고민해보려고 한다. 드래그 앤 드롭 기능 예제와 성능 최적화 🚀일단 dnd 예제를 만들어야하는데, 초기에 필요한 세팅은 클로드의 도움을 받아서 작성했다. 프롬프트를 작성한 예시는 아래와 같다.간단한 드래그앤드롭을 만들기 위한 초기 html과 css만 만들어줘, 기능 구현은 하지 않고 만들어줘이렇게 해서 만들어진 예시 화면이다. 디자인은 대충 디스코드 느낌 나게 만들어봤다. 색깔만간단하게 설명하면 왼쪽에 있는 draggable한 아이템들을 드래그앤드랍으로 오른쪽의 dropzone으로 끌어다 놓으면 아이템을 움직..