오픈API 사용하여 웹 사이트 만들기

정부에서 제공하는 공공데이터들이 있다.

백으로 서버를 만들기 대신, 이번엔 공공api를 가져다가 혼자 프로젝트를 해보며 사용해보기로 하였다.

 

오픈 API란

응용프로그램이나 서비스를 개발하는데 필요한 운영체제나 라이브러리 등의 특정 기능을 추상화하여 사용하기 쉽도록 만든 인터페이스

 

여러 사람들이 공동으로 사용할 필요가 있는 자원에 대하여 이 자원의 사용을 개방하고

사용자들이 자원에 대한 전문적 지식이 없어도 사용할 수 있도록 제공하는 것이라 한다!

 

 

나의 경우 레시피 api 를 가져올 생각이라 농림축산식품 공공데이터 포털 사이트에 회원가입 후,

API 인증키 자동 발급을 받는다.

이는 타인에게 양도가 불가하며 인당 1개의 인증키로 관리 된다고 한다.

 

 

오픈 API 사용 신청 요청 (자동 승인 처리됨)

활용하려는 API를 선택하여 신청IP를 입력해준다.

따로 서버가 없으므로 localhost 로 처리해준다.

 

 

그런다음 기본으로 제공되는 명세서를 확인해준다.

 

이제 Cors 문제에 맞닥뜨렸다...

이를 해결하기 위해 서버를 만들거나 프록시를 건드려야 하는데

나의 경우는 서버를 만들기 보단 프록시를 설정하여 cors 를 우회하는 방법을 쓰기로 하였다.

 

이를 위해서 일단

npm i http-proxy-middleware

해당 미들웨어를 설치하고 package.json 에 proxy 키를 추가하고 우회를 원하는 주소를 넣어준다.

이 문제때문에 꽤 헤맸었다..

미들웨어용 코드를 작성해야하는 경우도 있던데 나의 경우는 따로 작성은 해주지 않았다.

 

다행히 문제가 해결되어서 정보를 읽어오는 것은 성공했다.

 

axios를 사용하여 직접 읽어오기나 useSWR을 통해 우회하여 읽어오는 방법을 써보며 성공했다.

 

지금보면 레시피 기본정보api 와 레시피 재료정보api를 따로 불러와서 보여주고 있다.

서로 구조가 조금 달라서 고생했다.

이제 과정정보api만 남았다.