문제 발생리액트 쿼리(React Query, TanStack Query)를 사용해서 데이터를 받아오는 API 중 브라우저 탭 외의 영역을 클릭 후 다시 크롬 브라우저 내부를 클릭 했을 때 API가 다시 요청되는 현상이 발생했다. Background Refetching 사용자가 브라우저 탭을 떠났다가 다시 돌아왔을 때, 데이터가 최신 상태인지 보장하기 위해서 브라우저가 암묵적으로 해당 캐시에 대한 데이터를 재요청하는 것을 의미한다.캐시를 사용하면서 매번 Background Refetching을 한뒤, 변경 사항이 있다면 UI를 변경한다. refetchOnWindowFocus 옵션true (기본값)falsealwaystrue사용자가 브라우저 탭을 떠났다가 다시 돌아왔을 때, 데이터를 최신 상태로 동기화하기..
Intro 로컬에 있는 GeoJSON 파일 2개(서울 지도 레이어, 서울 시군구 중심점)를 각각 불러오는데 추후 GeoServer에서 데이터를 요청할 것을 가정해 react-query를 사용했다. 레이어명을 파라미터로 전달해 원하는 파일을 선택 조회하는 것을 의도했는데 처음 전달한 이름 1개만으로 조회가 되는 상황이 발생했다. 기존 코드 import axios from "axios"; import { useQuery } from "react-query"; /** * 지도 레이어를 가져오는 쿼리 * GeoJson, EPSG:5179 * @param layerName * @returns {useQuery} */ export const useGetSeoulMap = (layerName: string) => {..
Intro Openlayers에서 서울 지도레이어를 불러오기 위해 GeoJSON 파일을 assets 폴더에 저장했다. 추후에 GeoServer에서 지도 레이어를 불러올 것을 염두에 두어 React Query, Axios를 사용해 로컬에 있는 GeoJSON 파일을 불러오려고 했는데 response.data의 결과가 다음과 같이 나왔다. // 오류가 발생한 URL const { data } = await axios.get("../assets/maps/seoul_sig_5179.geojson"); 처음에는 React-Query 코드 부분이 이상한가 싶어 이것 저것 손대봤지만 결국 URL을 상대경로로 접근한 부분이 문제였다는 것을 알아냈다. URL을 상대경로 → 절대경로로 수정 후 원하는 JOSN 파일을 응답받..
