#react

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

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

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

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

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

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