Intro
Openlayers에서 서울 지도레이어를 불러오기 위해 GeoJSON 파일을 assets 폴더에 저장했다. 추후에 GeoServer에서 지도 레이어를 불러올 것을 염두에 두어 React Query, Axios를 사용해 로컬에 있는 GeoJSON 파일을 불러오려고 했는데 response.data의 결과가 다음과 같이 나왔다.
// 오류가 발생한 URL
const { data } = await axios.get("../assets/maps/seoul_sig_5179.geojson");
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">import { injectIntoGlobalHook } from "/@react-refresh";
injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;</script>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx?t=1707202948332"></script>
</body>
<style>
body {
margin: 0px;
}
</style>
</html>
처음에는 React-Query 코드 부분이 이상한가 싶어 이것 저것 손대봤지만 결국 URL을 상대경로로 접근한 부분이 문제였다는 것을 알아냈다.
URL을 상대경로 → 절대경로로 수정 후 원하는 JOSN 파일을 응답받을 수 있었다.
최종 코드
import axios from "axios";
import { useQuery } from "react-query";
/**
* 서울 지도 레이어를 가져오는 쿼리
* GeoJson, EPSG:5179
* @returns {useQuery}
*/
export const useGetSeoulMap = () => {
const mapData = async () => {
try {
const { data } = await axios.get(
"/src/assets/maps/seoul_sig_5179.geojson"
);
return data;
} catch (error) {
return console.error("Error loading GeoJson file:", error);
}
};
return useQuery("mapData", () => mapData());
};
// 작성한 쿼리 사용
import { useGetSeoulMap } from "../services/map";
const { data: seoulSigMap } = useGetSeoulMap();'React' 카테고리의 다른 글
| [React] npm start시 port 번호 변경하는 방법 (0) | 2024.03.06 |
|---|---|
| [React-Query] 파리미터를 통해 레이어 선택 불러오기, 캐싱고민 (0) | 2024.02.08 |
| [React] Vite 4.0 이상에서 SVG 사용하는 방법 (2) | 2024.02.02 |
| [React] 환경변수를 .env → config.js 형태로 변경하기 (0) | 2024.01.30 |
| [React] useEffect 랜더링 순서 (0) | 2023.12.26 |
