[React] 로컬에 있는 json으로 url을 설정하는 방법

 

Front-end 개발자는 주로 개발을 편하게 하기 위해 로컬 환경에서는 서버에 데이터를 직접 호출하지 않고, 로컬에 dummy 데이터를 저장하여 그 값을 불러와 개발 시간을 단축하고는 합니다. 이번 글에서는 어떻게 로컬에 있는 json 데이터를 axios를 통해 불러올 수 있는지 확인해 보도록 하겠습니다.

 

 

[axios 다운로드]

테스트를 위해 axios를 먼저 설치합니다.

yarn add axios

npm i axios

 

 

[json 파일 생성]

axios로 받을 json 파일은 root > public 폴더 내에 위치시킵니다. 저는 전국에 있는 축구장을  json으로 다운 받아 public > dummy > StadiumInfo.json에 저장시켜보았습니다.

 

 

[json 파일 조회]

axios의 url 파라미터('/dummy/StadiumInfo.json')에는 root/public/dummy/StadiumInfo.json 경로에서 /public까지의 경로를 생략하고 dummy부터 시작된 것입니다. 따라서 axios를 이용해서 url을 설정할 때는 파일이 root/public안에 있어야 합니다.

import axios from 'axios';

const getStaduimInfoList = () => {
    axios.get('/dummy/StadiumInfo.json')
        .then((res) => {
            console.log(res);
        })
}

 

 

[실행 결과]