밝을희 클태

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

요즘 회사에서 프로젝트를 진행할 때 주로 Remix 풀스택 프레임워크를 사용하고 있다.그런데 사용하면서 불편한 점이 하나 있다.바로 서버 사이드 액션을 호출할 때 반드시 action 함수를 사용해야 한다는 점이다.물론 Remix의 구조는 장점도 많지만,개인적으로는 그 장점을 상쇄할 만큼 불편한 부분도 있다.예를 들어, 복잡한 코드 흐름 속에서 useFetcher()를 사용한 뒤,그 상태 값을 useEffect 내부에서 다시 검증해야 한다는 점이 매우 번거로웠다.간단한 프로젝트라면 상관없지만,파일 하나에 코드가 길어질수록 A 함수에서 서버에 요청을 보내고,응답을 B 영역(useEffect 등)에서 따로 처리해야 하는 구조는코드의 흐름이 끊겨 보여서 읽고 쓰기 모두 어려웠다. 그러다가 문득 생각했다.acti..

위 이미지처럼 많은 요소를 보여주는 리스트가 있다.여기에 몇 가지 문제가 있는데,트리거를 통해 해당 화면을 띄울 때, 즉각적으로 뜨지 못하고 약 1초 정도의 딜레이가 발생끌 때도 동일한 문제가 발생각 요소를 체크할 때 약 0.5초의 딜레이가 발생이 모든 문제의 원인은 현재 DOM Tree에 너무 많은 요소가 존재해서,렌더링 성능에 치명적인 영향을 주고 있기 때문이다.INP 측정 결과 (환경: CPU 스로틀링 ×4)결과는 처참했다. 기간7.72 초입력 지연65 ms처리 기간7,278 ms표시 지연380 ms✅ INP란?INP (Interaction to Next Paint)→ 사용자가 클릭, 탭, 키보드 입력 등 "상호작용"을 했을 때,화면에 실제 반영될 때까지 걸린 시간을 측정하는 지표또한 각 요소의 체..

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