(5day)cors & server

react로 리팩토링

구글링을 여러가지로 해본 결과 리액트앱으로 시작하여 참고자료들을 사용하며

배우고 적용하는것이 가장 빠른길일 것 같다.

리액트는 그저 라이브러리일 뿐이고 나는 어쩌면 피하고 있었을지 모른다.

그래서 다시 프로젝트를 처음부터 만들어 기존 프로젝트를 포팅했다.

yarn으로 react create app 하였고 node-sass와 fontawesome 도 새롭게 하였다.

기존에 계속 react의 기초를 공부하여 그래도 어느정도 쉽게 포팅했다.

react, express, nodejs 로 cors문제 해결

약간 비겁하게 해결한 것 같지만 그래도 구글링도 프로그래머의 기초소양이라고 생각한다.

결국 근본적인 해결인 proxy server를 만들어서 문제를 해결했다.

MERN(mongoDB, express, react, nodejs)이라는 스택의 react, express, nodejs로 해결한 것인데

우선 프록시서버에서 axios로 공공데이터를 비동기통신으로 데이터를 json형식으로 받는다.

서버의 포트는 8000으로 설정하고 클라이언트의 App.js에서 axios를 이용해 공공데이터의 api가 아닌 나의 프록시서버로부터 데이터를 받는다. 이렇게 함으로서 cors문제를 해결할 수 있었다.

아직 기존의 geolocation과 kakao api를 통해 만든 로직과 style을 적용하지는 못했지만

프론트엔드개발자라면 한번 겪는 CORS를 조금이나마 넘은 것 같아 좋다.