공공API 가져오기 너무 어렵다..

 

일단 유기동물의 리스트를 가져오기 위해 

https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15098931 

농림축산식품부 농림축산검역본부_동물보호관리시스템 유기동물 정보 조회 서비스

구글링하여 이런 API를 찾아 들어갔습니다.

활용신청을 하니 바로 API Key를 주네요.

 

이 것을 활용하기 위해 샘플코드를 봅니다.

 

음.. 뭔가 내가 원하는 형태는 아니네요.

API Key는 소중하니 환경변수로 따로 만들어줍니다.

 

Next.js는 환경변수를 어떻게 만드나 공식문서에서 찾아봤습니다.

솔직히 뭐라는지 몰라서 구글번역 해서 봤습니다.

대충 .env.local 파일을 만들라는 것 같군요.

 

 

이렇게 만들어주니 똑똑한 Next.js는 Ignore에도 파일을 저절로 추가시켜주네요..? 원래 추가가 되어있던건가?

 

 

그리고 API폴더에 getAPI.ts 파일을 만들어서 React Query와 Axios를 통해 일단 데이터 가져오기 시도를 해봅니다.

 

 

 

 

이렇게 하고, 콘솔 찍어보려고 pages의 한 폴더의 index.tsx파일에서 데이터를 불러왔습니다.

 

네트워크 탭을 보면 이렇습니다.

 

 

200번으로 잘 불러오는데, 요청URL을 들어가보면 이런 문구가 뜹니다.

 

 

 

key 받을 때 encoding decoding 되는걸로 사용하라고 해서 decoding의 api key를 encoding으로 바꿔줍니다. 환경변수 값도 바꿔주고요.

다행히도 잘 가져오네요.

 

콘솔도 다시 찍어봅니다.

잘 찍히긴 하는데 xml 형식으로 나오네요. json형식으로 지정해놨는데...

 

 

json으로 바꾸니 잘 됩니다..

 

근데 이전 React 프로젝트 때에는, API에서 response.data를 리턴해주니 그냥 데이터가 바로 나왔는데,

이건 json 형식이라 그런지 몇번 더 거쳐야되는 것 같습니다.

 

일단 시,도는 끝났고 나머지 작업을 시작하기 전에 Redux Toolkit 세팅을 하고,

저 받아온걸 slice를 통해 select에 집어넣을 생각입니다.

유저가 저걸 선택하면 자동으로 코드가 들어가게끔..

근데 전체를 다 보이려면 어떻게 해야되는건지 알아봐야될 것 같아요.

일단 넵..오늘은 여기까지 해야겠습니다.

너무 피곤하네요..