프록시는 클라이언트와 서버 사이에 위치하여 요청을 중계하는 서버로, 클라이언트의 IP 주소를 숨기고 대리로 요청을 전송해 주는 역할을 합니다. 사용자가 웹사이트에 접속할 때, 직접 서버와 통신하지 않고 프록시 서버를 통해 접속하면 프록시 서버가 사용자의 요청을 전달하고, 응답을 받아 되돌려 줍니다.
프록시는 이를 통해 보안과 프라이버시를 보호하며, 네트워크 성능을 최적화하거나, 접근을 제한하는 등의 다양한 기능을 수행할 수 있습니다.
역할
1) 보안과 개인정보 보호
프록시는 사용자의 IP 주소를 숨기고 대신 서버에 요청을 전달하므로, 사용자의 위치와 IP 주소를 보호할 수 있습니다. 특히 외부로부터의 공격을 방어하거나, 악의적인 웹사이트와의 연결을 차단할 때 유용합니다. 프록시 서버는 IP를 마스킹하여 익명성을 강화할 수 있습니다.
2) 네트워크 성능 개선
프록시 서버는 자주 요청되는 리소스를 캐싱하여 네트워크 성능을 개선합니다. 클라이언트가 동일한 리소스를 여러 번 요청할 때마다 서버에 직접 요청하지 않고, 프록시 서버에 캐시된 데이터를 제공하므로, 페이지 로딩 시간을 단축하고 네트워크 트래픽을 줄이는 효과가 있습니다.
3) 접근 제어 및 필터링
기업이나 학교 등 특정 네트워크에서는 프록시 서버를 사용해 접근을 제어하고 웹사이트나 콘텐츠에 대한 접근을 제한할 수 있습니다. 관리자나 네트워크 소유자는 프록시 설정을 통해 특정 사이트나 콘텐츠 유형에 대한 접근을 차단하거나 허용할 수 있습니다.
4) 로드 밸런싱
프록시는 여러 서버 간에 트래픽을 분산시키는 로드 밸런서로 사용될 수 있습니다. 이는 서버에 가해지는 부하를 줄이고, 다수의 요청을 여러 서버로 분산 처리하여 성능을 최적화할 수 있습니다.
종류
1) 정방향 프록시 (Forward Proxy)
정방향 프록시는 클라이언트가 직접 서버에 접근하지 않고, 프록시 서버를 통해 요청을 전달하는 방식입니다. 사용자의 IP를 숨길 수 있으며, 보안과 프라이버시 보호에 효과적입니다. 정방향 프록시는 개인이나 기업에서 주로 사용됩니다.
2) 리버스 프록시 (Reverse Proxy)
리버스 프록시는 클라이언트가 서버에 직접 요청하지 않고, 프록시 서버가 여러 대의 서버로부터 응답을 받아 클라이언트에게 전달하는 방식입니다. 이는 주로 서버 부하 분산, 보안 강화, 캐싱 등의 목적으로 사용됩니다. 리버스 프록시는 사용자가 실제 서버의 IP 주소를 알지 못하도록 보호하는 역할도 합니다.
3) 웹 프록시 (Web Proxy)
웹 프록시는 웹페이지 요청을 대리로 처리하는 프록시로, 주로 웹 브라우저에서 사용됩니다. 웹 프록시는 특정 웹사이트나 서비스에 접근할 때 IP 주소를 숨기고 익명으로 접속할 수 있게 하며, 주로 개인 사용자가 개인정보 보호를 위해 사용합니다.
4) 투명 프록시 (Transparent Proxy)
투명 프록시는 사용자가 프록시의 존재를 인지하지 못한 채 자동으로 트래픽을 프록시 서버를 통해 전달받도록 설정된 프록시입니다. 이는 주로 네트워크 관리자나 학교, 기업에서 접근을 제어하거나 모니터링 목적으로 사용합니다.
React에서 웹 프록시를 사용해 CORS 문제 우회하기
React로 개발할 때 CORS(Cross-Origin Resource Sharing) 문제로 인해 API 요청이 차단되는 경우가 자주 발생합니다. 특히, 다른 도메인의 서버와 통신할 때 클라이언트와 서버의 출처(origin)가 달라서 요청이 차단될 수 있습니다. 이를 해결하기 위해, 프록시 서버를 설정해 CORS 문제를 우회하는 방법을 활용할 수 있습니다.
1) package.json에 프록시 설정 추가
// package.json
{
"name": "my-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://api.example.com" // 프록시 설정 추가
}위에서 "proxy": "http://api.example.com"과 같이 설정하면, React 앱이 fetch('/users')와 같이 API 요청을 보낼 때 자동으로 프록시가 설정된 주소로 요청이 전송됩니다. 즉, http://localhost:3000/users로 보내는 요청이 http://api.example.com/users로 전달됩니다.
2) 프록시 설정 후 API 호출
// App.js
import React, { useEffect, useState } from 'react';
function App() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('/users') // 경로만 작성하면 프록시 설정이 적용됨
.then(response => response.json())
.then(data => setUsers(data))
.catch(error => console.error('Error fetching data:', error));
}, []);
return (
<div>
<h1>User List</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
export default App;