[Development Log] TypeScript에서 http-proxy-middleware 사용법

해당 글은 아래 React + NestJS 연동하는 방법 글에서 발생했던 Proxy 관련 내용 입니다.

https://dego.tistory.com/16

React + NestJS 연동하는 방법(with. TypeScript)

 

난 이걸로 정말 많은 시간을 보낸 것 같은 느낌이지만 지금은 해결되어서 내적 외침과 함께 글을 작성하고 있다. 😄

Proxy를 설정해줘야 했던 이유는 위 글에서 자세히 써놨기 때문에 여기선 생략하겠다. 결론은 Proxy를 사용해야 한다!

 

1. 터미널에서 아래 미들웨어 명령어를 입력해서 설치해줘야 한다.

 

 npm i http-proxy-middleware --save

 

2. src 폴더 아래에 setupProxy.ts 파일을 생성해서 아래 코드를 작성해야 한다.

 

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

 

근데 여기서 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON 요 에러가 콘솔에 계속 찍히고 있었고.. 에러 내용을 찾아보니 경로가 잘 못 된 것 같은 느낌적인 느낌이 들었다. 분명 Proxy 설정 해놓고 React에서 호출할 때 local ~ 주소를 전부 생략했기 때문에 Proxy가 제대로 적용되지 않았다면 문제가 발생할 수 있기 때문이다. 그래서 package.json 파일에 proxy 경로를 넣었을때는 에러가 발생하지 않았고.. 근데 이 방법으로는 사용하고 싶지 않아서 구글링으로 계속 찾아봤었다. 총 2가지의 문제점을 발견했었다.

 

1. setupProxy.ts 파일이 아닌 .js 파일로 만들어야 한다.

난 타입스크립트로 프로젝트를 만들고 있었기 때문에 검색했던 모든 글들이 .js 파일이여도 .ts로 변경해서 적용을 하고 있었는데 똑같은 에러만 반복되던 찰나 setupProxy는 타입스크립트에서 제공되지 않는다는 이슈글을 발견했다.

 

결론은 setupProxy.ts 파일명을 setupProxy.js 파일명으로 바꿔야 한다.

 

https://github.com/facebook/create-react-app/issues/8273

Issues setting up proxy for TypeScript CRA with TypeScript Express app · Issue #8273 · facebook/create-react-app

 

2. setupProxy.js 파일 위치

당연히 src 안에 있어야지! 난 바보처럼 client 파일 아래에 위치해놓고 쌩쇼를 한 것 같은 기분이였다.

결론은 아래 이미지처럼 projectA > client > src > setupProxy.js 파일이 위치해야한다!

 

setupProxy.js_파일위치.jpg

 

드디어, 전부 해결하고 localhost:3000 사이트의 콘솔에 내가 보낸 데이터가 나오고 있다! 😄