🎆 오늘 한 것
- 수업 들은 거 정리하고 복습
- 테일윈드 스터디
- 리덕스 강의 1개...
- 알고리즘 강의 1개...
🙄 오늘 하려고 했는데 못한 것
- 리덕스(FE/BE 코드까지)
- 알고리즘(해결 또는 단순화)
✨ device-dependent event handler
The onclick event handler (and click event) is triggered when the mouse is pressed and released when over a page element or when the Enter key is pressed while a keyboard-navigable element has focus. In these cases, onclick is a device independent event handler.
온클릭은 마우스를 눌렀다 놓거나 키보드가 가능한 요소에(탭 같은 거) 포커스가 있는 동안 Enter 키를 눌렀을 때 트리거됨. onclick은 장치 의존성 이벤트 핸들러임
📌 참고할 링크
Accessible JavaScript : JavaScript Event Handlers
Avoid the sole use of device-dependent event handlers
위의 두 링크를 간단하게 요약하면,
onClick과 같은 이벤트 핸들러는 장치 독립적인 이벤트. 마우스나 키보드 탭 포커스 상태일 때 트리거가 된다. 근데 div와 같은 비제어 요소는 tabindex를 사용해도 제대로 트리거 안됨. 이런 마우스나 키보드 사용에 의존적인 이벤트들은 그 기기를 사용하지 않는 사용자층은 그 이벤트들을 제대로 사용할 수 없다는 말임. 그렇기 때문에, 이벤트를 트리거 하는 유일한 수단을 온클릭과 같은 장치 의존적인 이벤트로 처리해버리는 건 권장하지 않음!!!
<a href="http://www.yahoo.com" onmouseover="window.status='Go to the
yahoo homepage':return true">
Click here
</a>이 코드는 onmouseover에만 의존하는 이벤트이기 때문에 접근성 문제가 생길 가능성이 있음
<a href="http://www.yahoo.com" onMouseOver="window.status='Go to the
yahoo homepage':return true" onFocus="window.status='Go to the yahoo
homepage':return true">
Yahoo Home Page
</a> 이렇게 마우스를 사용하지 못하는 사용자를 위한 방식으로 처리하는 게 좋음
| Event Handler | Alternative |
|---|---|
| OnClick | OnKeyPress |
| OnMouseDown | OnKeyDown |
| OnMouseUp | OnKeyUp |
| OnMouseOver | OnFocus |
| OnMouseOut | OnBlur |
| OnDblClick | OnKeyDown |
대안?이라기보다는 마우스/키보드 이벤트 핸들러를 같이 사용해주거나 조건을 달아서 관리해주는 게 좋은듯하다!
또, 키보드 이벤트 핸들러가 사용된 요소가 키보드 포커스를 가질 수 있는지도 확인해야 된다. 만약 아니라면 인식을 못하기 때문에 tabindex를 1 이상으로 설정해주자!
✨ appearance: none
네이티브(OS/브라우저 자체 테마) 요소 디자인 해제/변경해줄 때 쓰는거.
크로스브라우징에 유용하게 쓰인다. 특히 모바일계의 익스플로러라고 불리는 사파리 녀석... 예의주시해야 됨
예제로 보자
input[type="search"] {
-webkit-appearance: none;
appearance: none;
}
appearance: none 이 없으면 크롬에서 이렇게 보이는 요 인풋이
사파리에선 무려 이렇게 보인다; 뭔데?
이런 것을 방지하기 위해서 사용하는 게 appearance 속성임!
🎆 내일 할 것
- 테일윈드 스터디
- 리덕스 고급 파트 끝낼 것, 리덕스 복습
- 문제 접근법까지
- 야무님 플렉스 강의
📌 킵해놓을 todo
- preload / modulepreload / prefetch 공부... 언제하지?
- deep dive 19장 프로토 타입
📚 이번 주 개인 목표
- 프로토타입
- 클로저 ✅
- 타입스크립트 책 보기
- 고급 리덕스 파트 강의 보기
- 알고리즘 문제 해결 접근법 파트 강의 보기(여유있으면 해결 패턴까지)
- 야무님 강의 플렉스/그리드, 반응형 파트
📝 오늘의 일기
일주일이 뭐가 이렇게 빨리 지나가는지 모르겠다... 이상하네 어제 일요일이었던 것 같은데...? 내일이 토요일이라고...?
조졌다리ㅠㅠ 오늘 목표로 한 거 너무 못한 거 아냐? 토일요일을 불태운다 빠샤,,,
