오늘은 팀프로젝트를 진행 Live Share를 이용하여 코딩을 진행
프로젝트 중 고려 했던 점들
- Redux
- React query
- debounce
- cors
- 퍼지 문자열
- 사용자가 입력한 부분을 볼드 처리
- tab index를 통한 key action
진행 중 발생한 문제점
검색 값을 적을 때 마다 API호출하게 되면 서버에 부하가 많이 걸리기 때문에 API 호출시에 debounce를 걸기로 함
cancelToken(x) => AbortController 을 사용 하여 비동기 요청을 취소 하려고 했으나 요청은 하기 때문에 사전과제의 요구 사항에 맞지 않는 부분이 있어서 key입력시에 debounce를 걸었다.
퍼지 문자열
정확히 일치하지는 않더라도 대충 비슷한 느낌의 문자열을 찾아주는 방법, 적용을 하고 싶었는데 전체 값을 어딘가에 받아 와서 그 값을 비교해서 비슷한 결과를 배열로 보여주는 방법을 생각해 봤지만 이건 api 호출을 해서 하는게 아니라 어딘가 그 값들을 저장 하는 방식이여서 적용 포기...
React Query
Stale이라는 개념이 헷갈렸는데 팀원이 설명을 잘 해줘서 이해 했다.
react query에서 refetch가 되는 조건은
1. 새로운 query instance가 마운트 될때(page 전환 같은 것)
2. 브라우저의 화면을 나왔다 다시 들어오는 것(탭 같은 것)
3. refetch interval
이렇게 있는데 이 조건들은 retail상태가 선수 조건이다.
react-query는 값을 캐싱하여 가지고 있고 키값으로 그 값을 다시 불러 오는 것
tab index를 이용한 key action
다음에 해볼만한 것
안녕하세요