프록시란?

컴퓨터 네트워크에서 서버와 클라이언트 사이에서 요청과 응답을 중계하는 서버

프록시 종류

포워드 프록시

프록시 서버가 클라이언트 뒤에 위치하며 클라이언트가 서버의 주소를 기반으로 데이터를 요청하면 프록시 서버가 해당 서버에 연결하고 데이터를 가져옴

리버스 프록시

리버스 프록시는 웹서버/WAS앞에 위치하며 서버들을 제어하고 보호함. 클라이언트는 데이터를 가지고 있는 서버가 아닌 프록시 서버에 요청을 보냄. 이 경우, 클라이언트 입장에서는 리버스 프록시 서버는 보통의 서버로 인식합니다.

리액트에서 프록시 서버 활용

프록시 서버를 사용할 경우 React 앱에서 브라우저를 통해 API를 요청할 때, proxy 서버를 통해 백엔드 서버로 요청을 우회하여 보내게 됨. 그러면 백엔드 서버는 응답을 React 앱으로 보내고 , React앱은 응답을 브라우저에게 전달하게 됨.

사용법

package.json에서 요청을 보내는 서버의 도메인을 설정해 주면 간단하게 프록시 기능을 사용할 수 있다.

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
	"proxy" : "<http://localhost:4000>"
}

export async function getAllfetch() {
// 프록시 설정 전
    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}
// 프록시 설정 후
export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}