내가 관리하는 앱이 2021년 2월에 앱스토어의 오늘의 앱에 선정이 되어 앱스토어 메인에 노출이 굉장히 많이 되었고 사용자 수가 눈에 띄게 크게 늘어났다. 그래서 앱 리뷰도 활발하게 올라오고 있는데, 지난 주말에 약 검색이 안된다는 리뷰와 낮은 별점이 추가되었다.ㅠㅠ
내가 테스트 해보았지만 약 검색은 잘 작동하고 있었다. 그런데 다른 동료들이 약 검색이 안된다고 버그 리포트를 해주어서 하루 종일 디버깅을 실시했다. 디버깅시 어려웠던 부분은 같은 환경에서 내가 시도하면 에러가 없다는 점이었다. 아이폰 기기에서 아이폰 소프트웨어 버전도 같고 디바이스 사양도 크게 다르지 않은데 왜 내 아이폰에서는 에러가 단 한번도 일어나지 않는 것인가? 그래서 처음에는 서버가 불안정한가? 라고 생각했다. 약 검색을 하면 서버에서 적절한 응답을 주어야 약 검색 결과 화면을 보여줄 수 있기 때문이다. 그런데 서버에는 부하가 없었고 서버에서 응답이 없다면 오류 팝업이 떠야하는데 오류 팝업은 전혀 뜨지 않았다. 결국 백엔드와 서버 문제는 아니고 프론트 문제인 것으로 결론을 내고 자세하게 찬찬히 살펴봤다.
우선 아이폰에서만 일어나는 현상이 아니라 안드로이드에서도 약 검색 기능이 간헐적으로 됐다 안됐다 한다는 보고가 있어 아이폰에서만 일어나는 현상이 아니라는 것을 알았다. 아이폰에서도 마찬가지였다. 뚜렷한 이유도 없이 됐다 안됐다 하니 오류 원인을 찾기가 힘들었다. 결정적인 원인은 동료가 화면 녹화를 해서 동영상을 보내준 것을 보고 오류를 발견했다. 약 검색 키워드를 입력하고 검색을 하면 검색이 되는데 결과 화면이 아주 잠깐 깜빡이면서 나오고 다시 사라지는 것이었다! 동영상을 아주 찬찬히 돌려가면서 보니 결과 화면이 나오더라.
그래서 search bar 컴포넌트를 다시 살펴보니 검색 입력창에 이벤트가 onBlur 일 때 처음 화면으로 리셋을 하도록 코드를 짜놓은게 문제인 것 같았다. 나는 onBlur 이벤트를 입력창에서 입력을 하다가 말고 다른 버튼을 클릭하거나 여백을 클릭하거나 해서 입력을 멈추는 것만 생각을 하고 이렇게 코드를 짜놓았었다. 그런데 검색을 하기 위해 키보드에서 검색 버튼을 누르면 onBlur 이벤트가 트리깅 되는가보다.
사실 이전에는 그동안 여러 명이 테스트를 해도 문제가 없었는데 디바이스 소프트웨어가 업데이트 되어서 그런지 최근에 문제가 생기기 시작했다. 웹으로 테스트를 해도 아무 문제가 없었고 내가 아이폰으로 테스트를 했을 때도 문제가 없었다. 나는 기본적으로 아이오닉으로 개발해서 웹으로 테스트를 하기 때문에 이 부분을 세심하게 신경쓰지 못했던 것 같다. 그래서 당연히 아이폰으로도 테스트를 하고 안드로이드폰으로 테스트도 하는데… 아무쪼록 이 버그를 놓친게 아쉽다.
어찌됐든 이런 문제가 발생하는 이유는 화면의 복잡성이 첫 번째라 생각한다. 한 화면에서는 하나의 기능만 하도록 개발을 하는게 좋은데… 검색 창이 onFocus 일 때와 onBlur 일 때 보여주는 화면이 다르고 이 부분을 추가로 코딩하다보니 오류가 발생한 것 이었다. 이전에 문제가 없었다고 하더라도 소프트웨어가 업데이트 되면서 충분히 발생할 수 있는 오류였다. 아무쪼록 화면의 복잡성은 최대한 자제하는 것이 좋겠다.
아이오닉 리액트에서 onBlur 이벤트는 입력 창에서 포커스가 없어지는 모든 이벤트, 여백 클릭, 다른 컴포넌트 클릭, 키보드에서 검색 클릭 등 모든 이벤트가 포함된다.