#frontend

S3 presigned URL 로 redirect 되는 구조에서는 canvas 로 동영상 프레임을 캡처할 수 없습니다. video 의 src 끝에 #t=0.1 을 붙여 첫 프레임을 그대로 보여 주는 방법입니다.

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

업로드가 77% 에서 멈춘다는 제보의 원인은 타이머로 만든 가짜 진행률이었습니다. fetch 가 업로드 진행 이벤트를 주지 않는 이유와 XHR 로 실제 진행률을 그리는 방법입니다.

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

content-visibility:auto 로 접어 둔 긴 글을 innerText 로 읽으면 화면 밖 부분이 렌더되지 않아 빈 문자열이 복사됩니다. display:none 은 전문을 돌려주니, 데이터 그대로가 필요하면 textContent 를 씁니다.

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

드래그로 드롭한 폴더는 size 0인 File로 섞여 들어와 파일과 구분되지 않는데, drop 핸들러 안에서 동기로 webkitGetAsEntry()를 호출해야 폴더를 가려낼 수 있습니다.

사파리에서 클립보드 복사가 실패하는 이유는 비동기 네트워크 요청으로 인해 사용자 제스처가 만료되기 때문이며 이를 해결하려면 복사 로직을 요청보다 앞서 실행하거나 Promise를 활용해 쓰기를 예약해야 합니다

background-clip을 content-box로 설정하면 padding 두께만큼 border-radius가 깎여 의도치 않게 각진 모양이 되는데, 이를 해결하려면 슬래시 문법을 사용해 가로와 세로 반경을 개별적으로 보정해야 합니다

touch-action 은 pointerdown 시점에 이미 확정돼 늦게 바꾸면 소용없고, 롱프레스 시작 순간 touchmove 를 passive: false 로 preventDefault 해야 스크롤이 드래그를 취소하지 않습니다.

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

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

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

LCP 는 TTFB 와 렌더 블로킹 해소·이미지 preload 로, CLS 는 이미지·광고 슬롯 공간을 미리 예약해서, INP 는 긴 JS 작업을 쪼개 메인 스레드에 양보해서 개선하며, 랩 점수가 아니라 필드 데이터 75퍼센타일로 검증해야 합니다.