React-query로 실시간 데이터 반영

리액트 쿼리에서 갱신된 데이터를 불러오기 위해서는 몇 가지 방법이 있습니다. `refetchInterval` 옵션을 이용하는 것이 가장 우선적인 해결책입니다. `refetchInterval`은 작업(fetch)에 얼마나 자주 다시 요청할 지 설정합니다. 예: ```javascript useQuery('busLocation', fetchBusLocation, { refetchInterval: 5000 }) ``` 위와 같이 설정하면 매 5초마다 버스 위치 정보를 업데이트 합니다. 그런데 문제는 여전히 캐싱 때문에 계속 동일한 데이터만 반환한다면, API response 헤더가 아닌 React Query 설정에서 캐싱 전략을 변경해야 합니다. React Query에서 비활성화 시 자동으로 캐시 데이터를 제거하려면, `cacheTime` 옵션을 사용하여 이를 `0`으로 설정할 수 있습니다: ```javascript useQuery('busLocation', fetchBusLocation, { cacheTime: 0 }) ``` 그러나 이렇게 하면 앱 성능에 영향을 줄 수 있으므로 추천하지 않습니다. 대신 stale-time과 cache-time 전략에 대해 읽어보고 이해할 필요가 있습니다. 참고로 CORS 에러와 관련해서는 서버 단에서 해결해야 하며 클라이언트 코드(즉 리액트 코드)에서는 제어할 수 없는 문제입니다. 서버 설정 혹은 Open API 제공자에게 문의해야 합니다.