[react] react-create-app의 Proxy

django와 react를 통해 프로젝트를 진행중입니다.

아직 react가 낯설다보니 여러 문제를 겪고 있는데 대표적으로 CORS 와 cookie의 문제였습니다.

django에서 cors 설정

[Django] CORS, Cross-Origin Resource Sharing

react에서 withCredentials 설정

[React] axios 의 withCredentials

위에 두 포스팅을 통해 어떤 식으로 문제가 있었고 어떻게 해결하였는지를 정리하였습니다.

하지만 이번 포스팅에서 다룰 proxy 를 통해 위 설정들 없이도 제가 겪었던 문제를 한 번에 해결 할 수 있어 정리해보았습니다.

proxy

우선 proxy에 대해서 알아보겠습니다.

이에 대해서만 하나의 포스팅으로 다뤄도 부족하겠지만 간단히 설명하자면 proxy는 대리 라는 의미의 영단어입니다.

두 개 이상의 서버가 서로 통신을 주고 받을 때 그 사이에서 대리해주는, 중계해주는 것을 proxy라고 하며, 이 서버를 proxy 서버라고 합니다.

proxy 는 보안, 성능 등 여러 원인으로 사용되는데 이에 대해서는 추후 포스팅에서 자세히 다루도록 하겠습니다.

 

기존의 문제점

위에 포스팅에서도 다뤘지만 문제점을 한 번 더 짚고 넘어가도록 하겠습니다.

우선 django 와 react로 개발을 하면 서버가 최소 2개가 필요합니다.

django로 이루어진 backend 서버, react로 이루어진 client 서버죠.

현재 개발 환경이 두 서버는 다른 port 번호를 통해 식별이 됩니다.

일반적으로 django는 8000, react는 3000을 사용하게 되죠.

바로 여기서 문제가 발생합니다.

브라우저에서 localhost:3000에 접속을 하고 상황에 따라 리엑트는 백앤드서버로 부터 데이터를 받아오게 됩니다.

이 때 fetch, axios 등 여러 방법으로 백앤드서버와 통신을 할텐데 아래와 같은 예시가 있을 수 있습니다.

fetch('http://localhost:8000/api/login')

 

이 상태에서 개발을 끝내고 실제 실서버 환경으로 갈 때는 localhost:8000이 아니기 때문에 fetch의 코드들을 일일히 수정해줘야하는 문제가 생깁니다.

그러면 앞에 주소 없이 상대경로만으로 백앤드 서버에 접속하게 하면 좋지 않을까 라는 의문이 생깁니다.

이 의문을 해소해줄 수 있는 것이 바로 create-react-app 의 proxy 입니다.

 

create-react-app 의 proxy

이를 설정하는 방법은 아주 간단합니다.

package.json 에 해당 코드를 추가해줌으로서 설정할 수 있습니다.

// package.json

{
  proxy: 'http://localhost:8000'
}

 

이를 통해 기존의 절대 경로를 아래와 같이 상대경로로 작성해줄 수 있습니다.

fetch('/api/login')

 

이 proxy가 어떻게 동작하는지 알아봅시다.

기존에는 브라우저 입장에서 localhost:3000으로 react 서버와 통신을 주고 받고, localhost:8000으로 django 서버와 통신을 주고 받았습니다.

이렇게 할 수 있었던 이유는 절대경로를 적어주었기 때문에 어느 서버와 통신할지를 명확히 알 수 있었습니다.

하지만 상대경로로 적게 되면 이는 react 서버로 요청을 보내게 됩니다.

localhost:3000/api/login 로 말이죠.

react 입장에선 해당 url에 해당하는 내용이 없으므로 에러를 내야하지만 에러를 내기 전에 proxy에 적혀있는 정보를 확인해 그 주소에 해당되는 서버에 접속하게 됩니다.

즉, 기존에는 브라우저와 react 서버, 브라우저와 백앤드서버가 통신을 주고 받았다면, 이번에는 브라우저는 react 서버와 통신을 주고 받고, react가 이를 판단해서 백앤드 서버와 다시 통신을 주고 받게 되는 것입니다.

백앤드에서 응답을 받은 react 서버는 이를 다시 브라우저에 보내주는 방식이죠.

즉 백앤드서버가 할 일을 react 서버가 대신 해주고 있기 때문에 proxy로서 동작하는 것이죠.

이제 백앤드 서버의 port 나 ip 주소가 바뀌더라도 모든 fetch를 하나씩 수정해줄 필요 없이 package.json 의 수정만을 통해 해결이 가능합니다.

그리고 이제 브라우저는 react 서버와만 통신을 주고 받기 때문에 위에서 문제가 되었던 cors와 cookie의 문제도 해결이 가능합니다.