[React] Proxy 설정

React로 프론트 작업, Node.js로 백 작업을 하다보면 api를 사용할 때가 온다.

여기서는 axios로 설명을 하겠다.

axios로 user 정보를 가져오기 위해 get을 사용할 때는 보통 다음과 같이 설정해준다.

import axios from 'axios';

axios.get('http://localhost:5000/api/user')
  .then((Response)=>{console.log(Response.data)})
  .catch((Error)=>{console.log(Error)})

그런데 react는 3000포트에서 실행하게 되는데, 그럼 그럴 때마다 저렇게 http://localhost:5000/api/user 라고 적어줘야 하기는 여간 불편한 게 아니다.

그래서 나온 게 proxy이다.

프론트 package.json에서

  "proxy": "http://localhost:5000",

만 추가해주면

다음과 같이 상대경로로 손쉽게 사용할 수 있게 된다.

import axios from 'axios';

axios.get('/api/user')
  .then((Response)=>{console.log(Response.data)})
  .catch((Error)=>{console.log(Error)})