이 글은 면접을 위한 CS 전공지식노트의 책을 읽고 학습 후 스터디 공유를 위한 글입니다.
프록시 패턴
프록시 패턴이란?
프록시 패턴은 대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 패턴

- 객체의 속성, 변환 등을 보완
- 보안, 데이터 검증, 캐싱, 로깅에 사용
- 프록시 서버로도 사용
프록시 서버 예시 1 → nginx

- 비동기 이벤트 기반의 구조, 다수 연결성 효과적으로 처리 가능한 웹서버, 주로 Node.js 서버 앞단에 프록시 서버로 사용.
- Node.js의 버퍼 오버플로우 취약점을 예방하기 위해 nginx를 앞단에 두는 것이 좋다.(Ryan Dahl, 노드 창시자) → 관련 코드 링크I(nginx에서 spdy프로토콜 사용시 버퍼 오버플로우 처리 부분)
- 실제 포트 은닉, 정적 자원 gzip을 이용한 압축, 메인 서버 앞단에서의 로깅 가능
💡 버퍼 오버플로우
버퍼 공간으로 할당된 메모리 공간을 벗어나는 경우, 이때 사용되지 않아야 할 영역에 데이터가 덮어씌워져, 주소, 값을 바꾸는 공격 발생 가능
프록시 서버 예시 2 → CloudFlare
전 세계에 분산된 서버를 통해 시스템의 콘텐츠를 전달할 수 있는 CDN 서비스
💡 CDN(Content Delivery Network)
사용자와 가까운 곳에 콘텐츠를 캐싱, 배포하는 서버 네트워크를 말한다.
이를 통해 웹 서버로부터 콘텐츠 다운로드 시간을 줄일 수 있다.

사용자, 크롤러, 공격자 중 공격자로 부터 보호 가능
- 이점 1: DDOS 공격 방어 의심 스러운 트래픽, 서비스 사용자가 접속하는 것이 아닌 시스템을 통해 오는 트래픽을 자동으로 차단. 거대한 네트워크 용량과 캐싱 전략으로 소규모 공격을 쉽게 막아낼 수 있다. 이러한 공격에 대한 방화벽 대시보드 제공)
CORS와 프런트엔드의 프록시 서버
프론트엔드 개발 시 백엔드 서버와 통신할 때 주로 CORS 에러를 마주치는데, 이를 해결하기 위해 프록시 서버를 만들기도 한다.
→ ex. 프론트에서 127.0.0.1:3000으로 테스팅 하는데, 백엔드 서버는 127.0.0.1:12010 → 포트번호가 달라 CORS 에러 발생
→ 프록시 서버를 둬 프론트엔드 서버에서 요청되는 오리진을 127.0.0.1:12010로 바꿔 해결

/api 요청은 users API, /api2 요청은 users API2에 요청 가능 | CORS 에러 해결 + API 서버 통신을 매끄럽게 함
프록시 패턴의 장점
- 보안 강화
프록시 패턴은 실제 객체에 대한 직접적인 접근을 제어하고, 필요한 경우에만 접근 권한을 부여함으로써 보안을 강화할 수 있다.
- 캐싱
프록시는 결과를 캐싱하여 동일한 요청이 반복될 때 미리 계산된 결과를 반환함으로써 성능을 향상시킬 수 있다.
프록시 패턴의 단점
- 복잡성 증가
패턴 도입 → 복잡성 증가
- 성능 감소
프록시를 통한 간접적인 접근은 항상 직접적인 접근보다 성능이 떨어질 수 있다.
- 디버깅 어려움
프록시를 사용하면 실제 객체에 대한 직접적인 접근이 제한되므로 디버깅이 어려워질 수 있다.
CORS란?
Cross Origin Resource Sharing의 약자
- Sop: Same Origin Policy(protocol + host(hostname + port), 같은 origin끼리만 송수신 할 수 있다. → 이를 어기면 CORS ERROR 발생

💡 오리진
URI에서 프로토콜 + 호스트 이름 + 포트의 조합
https://otter.com:1111/test 에서 https://otter.com:1111

axios의 설정 부분 → /stocks/~~ 라는 주소를 가지는 주소들의 Origin을 모두 target Origin으로 바꿔준다.
Preflight Request
- Simple Request: 메서드 = GET, HEAD, POST && Content-Type 헤더 = application/x-www-form-urlencoded, multipart/form-data, text/plain인 요청
- Simple Request가 아닌 경우 preflight request라고 해 option 메서드로 cors인지 한 번 더 요청 함 → 캐싱된다. Access-Control-Allow-Credentials 옵션을 true로 줘야한다.

CORS 관련사진 출처: CORS-저자분 유튜브 설명 영상