WIL 0627 ~ 0703 8주차 회고

가장 헤맸던 부분 "form 양식"

이번 주차를 진행하면서 가장 오래 걸렸고 가장 헤멧 던 부분은 form 양식을 작성하는 부분이 있었다.

1. onKeyDown 2번 실행되는 문제
2. 자동 스크롤이 되지 않는 문제
3. enter를 눌렀을 때 submit이 되는 문제

내가 구현 하려고 목표했던 기능은 검색창을 입력하면 그 검색과 일치하는 항목 리스트가 보이며, 방향키로 선택을 하여 해당 검색어를 입력하는 과정이었다.

1. onKeyDown 2번 실행되는 문제

한글로 "삼성"이라는 키워드를 입력하고 downArrow를 입력하면 처음에 onKeyDown함수가 2번 실행이 됐다.
처음에는 왜 두 번만 실행되는지 원인을 찾기 위해 여러 테스트를 해봤는데, 영문, 숫자 는 한 번만 실행되고, 한글만 두 번 실행된다는 사실을 알게 됐고, 구글링을 통해 한글은 조합 문자이기 때문에, onKeyDown 함수가 두 번 실행된다는 것을 찾았다.

해결 방법

1. onKeyDown대신 onKeyPress 이벤트를 사용
   완벽한 해결방법은 아니지만 (나한테 맞는) onKeyPress는 조합 문자와 상관없이 한 번만 실행됐다. 다만 내가 필요한 방향키를 인식하지 않아 사용하지는 못했고 더 알아본 결과 enter, shift 등 인식하지 않는 key가 많은 것을 알았다.

2. e.nativeEvent.isComposing 조건을 이용
   e.nativeEvent.isComposing는 조합문자일 때는 true, 아닐 경우 false를 반환한다.
   그리고 콘솔로 확인하며 테스트를 해본 결과 조합문자 작성 후 화살표를 누를 경우 true, false 두 번 반환되는 것을 확인했고 이 과정에서 조합 문자를 탈출? 해제? 하면서 한 번 실행 후 완벽해진 문자에서 또 한 번 실행된다고 추측을 하였고, e.nativeEvent.isComposing가 false를 반환할 때만 함수를 실행하도록 조건을 추가하여 조합 문자도 한 번만 실행하도록 변경했다.

2. 자동 스크롤이 되지 않는 문제

하단에 나타내는 검색어를 확실하게 정한 것은 아니지만, 기획 단에서 상위 10개 항목만 표시되게 하고, 처음 화면에는 5개 이후 스크롤로 이동 할 수 있게 만들었다.

여기서 화살표를 이동해도 인덱스 값으로 비교하기 때문에 스크롤이 되지 않았다.
그래서 useState로 현재 인덱스 값을 state관리 했고, .scrollIntoView(<옵션>)를 사용해 특정 index 값을 지나가면 다음 인덱스 번호를 갖는 li태그를 start로 스크롤하여 자동 스크롤이 넘어가도록 설정했다.

3. enter를 눌르면 자동 submit 되는 상태

화살표로 해당 목록을 체크하고 enter를 누르면 input 값이 변경되어야 하는데 submit이 실행돼서 (form으로 묶었기 때문에) 종목을 체크하라는 alert가 실행했다.
단순히 keydown에서 enter를 눌렀을 때 submit을 막는 조건을 사용하여 해결했고, 이 상황을 보다 보니 input이 여러 개일 경우 enter로 submit을 보내는 것이 사용자 경험을 더 나쁘게 만들 수 있다는 생각이 들었고 이 부분에 있어서는 고민 중에 있다.

이번 주를 돌아보며

드디어 실전프로젝트가 시작됐다. 마지막 한걸음이자 이제 시작인 마음을 다잡고 진행하려고 노력하고 있으며, 많은 기능과 다양한 걸 경험하고 싶었지만, 너무 욕심을 따라가다 프로젝트를 망칠 수 있다는 두려움에 적당한 선에서 타협을 봤다.
아직 많은 부분이 진행되진 않았지만, 빠르게 그리고 착실히 프로젝트에 임하고 싶다.

다음 주 목표 !

나만의 목표이긴 하지만, 다음 단계로 넘어가는 것이다! 아직 초기 기획에서 버벅되고 있지만, API만 완성된다면 빠르게 진행될 수 있을 것 같다. 완성된 view는 바로바로 찍어내면서 빠르게 기능 구현 그리고 시간이 남는다면 미리미리 에러 핸들러 및 디테일 한 부분을 잡아보자.