HMR이란, 웹소켓 업그레이드란? 개발용과 운영용 프록시의 차이

게시 2025/06/18

By SouthGlory

6 분읽는 시간

프론트엔드 개발을 하다 보면 “HMR”, “웹소켓 업그레이드”, “프록시 서버” 같은 용어들을 자주 접하게 됩니다. 특히 개발 환경과 운영 환경에서 사용하는 프록시 서버의 역할과 방식이 다른 경우가 많기 때문에, 이를 명확히 이해하는 것이 중요합니다.

이번 글에서는 HMR(Hot Module Replacement)과 WebSocket 업그레이드,

그리고 개발용 vs 운영용 프록시의 차이점을 정리해보겠습니다.

🔥 HMR(Hot Module Replacement)이란? ** HMR은 프론트엔드 개발에서 자주 사용되는 기능으로, **코드 변경 시 전체 페이지를 새로고침하지 않고 수정된 모듈만 즉시 교체하는 기능입니다. 📌 예시

// 코드 변경 시

↓

➡ 브라우저는 전체 페이지를 새로고침하지 않고 버튼 부분만 바뀐 UI로 갱신됩니다. 개발 효율과 UX 디버깅에 매우 유리하죠.

📡 WebSocket 업그레이드란? ** HTTP는 기본적으로 **요청-응답 기반의 단방향 통신입니다. 반면 HMR처럼 서버가 브라우저에 즉시 알림을 보내야 하는 상황에서는 WebSocket이라는 양방향 통신 채널이 필요합니다.

이를 위해 HTTP 요청을 업그레이드해야 하는데, 이 과정이 바로 WebSocket 업그레이드입니다.

WebSocket 업그레이드 헤더 예시

Upgrade: websocket
Connection: Upgrade

이러한 요청을 제대로 프록시하려면, 프록시 서버가 이 업그레이드 요청을 **특별히 처리할 수 있어야 합니다.**

🛠 개발용 프록시: http-proxy-middleware 개발 중에는 보통 프론트엔드와 백엔드가 **서로 다른 포트**에서 동작합니다. 이때 CORS 문제를 해결하고, 통합된 도메인 환경에서 개발하기 위해 프록시 서버를 두는 것이 일반적입니다. ** **✅ 개발용 프록시에 필요한 기능

항목	설명
WebSocket 지원	HMR을 위해 필수
빠른 재시작	코드 변경 즉시 반영 가능해야 함
미들웨어 확장	헤더 조작, 쿠키 변환 등 자유로워야 함

✅ 대표 도구: http-proxy-middleware

const { createProxyMiddleware } &#x3D; require(&#x27;http-proxy-middleware&#x27;);

app.use(&#x27;/&#x27;, createProxyMiddleware({
  target: &#x27;http://localhost:3001&#x27;,
  changeOrigin: true,
  ws: true // ✅ WebSocket 지원
}));

Node.js 기반이기 때문에 프론트엔드 개발 도구들과 궁합도 좋고, 설정도 간편합니다.

🏁 운영용 프록시: NGINX 운영 환경에서는 수많은 사용자의 요청을 **안정적이고 빠르게 처리**해야 합니다. 이럴 때는 http-proxy-middleware 같은 Node.js 기반 도구보다 **NGINX** 같은 전문 프록시 서버가 훨씬 유리합니다. ** **✅ 운영용 프록시에 필요한 기능

항목	설명
높은 안정성과 성능	수천~수만 요청 처리에 적합
HTTPS/SSL 처리	TLS 인증서 직접 처리 가능
캐싱, 압축	정적 리소스 속도 개선
무중단 설정 변경	reload 명령으로 서버 재시작 없이 설정 적용 가능

NGINX에서 WebSocket 프록시 설정 예시

location / {
    proxy_pass http://localhost:3001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

⚖️ 개발용 vs 운영용 프록시 비교 요약

항목	개발용 (http-proxy-middleware)	운영용 (NGINX)
설치 및 사용	Node.js에서 쉽게 구성	리눅스 or Docker에서 구성
HMR/WebSocket 지원	✅ 기본 지원	✅ 설정 필요
속도/성능	소규모에 적합	대규모 처리에 최적화
HTTPS 지원	❌ (보통 외부 처리)	✅ 직접 SSL 처리 가능
설정 유연성	자바스크립트 코드로 자유롭게	설정파일 기반, 정적 설정
운영 안정성	낮음 (Node crash 가능)	매우 높음 (고성능 프록시)

개발 중에는 빠르고 유연한 http-proxy-middleware가 가장 적합
운영에서는 안정성과 성능을 위해 반드시 NGINX 또는 Cloudflare Tunnel 등을 활용해야 함
HMR 기능은 웹소켓 업그레이드를 제대로 처리할 수 있는 프록시에서만 작동한다는 점을 기억하세요.

개발:
Next.js (3001) ← 프록시 (3000, http-proxy-middleware) ← www.domain.com
운영:
Next.js (3001) ← NGINX ← Cloudflare DNS / HTTPS

개발, 프론트엔드

웹 프론트엔드

인기 태그