그동안의 api요청은 client.ts 와 같은 곳에서
const baseUrl = process.env.BASE_URL와 같이 주소를 관리해왔다.
여기서 production 인지 dev인지 체크하는 분기를 나누는 정도?
그동안 이런 식의 관리 방법을 타 프로젝트에서도 많이 확인했었고, 그닥 불편함을 느낀 것이 없었으나
오늘 http-proxy-middleware 이라는 라이브러리를 접하게 되었다.
이게 뭐인고 하니 api 호출 패턴에 따른 url 타겟을 변경해주는 것!
근데 프록시가 정확히 무슨 뜻이더라?
PROXY
프록시(Proxy)란?
프록시 패턴(proxy pattern)은 컴퓨터 프로그래밍에서 소프트웨어 디자인 패턴의 하나이다.
일반적으로 프록시는 다른 무언가와 이어지는 인터페이스의 역할을 하는 클래스이다. 프록시는 어떠한 것(이를테면 네트워크 연결, 메모리 안의 커다란 객체, 파일, 또 복제할 수 없거나 수요가 많은 리소스)과도 인터페이스의 역할을 수행할 수 있다.
출처: https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9D%EC%8B%9C_%ED%8C%A8%ED%84%B4
위키는 이렇게 쓰여있고, 다른 블로그들의 설명에 따르면 어떤 요청을 중간에서 대리해 제어해주는 것으로 파악된다.
음, 그럼 이거 인터셉터 같은 것 아니야?
인터셉터와 proxy는 요청을 제어한다는 요지는 같지만 다른 개념인 것 같다.
내가 이해하고 있는 인터셉터인 axios interceptor같은 경우 생성된 단일 client의 요청들을 가로채서 로직을 수행하는 것이고, proxy는 모든 요청을 받아 구분하여 다른 동작을 수행하는 객체로 변경한다.
그러다보니 더 세밀하게 객체지향적으로 많은 요청들에 대하여 병렬 수행이 가능해진다.
~ 라고 두루몽술하게 이해했고 관련 정보를 더 찾다보니 Interceptor vs Aop(proxy패턴 사용) 라는 키워드까지 찾아가게 되었는데, 자바 스프링 기반으로 설명되어있다보니 100% 이해하진 못했다.
http-proxy-middleware
다시 본론으로 돌아가서
내가 참고한 블로그 글.
https://hoons-up.tistory.com/26
출처가 다른 host나 port가 다른 api 요청 시 발생할 수 있는 cors를 방지하기 위해 proxy를 설정하는 것.
이라고 설명되어있으며 회사의 서비스에선 사이즈가 크다보니 다양한 api 주소를 갖고있어 이와 같은 라이브러리를 사용해 알맞은 요청을 쉽게 보낼 수 있도록 하였다.
예를 들어 '/fruit/apple' 와 '/fruit/orange'의 api url을 달리 해야 할 경우도 제어가 가능해진다.
만약 이를 axios만으로 처리 하려면 client를 이에 맞게 전부 생성하고 각 client에서 관리해야한다.
규모가 큰 서비스에서 많이 유용할 라이브러리!
요약
proxy는 요청을 중간에서 대리해 제어해주는 것interceptor과는 다르게 병렬로 더 세밀하게 제어 가능http-proxy-middleware는 host나 port가 다른 api 요청 시 발생할 수 있는 cors를 방지하기 위해 proxy를 설정하는 것.
