..

preview에서의 multi word 검색 기능 개선하기

1. 주제

이전 이슈에서 사용자가 입력한 검색에 공백이 있을 경우 아이콘 검색이 안나오는 경우가 발생하는 오류가 있었다.

때문에 사용자의 입력을 처리하여 더 낫은 검색 방식을 제공하자는 issue가 나왔지만 아쉽게도 이미 merge가 되서 기여를 하지 못했었다.

하지만 preview가 astro 프레임워크로 변환되면서 해당 문제가 동일하게 발생한다는 것을 알게 되었다.

이를 기회로 해당 문제에 대해서 다시 issue를 등록하고 PR을 올리기로 하였다.

2. 해결 과정

query를 다루는 프로세스

사용자 검색에 해당하는 searchinput 컴포넌트를 살펴보게 되었다.

사용자의 입력값을 inputQuery state로 관리한다는 것을 알게 되었다.

해당 inputQuery state를 디바운싱하는 동시에 useSearch custom hook을 통해 전역으로 state를 관리하도록 하는 것을 알 수 있었다.

이후 해당 query를 가지고 검색 결과에 해당하는 index컴포넌트에서 먼저 아이콘들을 순회하여 SearchIconSet 컴포넌트로 렌더링하고 와 일치하는 아이콘들을 반환하고 있는 것을 알 수 있었다.

문제 해결

프로세스를 알게된 이후 searchInput 컴포넌트 내부에서 디바운싱 하기전의 query를 공백을 기준으로 배열을 분리하고 다시 합쳐 하나의 문자열 형태로 가공한 후 sanitizedQuery라는 변수에 할당하였다.

이를 디바운싱하고 전역으로 관리하도록 수정하였다.

수정을 마치고 PR을 날렸다.

3. 소감

내가 등록한 issue와 기존에 있었던 비슷한 issue를 close하고 직접 개선하신 것 같다.

긍정적으로 생각해보면 해당 issue와 관련해서 내가 PR을 날리지 않았다면 개선 조차 안되었을 것이다.

비록 머지 당하지는 않았지만, 또 하나의 문제를 개선했다는 점에서 만족하기로 하였다.