에러 수정 삽질 기록 (2)

지난 글(https://i-ten.tistory.com/185)에 이어서 두 번째 에러 해결 과정을 기록한다.

역시나 더 좋고 깔끔한 코드와 해결방법이 있을 것이라고 생각한다!

1. 🔥 아무거나 입력했을 때 무한 로딩 + 최적화

테스트 환경은 아이패드 에어4

말 그대로 아무렇게나 막 쳐서 검색했을 때 무한 로딩이 걸리는 현상.

값의 유효성을 확인하지 않고 그냥 넘겨버렸기 때문에 나타난 버그다.

버그를 수정하면서 사용자를 위해 검색 결과가 없다는 것을 안내하는 텍스트도 같이 추가하기로 했다.

아래는 필터링된 검색 결과를 보여주는 함수 코드의 일부인데,

검색 결과 배열에 아무것도 없을 때 에러 메시지를 보여주는 코드를 추가했다.

물론 활성화된걸 없애주는 코드도 아래 어딘가에 있음.

코드를 좀 추가했다

그리고 검색결과를 넘기는 함수에서는 try-catch문으로

해수욕장 번호가 존재하지 않을 때는 에러를 발생시켜서 submit이 이루어지지 않도록 수정했다.

에러 발생!!!

그럼 이제 올바르지 않은 입력에 대해서는 요렇게 메시지가 등장한다.

이대로 마무리 할까 싶다가- 막상 에러 메시지를 띄우다 보니

이벤트 리스너를 keyup 조건으로 걸어놓은 탓에 너무 자주 등장해버리게 됐다..

또 그냥 넘어갈 수는 없지... 디바운드를 적용해서 퍼포먼스를 향상해 보기로!

((디바운드와 쓰로틀에 대한 정리 한 번쯤 하지 않았나 싶은데 노션에만 있고 블로그엔 안 썼음..))

이번 기회에 많이들 사용한다는 lodash를 사용해보기로 했다.

사용법은 꽤 간단하다.

아래 링크에서 url을 복사하거나.. 스크립트 태그를 복사하거나..

https://cdnjs.com/libraries/lodash.js

 

나는 스크립트 태그를 적용하려는 html 파일에 넣어줬다.

그리고 적용시키고 싶은 코드에 \_.debounce 혹은 \_.throttle 로 감싸주면 된다.
형식은, 라이브러리를 사용하지 않고 적용할 때처럼
\_.debounce(콜백함수, 시간) 으로 적용하면 된다.

디바운스 적용 완료

 

콜백 함수에 로그를 넣어서 비교해보면 적용 전 후가 확연히 차이 나는 것을 볼 수 있다.

PC에서는 캡처만 하면 에러 메시지가 사라지네 🥹...

(좌) 적용 전 (우) 적용 후

 

아무튼 이렇게 에러를 잡고 성능 최적화까지 완료~

 

 

2. 🔥 검색어 키보드 컨트롤 수정

이 이슈는 피드백 중 하나는 아니었지만 좀 더 매끄럽고 정확한 동작을 위해서...

또 위의 이슈를 해결하다 보니 이래저래 메시지가 겹친다거나- 잘 넘어가지 않는다거나 하는 문제가 생겨서 해결해보기로.

 

PC에서는 검색 결과를 키보드 위아래 키로 선택할 수 있는데,

선택해서 엔터를 눌렀을 때 바로 위나 아래 해수욕장이 나온다거나 하는.. 어딘가 이상한 부분이 있었다. 

 

예시를 들어 위와 같이 사-로 시작하는 해수욕장들이 한 묶음인데,

사근진 해수욕장에서 엔터를 쳤을 때 사구미 해수욕장이나 사천 해수욕장이 나오는.. 그런 문제.

 

기존에는 키보드 키를 입력했을 때의 변수 searchCount만 사용했었는데, 

이 변수가 li의 인덱스와 일치하지 않아 생긴 문제 같아서, li에 데이터 속성으로 인덱스를 달아주기로 했다.

 

그리고 searchCount가 업데이트된 후에,

 

getAttribut로 가져온 인덱스와 일치하는 li를 활성화해주는 방식으로 바꾸었다.

여기서 자식 노드들을 가져오는 변수 li는 객체이기 때문에 배열로 변환..

 

이렇게 수정해주었더니 이제 선택한 값이 잘 넘어갔다. 해결~~ 😄

글이 길어진 관계로 다른 에러들은 다음 글에서 기록해보기로.. 

 

https://i-ten.tistory.com/187

에러 수정 삽질 기록 (3)

 

 

---

🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️

방문해주셔서 감사합니다! 🙌

포스팅들은 공부 중인 내용을 글로 작성한 것이라 부족한 점이 많으니 참고 부탁드립니다. 

부족한 부분에 대한 코멘트는 언제나 환영입니다.

좋은 하루 되세요, 감사합니다! 🙂