#react

모달에 닫기 확인 가드를 넣었더니 타이핑할 때마다 포커스가 첫 입력칸으로 튀었습니다. effect deps 에 인라인 콜백이 들어 있던 포커스 트랩 훅을 ref 로 고친 과정입니다.

요청을 섹션별로 나눴는데도 합산 로딩 플래그 때문에 화면은 50초 뒤에야 바뀌었습니다. 섹션 단위 pending 판정과 TanStack Query v5 의 pending 함정을 정리했습니다.

자동완성 닫힘 상태를 검색어 값으로 기억하면 지웠다 같은 값을 다시 입력했을 때(IME 수정 동작) 패널이 영영 안 열립니다. 값 대신 편집 횟수 카운터로 바꿔야 합니다.

툴팁 같은 래퍼 컴포넌트가 부모의 flex 계산에 개입해 레이아웃을 깨뜨리는 문제를 해결하기 위해 래퍼의 flex 속성을 옵션으로 분리하고 레이아웃 설계 시 호출부의 영향력을 고려하는 방법을 제안합니다

렌더 라이브러리가 실패 시 document.body에 만든 임시 div를 정리 직전에 throw해, catch로 예외를 삼켜도 화면에 잔재가 누적됩니다. 컨테이너를 직접 만들어 finally에서 제거해야 합니다.

disabled 버튼은 포인터 이벤트를 차단해 툴팁 표시를 방해하므로 CSS의 pointer-events: none을 활용해 이벤트를 부모 요소로 전달하는 해결법과 함께 키보드 사용자를 위한 접근성 보완책을 제시합니다

iOS Safari 는 키보드가 떠도 레이아웃 뷰포트를 줄이지 않아 모달이 키보드 뒤에 가려지는데, visualViewport 로 가린 높이를 구해 padding-bottom 에 더하면 정렬을 안 바꾸고도 해결됩니다.

Next.js App Router 캐싱은 4계층으로 나뉘며, cookies()·headers()·no-store 하나만 써도 라우트가 동적이 되어 Full Route Cache 가 꺼집니다.