next js에서 AWS Lambda와 API Gateway를 이용해서 공공데이터 API 불러오기 #3
이제 공공데이터 api를 Lambda 함수를 통해서 불러오고 next.js에서 데이터를 불러올 수 있는지에 대해서 확인해보려한다.
우선 공공데이터 api를 가져와야되기 때문에 공공데이터 api를 하나 가져온다.
- 공공데이터 api 포털사이트 https://www.data.go.kr/
공공데이터 api를 사용하는 방법은 해당 사이트를 참고하면 된다.
- 공공데이터 api 사용법 https://jeong-pro.tistory.com/143
공공데이터 api를 사용하는 방법을 알았다면 이제 lambda 함수에서 먼저 api를 불러오는지 확인한다.
Lambda 함수에서 api call
우선 Lambda 함수 코드에서 axios를 추가해줘야 하는데 함수 개요에 있는 index.mjs를 복사하여 vs code에 붙여넣은 다음 axios를 install하여 해당 모듈을 다시 압축시킨 다음 그 압축파일을 Lambda함수에 업로드 해도 되고 직접 만든 파일을 압축하여 업로드해도 된다.
압축파일을 업로드하여 axios까지 추가하였다.
내가 사용할 공공데이터 api는 요즘 부동산에 부쩍 관심이 많아졌기 때문에 상업업무용 부동산 매매 신고자료를 가져와보겠다...
- 공공데이터 api -
http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcNrgTrade?serviceKey=(인증키)&LAWD_CD=11110&DEAL_YMD=201211'
- api url -
http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcNrgTrade- data -
서비스키, LAWD_CD, DEAL_YMD(2012년 11월로 테스트)
api주소를 넣어준 다음 배포하고 API Gateway에서 테스트를 해보면!
API Gateway에서 아래 화면처럼 결과가 나오는 것을 확인할 수 있다.🙌
이제 next.js에서 테스트 코드를 작성하여 콘솔로 확인해보면
CORS에러....???
당연히 발생할 수 밖에 없는 에러였다.
왜냐하면 API Gateway 메서드 생성시 CORS 에러를 활성화 시켜줘야 한다.
- 메서드 화면에서 작업을 누른 뒤 CORS 활성화 선택
CORS 활성화 버튼 클릭
완료되면 다시 실행해주면 된다.
*깜빡하고 testApi 뒤에 메서드 경로를 설정안했는데 다시 추가해줌
다시 확인하면 성공적으로 데이터가 잘 나온다!😁😃😄😁😆
AWS Lambda와 API Gateway를 통해서 api를 사용하는 방법을 적었는데 좀 더 깊이 알게되면 추가로 작성해야겠다.
