문제
제가 이번에 맡은 뷰 중에 검색 뷰가 있었는데요!
검색어를 통해서 웹툰을 검색하는 기능을 구현했습니다!
서버선생님들이 구현한 API는 해당 글자가 들어간 웹툰리스트를 반환해주는 것이었습니다.
검색 API를 연동하고 테스트를 해보는데..
어라?! 왜 깜빡거리지??
근데 알고보니 깜빡거리는게 아니라 한국어 특성상 한글자에 자음과 모음이 들어가는데 글자가 완성되기 전에는 인식을 못하는것이 문제였습니다.
쉽게 말해 “청춘”은 “청춘극장”에 포함되어있는 단어이기 때문에 해당 웹툰이 반환되지만 “청춘ㄱ”를 타이핑 하는동안은 포함되지 않은글자로 판단하여 반환되는 웹툰이 없는것이고 이를 빠르게 타이핑하다보니 깜빡거리는 것처럼 보였습니다
과정
해결법을 찾다보니 두 가지 방법이 있었습니다
1. 서버 선생님들께 부탁하기!
이러한 문제를 검색해보니 서버측에서 엘라스틱 서치라는것을 구현하여 해결할 수 있다는것을 알았습니다. 초성 검색과 같은 기능을 구현할 때 사용하는데 이를 통해 글자가 완성되기 전 자음, 모음단위로 까지 쪼개어 검색이 되게 할 수있고 결과적으로 빠르게 타자를 치는 동안에도 깜빡거리는 것처럼 보이는 현상을 해결할 수 있습니다.
2. 클라측에서 해결하기!
하지만 이 방법은 리소스가 크다고 나와있고 실제로 서버선생님과 상의해본 결과 힘들다는 답변을 받았습니다 ㅠ
그래서 클라측에서 해결하기위해 찾은방법이 debounce 였습니다!
Flow를 사용하여 코루틴으로 debounce(RxJava처럼 이벤트 딜레이 처리)를 구현하여 해결하기~!!
debounce란??
여러 이벤트가 발생할 때 이 이벤트를 일정 그룹으로 묶어서 하나로 처리하는 것.
debounce를 통해 딜레이를 걸고 사용자가 입력을 끝냈다고 판단이 되었을 때 서버에 요청하는것으로 깜빡거리는 현상을 해결하는것이 최선이었습니다.
- 자음/모음 입력 중 서버 호출 방지
- 불필요한 요청을 줄여 UI 깜빡임 현상 제거
코드
debounce는 lanchIn( )으로 실행시키는데 launchIn은 collect와 다르게 새로운 코루틴을 생성하기 때문에
별도의 스레드, 별도의 코루틴에서 이벤트를 감시하고 처리할 수 있습니다.
이를 통해 RxJava의 debounce 기능과 유사한 효과를 Flow에서 구현할 수 있었습니다.
해결
코루틴을 통해 구현한 debounce 기능을 통해 UI의 깜빡거림을 해결하였습니다!
