🎵 React + Node.js(Express) 연동하기 (2)

🎉 React + Node.js(Express) 연동하기 (2)

    - 리액트와 노드서버간의 데이터를 주고 받기 위해서는 프록시 모듈을 설치해야한다.

    - 또 데이터 통신을 위한 방법중 Fecth API대신 Axios 라이브러리를 사용하기위해 설치를 해야한다.

프록시와 CORS?

🤬 CORS? 그게 뭔데 !

    - 먼저 프록시 설정을 위해 client의 src에 setupProxy.js를 생성한다.

client폴더의 src경로에 생성한다.

    - 모듈 설치를 위해 yarn add http-proxy-middleware 명령어를 실행한다.

client 경로에서 실행한다.

    - 설치완료 후 setupProxy.js에 설정을 해준다.

    - target의 내용은 통신할 서버의 도메인주소를 기입하고 해당 도메인을 /api로 호출을 한다.

setupProxy.js에 위의 사용할 프록시 설정을 해준다.

    - 통신을 위한 Axios 라이브러리 설치를 위한 명령어를 실행해준다.

client 경로에서 실행한다.

    - 테스트를 위해 server/Router/test.js와 client/src/App.js의 내용을 수정한다.

Router 내의 test.js의 내용을 수정해준다. 

client 내의 App.js를 수정해준다. 정상적이라면 console창에서 hi라는 텍스트를 확인할 수 있다.

    - 설정을 완료 후 실행시켜 본다.

실행 후 console 창에 hi라는 문구를 제대로 받아온걸 확인하였다.