리액트 & 노드JS 서버 연동 (Http-proxy-middleware)

 

 

안녕하세요. 훈츠입니다. 금일은 노드JS 익스프레스 서버와, 리액트와의 통신을 위한 글을 남깁니다. 사실 간단하게 프록시 설정하면 된다고했는데, 안되서 몇일 고생했어요. 외국 개발자분이 소개해주신 블로그 보고 해결했네요. ^^ 아하 모멘트~~~~!!

 

클라이언트 Json 파일을 이용한 프록시 설정 

 

[노드 JS Express and React] yarn dev 를 이용한 서버와 리액트 프론트 동시실행

위의 방법으로 하였는데, 안되서 아래 미들웨어를 설치 하여 해결했습니다. 

잘못한부분은 없는거 같은데 프록시가 안되더라고요. 알고 계신분은 알려주세요~

 

---

Http-proxy-middleware 

 

설치 

npm install -save http-proxy-middleware 

 

코드 공유

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///   const { createProxyMiddleware } = require('http-proxy-middleware');   module.exports = function(app) {   app.use(     '/api',       createProxyMiddleware({       target: 'http://localhost:5000', //프록시할 타겟 설정        changeOrigin: true,     })   ); };   Colored by Color Scripter

cs

루트단에 만들어 주세요. 

위와 같이 호출하면 노드JS 혹은 EXPRESS 와 잘 통신이 됩니다. 

 

여러개의 타겟을 설정도 가능합니다. 

리다이렉션 기능도 가능합니다. 

짱 좋은거 같아요. ^^

 

---

몽고 DB 연동 시키기

yarn dev 를 통해서 서버, 클라이언트 데이터베이스를 한번에 켭니다.