해당 글은 아래 React + NestJS 연동하는 방법 글에서 발생했던 Proxy 관련 내용 입니다.
난 이걸로 정말 많은 시간을 보낸 것 같은 느낌이지만 지금은 해결되어서 내적 외침과 함께 글을 작성하고 있다. 😄
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
2. setupProxy.js 파일 위치
당연히 src 안에 있어야지! 난 바보처럼 client 파일 아래에 위치해놓고 쌩쇼를 한 것 같은 기분이였다.
결론은 아래 이미지처럼 projectA > client > src > setupProxy.js 파일이 위치해야한다!
드디어, 전부 해결하고 localhost:3000 사이트의 콘솔에 내가 보낸 데이터가 나오고 있다! 😄
'Development Log' 카테고리의 다른 글
[React/NestJS/TypeScript] 로그인 시 JWT Token 발급 및 인증(Token sessionStorage 저장) (0) | 2023.09.15 |
---|---|
choco 설치와 mkcert 설치 후 React 적용(with. React + TypeScript) (2) | 2023.09.12 |
[Development Log] React + NestJS 연동하는 방법(with. TypeScript) (0) | 2023.08.21 |
Spring boot - Enum 개념 및 Enum Mybatis 사용방법 (0) | 2022.02.06 |
Spring boot - 스프링부트 회원가입 아이디 중복체크 (프론트+백) (2) | 2022.02.02 |