키보드 컨트롤
- 팀 과제에서 키보드 컨트롤을 맡게 되었다.
처음 진행사항
- useRef로 포커싱 될 대상 찾기 => 인풋 / 다른 태그들은 눈에 보여지는게 없거나 ref로 사용하기 애매한것들이라서 input태그에서만 이벤트가 나올 수 있도록 정함
- useState로 index를 만들고 0으로 해둔다. => map 함수에서 생성되는 index와 대조하기 위해
- 아래 화살표를 누르면 index의 현재값에 1씩 더해준다 -> event.code === ‘ArrowDown’
- 위 화살표 키를 누르면 index의 현재값에 1씩 빼준다-> event.code === ‘ArrowUp’
// event.keyCode는 사용이 권장되지 않는다. event.key 혹은 event.code로 사용하는것을 권장한다.
5.DUMMY_DATA.map을 통해 생성된 index와 useState로 만들어둔 index를 대조해 둘이 일치할 경우 active 클래스를 부여한다=> active 함수가 부여 된 경우 백그라운드에 컬러로 active 표시가 됨
6. 마지막 list item에서 아래 화살표를 누르면 index를 다시 0으로 만들어 제일 위 item으로 올라갈 수 있도록 한다.
7. 처음 list item에서 위 화살표를 누르면 index를 item.length -1을 뺀 만큼으로 만들어 맨 아래 아이템으로 갈 수 있도록 한다.
그럼 잘된다!
에러잡기
-
부끄럽지만 나는 에러가 있을거라고 생각을 못했는데, 팀원분이 에러가 있는걸 확인해 주셨다.
-
한글로 입력한 다음 엔터 혹은 인풋창을 클릭하지 않고 아래 화살표를 내리면 인덱스가 두번 내려간다는 오류였다.
-
인지한 이후 고쳐보려고 했으나,,, 실패했음,,, 🥲 팀원분이 해결책을 제시해 주셨다.
-
오류가 나는 이유는 크롬 브라우저에서 한글을 입력할 때, 입력 방식 편집기(IME)가 composing 단계를 거치는데 이 상황에서 keyEvent를 처리하면 composing이 완료되지 않았다고 간주해 229 코드가 나타난다고 한다.
참고하기1
참고하기2
해결
- 해결 방법은 간단하다.
if (!DUMMY_DATA || event.nativeEvent.isComposing) return
를 추가해주자
nativeEvent에 대해서
최종 코드->
느낀점
- 영어 검색도 해보자 한글로 주구장창 파지 말고
- 만든거에 대한 오류가 없는지 확인은 제대로 하자
- 팀원분들 정말 대단헌 사람들,,, 다들 천사들이야 😇
안녕하세요!