칠일. S4-unit7 블로깅 과제2

d_shunny·2023년 6월 7일
0
post-thumbnail

proxy를 사용할 수 있는 방법에는 두가지가 있다.

  1. webpack dev server proxy
  2. http-proxy-middleware 라이브러리를 사용

오늘 실습에서는 이 두가지를 이용해서 proxy를 사용해봤다.

웹팩을 이용한 프록시는 생각보다 수월했다..!
my-app(client)에 있는 package.JSON 맨 밑에 "proxy" : "우회할 API 주소" 를 넣어주고 기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거하면 된다. 예를 들면 fetch('우회할 api주소/params') 로 되어있는 부분을 fetch('/params'); 로 고쳐주면 된다.

나는 proxy 값 안에는 localhost://3080만 주고 fetch 안에 api/params 의 형태로 값을 줬다!

되어야하는데 처음 보는 오류가 등장했다..! index.js 파일에 "<" 문제라는데 아무리 생각해도 이게 진짜 문제일거라고는 생각이 안들었다. 그래서 각각 서버, 클라이언트 터미널에서 control+c 로 종료하고 새로 돌리니 바로 잘 돌아가는 것을 확인!! 다음에 잘 안돌아가는거 같을때는 바로 이 방법을 사용했더니 곧잘 돌아가는 것을 확인할 수 있었다.

다음 두번째 방법은 npm install 이 필요한데 이것을 클라이언트와 서버중 어디에 설치해야하는지 조금 고민이 되었다..(chat gpt의 도움을 받은 결과) 프로젝트 루트 디렉토리에 설치하면 된다길래 npm install http-proxy-middleware --save 로 루트 디렉토리에 설치했다 그 후에는 setupProxy.js을 클라이언트/src 안에 만들어서 밑의 코드를 입력해야한다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', //proxy가 필요한 path prameter를 입력합니다.
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력합니다.
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

이 코드는 도메인이 하나만 사용될 때이고 도메인이 한개 이상 사용 될 때도 있다. 실습 과정에서 그런일이 있었다.
그때는 밑의 코드를 이용하면 된다.

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
 app.use(
   ["/api1", "/api2"],
   createProxyMiddleware({
     target: "http://localhost:3080", 
     changeOrigin: true, 
     router: { "/api2": "http://localhost:3070" },
   })
 );
};

이렇게 작성해주고 첫번째 방법과 같이 fetch의 도메인 부분을 지워주면 된다! 이 두번째 실습을 할때 뭐까지 고쳐야하는지 모르고 계속 했는데 일단 첫번째 다른 서버도 켜야한다..!(어쩌면 당연한거지..하하) 두번째 컴포넌트들을 만들어줘야한다.(하지만 나는 그냥 수정했다..) proxy가 있으면 편하다는 것을 알게 되었다.

profile
코딩장

0개의 댓글

관련 채용 정보