[TIL] D+92

실전 프로젝트 진행 중, 지금 생각해 보면 별거 아니지만 당시엔 까다로웠던 개선 작업이 있었는데 바로 검색 기능 관련 트러블이었다

실제로 에러가 뜨거나 페이지가 다운되거나 하는 문제는 아니었으나, 특정 조건을 만족할 경우 검색 기능을 제대로 사용할 수 없어지는 상태...🤣

해당 현상이 나타나는 과정은 다음과 같았다.

---

1. 탐색 탭의 검색창을 통해 검색을 한다.

2. 메인 탭 상단의 식물 추가 버튼(+)을 눌러 식물 추가 flow의 식물 목록 페이지로 접속한다.

3. 식물 목록 페이지에서 검색을 한다 -> 1. 탐색 탭의 검색 결과만을 보여주거나, 2. 식물 목록 페이지의 검색 결과를 아주 짧은 시간 보여주고 전체 목록으로 전환되기를 반복한다

---

우리 프로젝트의 검색 기능은 텍스트의 입력이 들어올 때마다 서버에 요청을 보내 검색 기능을 출력하도록(정확히는 lodash의 debounce를 사용해 텍스트의 입력이 들어오는 것을 0.1초마다 요청 보내도록) 되어있다.

아마 위의 조건을 만족할 경우, 텍스트의 입력이 들어올 때마다 '사용자가 입력한 키워드' 요청을 보내자마자 '키워드를 초기화하는 코드'가 함께 동작해버려서 발생한 문제였던 것으로 추정된다.

'탐색 탭'의 검색 결과와 '식물 목록'의 검색 결과는 같은 state 값을 사용하고 있었기 때문에, 각각의 페이지에 접속할 경우 검색 내역이 남아있지 않도록 사용자가 입력한 키워드 값을 초기화할 필요가 있었고, 이 초기화를 위한 코드를 첫 페이지 접속 이후 실행이 되지 않게 하겠다고 단순히 식물 목록 창에 관련된 컴포넌트의 useEffect 훅에 걸어놓은 것이 첫 번째 문제였다.

두 번째로, 두 검색 결과는 어느 정도의 view만을 공유하며 다른 컴포넌트를 사용하고 있었는데, 식물 목록의 검색 기능을 탐색 탭 완성 이후 추가하게 되면서 검색 내역이 있을 경우 탐색 탭의 검색 결과를 보여주는 컴포넌트를 공유하도록 한 것을 잊었기 때문에+약간의 실수로 일어난 휴먼 에러의 문제이기도 했다.(ㅎㅎ...)


처음 식물 목록 페이지에 진입할 경우 키워드가 초기화되는 코드가 동작하기 전이라 먼저 저장된 키워드의 검색 결과를 보여주었다고 하더라도 이후 돔의 렌더링이 종료된 뒤 빈 키워드로 초기화하며 작업이 멈추었어야 했는데, 식물 목록 페이지에서도 검색 키워드를 저장하며 결과를 보여주기 위해 세팅해두었던 state들이 함께 꼬여 '키워드를 통한 검색'과 '검색 키워드 초기화'가 계속해서 번갈아가며 실행된 듯...? 사실 아직도 정확한 원인은 모르겠다... 그저 나의 추측일 뿐 (ㅠㅠ)

해당 코드는 하나하나 원인을 찾아서 되짚어가며 수정하는 것보다 다시 짜는 것이 빠를 것이라 판단했고, 이후엔 다음과 같이 작성해 개선했다.

1. 빈 값을 검색해 키워드를 초기화하는 코드를 기존의 컴포넌트에서 식물 목록 관련 최상단(검색 결과 컴포넌트로 교체할지 말지 판단하는) 컴포넌트로 이동.

2. 식물 목록 페이지에서는 굳이 매번 키워드를 저장해두고 재검색을 실행할 필요가 없기 때문에 value(스토어에 저장된 키워드)가 있을 경우 바로 해당 값을 검색하던 기존의 코드를 삭제. 해당 페이지에서 입력한 값의 결과만 출력하도록 수정.

수정한 코드 중 2번이 가장 중요했던 것 같다. 아예 다른 페이지의 검색 데이터가 영향을 끼치지 않도록 수정하는 것... (ㅠㅠ)

탐색 탭에서는 검색 결과가 3가지의 탭으로 또 분류가 되어 있어 각 탭의 컴포넌트마다 저장된 키워드로 재검색을 해 같은 결과를 보여줄 필요가 있어 키워드 저장 세팅을 해두었으나, 이를 식물 목록 페이지에 그대로 적용해버리는 바람에 문제가 발생한 것이다 (🤣) 다음부터는 정말... 귀찮아도 꼭 두 번 세 번 생각하고 코드를 짜야겠다 😂😂😂