리액트에서 Proxy 설정에대해 알아보자!

윤도훈·2024년 10월 27일

Proxy 리액트

Proxy가 뭐야?

영어단어로 Proxy란 대리 라는 의미를 가지고 있습니다.
프론트에서의 요청을 받고 서버대신 데이터를 전달해주는 의미로 볼 수 도 있습니다.

a 가 프론트, c가 서버일때 원래는 a - c 이렇게 데이터를 주고받았다면
프록시 b 를 통해서 a - b - c 형태로 주고받을 수 있습니다.

하면 좋은점들

1. CORS 문제 해결

Proxy는 다른 도메인 간의 데이터 요청 시 발생하는 CORS 문제를 우회할 수 있게 해줍니다. Proxy를 사용하면 서버끼리의 통신으로 간주하여 제한을 피할 수 있습니다.

2. 간편한 개발 환경 설정

//프록시 설정없이
const addTodo = async () => {
      const response = await axios.post("http://localhost:8080/user/insert", {
          task:newTodo
      })
};
//프록시 설정 on
const addTodo = async () => {
      const response = await axios.post("/user/insert", {
          task:newTodo
      })
};

간단하게 할일을 추가하는 axios문 입니다. Proxy 설정으로 인해 axios문마다 굳이 http://localhost:8080 해주지 않아도 처음으로 자신의 url에 있나 확인 후 없다면 Proxy에 있는 url을 사용하여 api요청을 보냅니다.

3. 보안 및 로깅 기능 강화

Proxy 서버는 데이터 요청을 중간에서 필터링할 수 있기 때문에, 요청 기록(log) 관리와 보안 필터링 기능을 제공합니다. 이를 통해 애플리케이션 보안을 강화하거나 요청 데이터를 더 잘 추적할 수 있습니다.

4.속도 개선

캐싱 기능을 설정해 같은 요청에 대한 응답을 Proxy 서버에 저장함으로써 다음 요청에 대해 더 빠르게 응답을 제공하여 불필요한 연산을 줄여줍니다.

이밖에도 다양한 좋은기능들이 있을겁니다. 네

리액트에 적용시켜보자

pakage.json 방법

//pakage.json
{
  ...(다양한 스크립트들),
  "proxy": "http://localhost:5000"  // 프록시 추가
}

pakage.json에 스크립트로 프록시를 추가하면 프록시 설정 끝
간단하쥬?

라이브러리 활용하기

http-proxy-middleware 라이브러리 설치하기

npm install http-proxy-middleware --save

src/setupProxy.js 파일 생성
src 폴더에 setupProxy.js 파일을 만듭니다. 이 파일이 존재하면 create-react-app에서 자동으로 인식하여 프록시 설정을 적용합니다.
프록시 설정 코드 추가

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    createProxyMiddleware({
      target: 'http://localhost:5000', // 백엔드 서버 주소
      changeOrigin: true,
    })
  );
};