[ React ] SelectBox 컴포넌트 키보드 이벤트 추가 | onKeyDown키보드 이벤트 타입은 총 3가지가 있다. [ 모던 자바스크립트 ] 40. 이벤트1) 이벤트 드리븐 프로그래밍이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라zodev.tistory.com 해당 컴포넌트에 이어서 작업한 내용(필요해서 찾고 있었는데 정리를 안 해놨더군요) 요구사항스크롤이 있는 옵션 리스트에서 키보드 이벤트를 통해 focus된 옵션을 이동 중일 때, 스크롤 아래쪽의 옵션이 focus되면 스크롤을 자동적으로 이동시키고 싶다. 구현1. OptionListBox에 ref를 걸어준다. 2. focusedIndex가 변화할 때 scrollIntoView를 통해 스크롤을 ..
전체 글
바쁘게 굴러가는 ZoD의 하루~Vue3에서는 v-slot을 통해 간편하게 slot을 사용할 수 있었다. 그렇다면 React에서는 어떻게 slot을 구현할까? 사용처(?)공통 컴포넌트 중 Modal을 만들다가, Head와 Footer는 공통적이면서도 Content 영역만 가변적으로 사용되게 하고 싶었다. 방법) – React" data-og-description="The library for web and native user interfaces" data-og-host="react-ko.dev" data-og-source-url="https://react-ko.dev/reference/react-dom/components/common" data-og-url="https://react-ko.dev/reference/react-dom..
tailwind에서 제공하는 단축어 사용 Handling Hover, Focus, and Other States - Tailwind CSSUsing utilities to style elements on hover, focus, and more.tailwindcss.com 그러나 내가 쓰려는 건 없다... tailwind + CSS 직접 작성/* 토요일 */#calendar-body span:nth-child(7n - 1) { @apply text-primary-500;}/* 일요일 */#calendar-body span:nth-child(7n) { @apply text-red-500;} 기본 CSS 적용하는 방법 + @apply 디렉티브