마우스 이벤트

요소 내부의 고정된 지점과 마우스 클릭 지점 사이의 거리를 계산해야 하는 경우가 종종 있다. 예를 들어 사용자 경험(UX) 개선을 위해 버튼 클릭 감지 영역을 실제보다 더 넓게 설정할 때(클릭하기 쉽도록 하기 위해) 이런 계산이 필요하다. 이때 두 지점 간의 거리는 피타고라스 정리를 이용해서 구할 수 있다. 피타고라스 정리는 직각삼각형에서 빗변(가장 긴 변)의 제곱은 다른 두 변의 제곱의 합과 같다는 원리다.$$c^2 = a^2 + b^2$$ 빗변 $c$의 길이를 구하기 위해 양변에 제곱근(루트; square root)을 적용하여 다음과 같이 표현할 수도 있다.$$c = \sqrt{a^2+b^2}$$ 한편, 피타고라스의 원리를 적용하기 위해 좌표평면(서로 수직으로 교차하는 두 직선으로 이루어진 평면)에..

검색창 자동 완성 기능은 , 태그를 이용해 빠르게 구현할 수 있다(참고 포스팅). 키보드 방향키로 옵션을 선택할 수도 있다. 하지만 이 방법은 리스트 요소에 클릭 이벤트를 할당할 수 없는 단점이 있다(검색을 정말 많이 해봤지만 결론은 불가). 검색창에 키워드를 입력한 후 목록에 있는 각 옵션()을 클릭할 때마다 특정 액션을 취해야 한다면 위 방법을 사용할 수 없다. 대안은 React Select 처럼 잘 만든 라이브러리를 사용하거나, 몇 년간 유지 보수한 라이브러리보단 완성도는 조금 떨어질 수 있지만 직접 구현할 수 있다. 아래는 직접 구현한 내용을 기록한 내용. 구현 목표마우스로 리스트 이동 / 선택Enter 키로 선택방향키로 리스트 이동 (Keyboard navigate)스크롤이 생긴 목록에서 방향..