오물오물 개발일기

🎁 모듈설치 - 먼저 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..

첫 만남.. 😔 - 리액트를 사용한 프로젝트를 만들어보고자 하였고 코로나 관련 API를 사용하기로 하였다. 두곳의 API를 사용하기로 하였고 그중 국내 현황은 굿바이코로나 에서 키를 발급받고 postman에 테스트를 해보았다. - postman으로 데이터가 들어오는것을 확인하고 react에서 axios를 이용하여 데이터를 불러보았다. - 하지만 항상 그렇듯 쉽게 되는일은 없는것 같다. CORS (Cross-Origin Resource Sharing) Policy? - 교차 출처 리소스 공유라는 기능으로 실행중인 웹 어플리케이션이 서로 다른 출처의 리소스에 request할 때 보안상의 이유로 교차 출처 HTTP 요청을 제한하는 것이다. https://developer.mozilla.org/ko/docs/W..

React ? - 2013년 페이스북에서 만든 자바스크립트 라이브러리로 에어비앤비, 넷플릭스, 인스타그램 등등 사용 프레임워크와 라이브러리? -> 2020/12/21 - [지식] - 💡 Framework & Library & API ? 💡 Framework & Library & API? ✨ 제어 흐름에 대한 주도성이 누구에게 있는가 !? - 프레임워크는 전체적인 흐름을 스스로가 쥐고있으며 사용자는 그안에 필요한 코드를 짜 넣는다. 반면에 라이브러리는 사용자가 전체적인 baegofda.tistory.com - 사용자 정의태그 즉, 컴포넌트 단위로 사용되어 가독성, 유지보수, 재사용성이 뛰어나다. - 다양한 이벤트에 맞게 반응하게 만들어졌다. - MVC 패턴중 View를 담당한다. - React-native..