일단 프록시가 뭔지부터 생각해보자.
영어 단어의 뜻은 대리인이라는 의미이다.
it에서 프록시라는 단어는 보통 중개서버를 표현하는 의미로 사용된다.
즉 내가 접속하려는 c라는 서버가 있고 나를 a라고 가정했을때
a-c로 접속을 해야하지만 중간에 프록시라는 b서버를 넣어서
a-b-c형태로 접속이 되는 형태이다.
왜 굳이 중간에 중개서버를 두어서 리소스를 낭비하는걸까.
이부분에서는 여러 요소가 있는데 보안, 성능이 주다.
보안적인 측면에서 a는 실제 자원이 있는 c서버의 정보를 알 수가 없다.그럼에도 불구하고 c서버의 자원을 요청할 수 있는 장점이 있다.
성능적인 측면에서 b서버에 a서버에서 주로 요청하는 자원을 캐싱하고 있다면 굳이 c서버에 요청할 필요없이 바로 b에서 자원을 줄수 있는 구조가 가능하므로 성능상에 이점도 생길 수 있다.
인터넷에 리액트 환경구축 하는 부분을 보면 프록시 설정해주는 부분이 있다.
리액트에서 프록시는 왜 쓰이는걸까?
사실상 리액트에서 사용되는 프록시는 조금 개념이 다르다.
일단 프록시를 사용하지 않았을때 문제가 되는 부분을 살펴보자.
axios.get(`http://localhost:3001/users?email=${email}`)
.then(res => {
console.log(res);
}axios로 요청을 보내는 흔한 소스코드이다.
프론트에서는 필수적으로 백엔드리소스 서버에 저런식으로 리소스를 요청하게 되는데 저런 Ajax기술로 요청할 할때는 도메인을 인자로받는 인터페이스가 필요하다.
저렇게 개발을 하면 리소스를 요청할 때마다 저렇게 도메인을 모두 적어주어야 하는데 문제는 현재 개발단계에서 사용하는 localhost도메인과 포트는 실제 프로덕션에서 사용하는 도메인과 다르다.
그럼 실제 배포가 될 때는 저 localhost도메인을 실제 운영서버의 도메인으로 모두 변경해주어야 하는데 그걸 일일이 수작업으로 해주는건 굉장히 심각한 문제가 될 수 있다.
이 문제를 해결해주는 것이 프록시이다.
일단 문제 해결이라는게 무엇인지를 생각해보자.
문제가 도메인과 포트를 ajax를 사용하는 부분마다 하드코딩을 하면 도메인이 변경되었을때 유지보수에 엄청난 어려움이 있다는것이다.
그럼 해결법은 하드코딩이 아닌 도메인과 포트를 소스에 직접 안받고 한곳에서 관리할 수 있으면 된다.
그럼 프록시를 사용해보자.
package.json
proxy: 'http://localhost:3001'끝이다. package.json파일 가장 아래에 추가하면 된다.
이제 위소스에서 도메인과 포트를 지워주자
axios.get(`/users?email=${email}`)
.then(res => {
console.log(res);
}리액트를 다시 실행해보면 똑같이 동작할 것이다.
그럼 이게 어떻게 가능한지 알아보자.
리액트 ajax동작 자체가 도메인이 없으면 자기 자신의 도메인이라고 가정하도록 되어있다.
즉 우리는 axios에서 도메인을 안적고 호출을 했으니 실제로 호출되는 url은 리액트 기본포트(3000)를 썻을때
http://localhost:3000//users?email=shson@velog.io
가 된다.
근데 실제로 저런 엔드포인트는 없다.
그럼 원래는 404에러가 떨어져야 하지만 에러핸들링 전에 proxy설정이 있는지 먼저 확인한다.
프록시 설정이 있다면 프록시설정에 있는 도메인을 사용하여 다시 호출을 시도한다.
이 부분때문에 프록시설정이라고 부른다.
리액트의 localhost:3000이 프록시처럼 실제 서버와의 연결을 중개해주기 때문이다.
결국 프록시 설정 한줄 추가하려고 길게도 썻다..
