공휴일 API를 사용하여 캘린더에 맵핑 하려고 했는데...
공휴일 명세서에는 XMLHttpRequest() 를 사용해서 데이터를 불러오게끔 했는데
Next js 의 getStaticProps로 불러오려고 할 때 사용할 수가 없었다.
이유는 XML 은 브라우저상에서 사용하는 메소드이고 내가 구현 하려고 하는 곳은 서버이기에 사용 할 수 가 없었다.
따라서 axios를 사용하는 방법을 선택했다.
axios는 기본적으로 xmlHttpRequest를 사용하고 서버상에서 (node)도 동작하기에 알맞았다.
그런데...
data 상에서 undefined 가 뜬다.
Thunder Client 상에서는 data가 받아와 지는데 ....
pages/sales 에서는 data가 undefined가 뜬다.
아래 코드로 terminal 창을 확인해 봤는데...
const url = process.env.NEXT_PUBLIC_HOLIDAY_URL;
const API_KEY = process.env.NEXT_PUBLIC_HOLIDAY_API_KEY;
const query = {
ServiceKey: API_KEY,
solYear: '2023',
numOfRows: '30',
_type: 'json',
};
try {
const result = await axios.get(url!, {
params: query,
});
console.log(result)
} catch (err) {
}
termina url을 확인해 보니
내 API KEY 는 끝자리가 %03%03 인데
axios로 요청 보낸 queryKey는 api key의 끝자리는 %253D%253D 로 끝난다.
원인을 알아보니 axios 자체 내부적으로 내 QUERY KEY 의 값의 % 를 INCODING 한다 ....
그래서 어쩔 수 없이 우선 query 객체를 빼고
url 에 query key 까지 다 써서 data를 받아오기로 우선 선택했다.
