오물오물 개발일기

🤷‍♀️ 에러와 마주하다.. - 호스팅 해둔 GOC 사이트의 국내 종합 데이터 현황에 Error가 발생 하였다. 해당 데이터는 시도별 현황과 같은 OPEN API를 사용 하기 때문에 API서버의 문제라면 양쪽에 에러가 떠야하지만 국내 종합 데이터 현황에만 문제가 있었다. - 그래도 혹시나 하는 마음에 먼저 postman에서 확인을 하였다. - 문제를 찾기 위해 디버깅을 시작하였고 범인은 바로 server쪽의 Route파일이 문제였다. - 해당 API는 당일부터 7일전 즉, 총 8일간의 데이터를 받아오고있었다. 얼핏 보기엔 문제 없이 잘 구하는듯 하였다. 하지만 문제는 4월 1일이 된 현재, 3월에서 4월로 달이 변경되면서 생겼다. - 당일의 날짜를 구하는데에는 정상적이였지만 문제는 7일전의 날짜를 구하는..

💡 두개의 request는 어떻게 처리하지? - 프로젝트 중 '코로나백신'에 관한 글들을 받아오기 위해 네이버와 다음의 api를 사용하여 받아오기로하였다. 하지만 한페이지에서 두개의 request 를 요청하는 방법을 몰랐었기 때문에 따로 요청을 했었다. 🎇 해결(Axios의 multiple request) - 역시나 방법은 있었다. 해결법은 Axios의 multiple request 기능이 있었고 간단하게 사용이 가능하였다. - 두개의 데이터가 형태에 따라 배열로 들어올경우 아래와 같이 한개의 배열로 사용하면 된다.

🔒 인증키 보안 - 이전 글에서 공공데이터포털 API를 사용하기위해 인증키를 발급받고 사용을 했었다. 2021.03.09 - [React/React + Node.js(Express)] - ✨ 공공데이터포털 API 이용하기 (with XML to JSON) ✨ 공공데이터포털 API 이용하기 (with XML to JSON) 🎁 모듈설치 - 먼저 express에서 데이터를 받아오기 위해 request 모듈을 설치한다. - 이후 xml데이터를 json타입으로 변환하기 위해 xml-js 모듈을 설치한다. 💡 실전 !! - 먼저 공공데이터포털에서 제 baegofda.tistory.com - 하지만 사용을 위한 인증키는 외부에 노출을 막기위해 직접적으로 깃허브에 올라가는일을 막을 필요가 있다. 때문에 인증키를 숨기..

🎁 모듈설치 - 먼저 express에서 데이터를 받아오기 위해 request 모듈을 설치한다. - 이후 xml데이터를 json타입으로 변환하기 위해 xml-js 모듈을 설치한다. 💡 실전 !! - 먼저 공공데이터포털에서 제공해주는 샘플코드를 이용하여 코드를 작성해준다. - 테스트할 해당 페이지의 라우터파일에 코드를 작성한다. - 라우팅을 해줄 server.js와 데이터를 요청할 리액트 파일또한 수정해준다. - 결과를 확인하면 문서에 명시되어있는데로 xml데이터타입으로 들어온다. - 우리는 JSON타입의 데이터를 원하기 때문에 변환을 위한 xml-js모듈을 사용해야한다. - xml-js모듈을 사용하기 위해 라우터 파일의 내용을 수정한다. - 수정 후 확인을 하면 JSON타입으로 정상적으로 변환이 되었다.

💼 사전준비 - 국내의 공공데이터포털에서 API를 사용하기 위해서는 API키를 요청해야한다. 공공데이터포털 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr - 국내 코로나 현황에 관한 데이터를 사용하기위해 '코로나 현황' 을 검색한다. - 원하는 데이터를 클릭하여 들어가면 해당 API에 관한 내용들이 있으며 활용신청을 해야한다. - 로그인 후 활용신청을 누르면 간단한 신청서(?)를 작성하면 API키가 발급된다. - 승인은 바로 되나 발급 받은 키를 사용하려면 1~2시간 뒤에 사용이 가능하다. - 받은 인증키를 사용하여..

🎉 React + Node.js(Express) 연동하기 (2) - 리액트와 노드서버간의 데이터를 주고 받기 위해서는 프록시 모듈을 설치해야한다. - 또 데이터 통신을 위한 방법중 Fecth API대신 Axios 라이브러리를 사용하기위해 설치를 해야한다. 프록시와 CORS? 🤬 CORS? 그게 뭔데 ! 첫 만남.. 😔 - 리액트를 사용한 프로젝트를 만들어보고자 하였고 코로나 관련 API를 사용하기로 하였다. 두곳의 API를 사용하기로 하였고 그중 국내 현황은 굿바이코로나 에서 키를 발급받고 pos baegofda.tistory.com - 먼저 프록시 설정을 위해 client의 src에 setupProxy.js를 생성한다. - 모듈 설치를 위해 yarn add http-proxy-middleware 명령어..

💡 Express ? - Express.js, 또는 Express는 Node.js를 위한 웹 프레임워크의 하나이다. javascript를 이용하여 프론트와 함께 백엔드를 구축하여 서버-클라이언트를 모두 개발할 수 있다. 참고 : Express 개념정리 Node.js, Express 개념정리하기 반갑습니다. 오늘은 Node.js, Express의 개념에 대해서 간략히 알아보도록 하겠습니다. Node.js의 개념 구글의 크롬 V8 자바스크립트 엔진을 기반으로한 비동기 IO 를 지원하는 고성능네트워크 서버이 ithub.tistory.com 🕶 준비하기 - 기본적으로 node.js가 설치되어 있어야 한다. (확인법 : Terminal에서 node -v 후 확인) 참고 : Node.js 설치하기 Node.js N..