밝을희 클태

문제 상황:모바일에서 FullCalendar 사용 중.터치 이벤트와 클릭 이벤트 중첩으로 인해:시간 선택 → 모달 열림동시에 click 이벤트 → 모달 닫기 버튼이 눌려 모달이 바로 닫힘.원인 분석:모바일 터치 흐름:touchstart → touchend → 딜레이 후 click 발생touchend에서 모달이 열리고, 딜레이 후 발생하는 click이 닫기 버튼을 눌러버림.해결 방법:특정 요소에 touchend → preventDefault() 적용주간/월간 캘린더에 따라 다른 요소에 이벤트를 걸어줘야 함.useEffect(() => { let calendarElements: NodeListOf | null = null; let parentElements: NodeListOf | null = n..

이미지처럼 drawer 위에 toast를 띄우는 상황이 있는데 사용자가 toast를 스와이프 해서 없애는 동작이 전혀 되지 않는 상황이 있다. 원인drawer 내부에는 overlay라는 컴포넌트가 존재한다.이 overlay는 단순히 배경을 어둡게 처리하는 역할만 하는 게 아니라,drawer 외부의 모든 사용자 상호작용을 차단하는 역할을 한다.그렇다면 왜 overlay는 drawer 외부의 동작까지 막고 있을까? 이는 drawer가 Radix UI의 Dialog 컴포넌트를 기반으로 만들어졌기 때문이다.Radix의 Dialog는 모달 UI의 접근성과 정확한 동작을 보장하기 위해, 다음과 같은 기능들을 제공한다:배경 어둡게 처리 (dimmed background)포커스 트랩 (Focus Trap)외부 클릭 시..

문제 : 웹소켓 연결이 끊겨 버리고 서버가 터져버림 사실 수집 : 게임을 하다가 뒤로 가기 동작을 하면 가끔씩 웹소켓 연결이 끊기고 서버가 터져버리는 현상이 발생 서버 로그를 확인해보니 같은 에러 로그가 반복적으로 발생 게임 페이지에서 뒤로가기를 통해 다른 페이지로 이동한 후 방향키를 누르면, 이전에 등록된 이벤트 리스너가 계속 실행되는 현상이 발생 원인 추론 : VanillaJS로 SPA 방식의 게임을 구현했는데, SPA는 페이지가 새로고침되지 않기 때문에, 기존에 등록된 이벤트가 따로 제거되지 않으면 그대로 남아있게 된다. 방향키로 탁구채를 움직이는 동작을 할 때, 이 이벤트 리스너가 실행되면서 서버로 현재 탁구채의 좌표(int 형)를 웹소켓을 통해 보내는데, 여기서 뒤로 가기 동작을 할 경우 게임 ..

환경 : 바닐라JS SPA 방식 문제 : 안 읽은 메세지 카운터 기능을 구현중에 메세지를 읽지 않았는데 안 읽은 메시지 갯수가 뜨지 않음 사실 수집: A 채팅방에 들어갔다가 다른 컴포넌트로 이동해서 A가 메세지를 보내면 안 읽은 메세지 갯수가 떠야하는데 뜨지 않음을 확인 원인 추론: 1 :1 채팅방에 들어갈때 WebSocket send를 날리고 다른 컴포넌트로 이동을 할때 Webscoket 에 나갔다고 다시 send를 날려야하는데 하지 않아서 이런 버그가 난걸로 예상 조치 방안 및 구현: document.querySelectorAll('a[data-spa]').forEach(link => { link.addEventListener('click', () => { this.leaveWebSocket(); }..

문제 : 전체채팅 페이지에서 한 유저를 골라서 1 : 1 채팅으로 넘어가서 새로고침시 대화방의 내용이 다시 렌더링이 안된다. 다른 페이지에서 웹소켓을 연결을 하고 채팅방 페이지로 오면 문제가 없지만 채팅방 페이지에서 새로고침해서 최초로 웹소켓 연결시 문제가 발생 사실 수집: 문제 재현 과정에서 WebSocket 연결 후 메시지 송수신 과정에서 비동기 처리의 순서 문제를 확인. 새로고침 시 웹소켓 재연결 과정에서 이전 채팅 내용을 fetch하기 전에 웹소켓으로 메시지를 보내려 하였으나, 웹소켓 연결이 완료되지 않은 상태였음. 원인 추론: await checkConnectionSocket(this.socketEventHendler.bind(this)); const $chatRoom = document.que..