#frontend

자동완성 패널의 닫힘 상태를 검색어 값으로 관리하면 IME 입력 시 같은 단어 재입력 등 예외 상황에서 오작동이 발생합니다. 이를 해결하기 위해 값 대신 사용자의 편집 횟수를 추적하는 카운터 방식을 도입하고, 외부 주입과 사용자 입력을 구분하여 상태 관리의 정확성을 높이는 방법을 공유합니다

innerText는 화면에 보이는 텍스트만 읽어 숨겨진 요소에서 빈 값을 반환하므로, 데이터 그대로를 가져오려면 textContent를 사용해야 합니다

서드파티 라이브러리가 document.body에 직접 요소를 생성할 때 발생하는 렌더링 잔재 문제를 해결하는 방법과, 레이아웃 엔진을 고려한 브라우저 테스트의 중요성을 다룹니다

드래그 앤 드롭 업로드 시 폴더를 파일로 인식해 발생하는 오류를 webkitGetAsEntry API로 해결하는 방법과 사용자 경험을 개선하는 UX 전략을 공유합니다

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

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

모바일 웹에서 롱프레스 드래그 구현 시 터치 동작이 스크롤로 취소되는 원인과 해결책을 다룹니다. touch-action 속성은 제스처 시작 시점에 확정되므로, 드래그 시작 순간에 preventDefault를 호출해 스크롤을 차단하고 포인터 이벤트를 제어하는 올바른 구현 방법을 상세히 설명합니다

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

모바일 웹에서 키보드에 가려지는 모달 문제를 visualViewport API와 paddingBottom을 활용해 해결하는 방법을 소개합니다. 레이아웃 정렬 전략을 바꾸지 않고도 키보드 높이만큼 오버레이 영역을 조정하여 모달이 항상 키보드 위로 올라오게 만드는 실무적인 최적화 노하우를 확인해 보세요

Next.js App Router의 Request Memoization·Data Cache·Full Route Cache·Router Cache 4계층을 무엇을·수명·무효화 기준으로 분리해 설명하고, 동적 렌더 트리거와 함정을 정리한다.

Core Web Vitals의 LCP·CLS·INP 세 지표를 각각 원인과 개선법으로 공략하고, 랩/필드 데이터 측정과 이미지·폰트·JS 최적화 체크리스트까지 실전으로 정리한다.