인프런 커뮤니티 질문&답변

안녕하세요.

혼자 개인 프로젝트를 하면서 강의를 듣고 있는데 궁금한 점이 생겨서 질문 남깁니다!

현재 projectA 안에 프론트, 백 폴더를 제로초님처럼 만들어놓고 프론트는 react+typescript / 백은 nestjs+typescript 로 전부 설치해놓은 상태입니다.

다만, 이렇게 할 경우 proxy 설정을 프론트에서 해줘야 된다고 하여 아래 처럼 설정을 해당 강의 듣기전에 구글링하여 만들어놨었습니다.

1. 미들웨어 설치

 npm i http-proxy-middleware

2. projectA > pront > src > setupProxy.ts

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

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

3. package.json

// 위에 생략...
"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test",
		"eject": "react-scripts eject"
	},
	"proxy": "http://localhost:3095/",
// 아래 생략...

여기서 궁금한 점이.. proxy를 설정할 때 미들웨어를 설치하여 setupProxy.js 파일을 만들어서 사용하라는 글들을 많이 봐서 그대로 따라하고 파일명만 ts로 변경했었습니다.

이렇게 하니 api를 불러오는 url 부분에 localhost:3095~~~ 이 부분을 전부 다 입력해야 에러가 나지 않았고 생략해서 사용하려면 package.json에 proxy 경로를 추가하는 방법밖에는 없는걸까요??(미들웨어 설치 + setupProxy.ts 파일로만 proxy 설정을 해보고 싶었는데 이 경우에는 api url 불러오는 부분에 locallhost~~~... 를 쓸 수 밖에 없는지가 궁금합니다.)

다만.. package.json에 proxy 경로를 넣어놓고 setupProxy.ts 파일의 코드를 지워도 제대로 돌아가더라구요.. setupProxy.ts 파일을 잘 못 만든걸까요? 이때 돌아가는 이유가 package.json의 proxy 경로로만 인식을 한 것 같습니다..

https://www.npmjs.com/package/http-proxy-middleware

마지막으로 위 proxy 설정 파일을 해주면 cors 오류가 발생하지 않는 것 같은데 둘중 하나만 설정을 해주는 것이 맞을까요? 둘다 해줘야 하는건지.. 프론트에서 proxy만 하거나 백에서 cors를 설치하는 방향 둘중에 뭐가 더 나은 방향인지도 궁금합니다!

원래는 아래 cors 설치하고 아래 코드까지 작성 해놨었습니다.

• main.ts(back 폴더안)

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import cors = require('cors');

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.use(cors());
  await app.listen(process.env.PORT);
  console.log(`listening on port ${process.env.PORT}`);
}
bootstrap();