"개발 모드에선 100% 완벽하게 작동했는데요?"
그 말, 배포 환경 앞에선 무력하다는 걸 여러분도 아시죠?
이번엔 정말 ‘작동’은 했지만 데이터는 안 왔던 미스터리.
그래서 무려 반나절 동안 머리 싸매고 추적한 로그 로그 로그…
결론부터 말하자면?
엔드포인트 오타 + 개발 모드의 과잉 친절 + 배포의 차가움 = 디버깅 지옥
이 긴 여정, 벨로그에 소환합니다.
🛠️ 세팅 요약
| 항목 | 내용 |
|---|---|
| 프론트 | React + Vite |
| 백엔드 | HTTPS REST API |
| 데스크탑 앱 | Electron + electron-builder |
| API 통신 방식 | axios + Vite define 치환 + .env |
| 개발/배포 분기 | __API_BASE__ → env에서 치환 |
🧨 1. 사건 개요
Electron + React + Vite 조합으로 멋지게 GUI 앱을 개발하던 어느 날…
“개발에선 잘 되던 API 호출이 배포 후엔 아무 반응이 없었다.”
기분 좋게 electron-builder로 .exe를 빌드하고 실행했더니,
API는 침묵. 화면은 정지. 내 심장도 멈췄다.
🔍 2. 이상했던 점
- 엔진은 잘 실행됨 ✅
- Pipe 메시지 정상적으로 주고받음 ✅
- 근데 Axios API 요청만 안 감 ❌
- 심지어 콘솔 로그도 안 찍힘 ❌
이쯤 되면 “Electron 배포하면 CORS 문제 생기나?”,
“env 문제인가?”, “build 설정에서 뭘 빼먹었나?” 하는 의심이 차례로 들기 시작했습니다.…
🧪 3. 브레이크 포인트: 오타였다고?
개발 모드에선 잘 되던 이 코드:
axios.post(`${API_BASE}/@@@@@/rest/getAlwCmmnExePrgList.do`)배포 후에도 잘 될 줄 알았지. 하지만 실제 API는 이거였음:
axios.post(`${API_BASE}/@@@@/rest/getAllowWebList.do`)즉,
getAlwCmmnExePrgList.do→ ❌ 오타getAllowWebList.do→ ✅ 올바름
🧙♀️ 4. 개발 모드에서는 왜 괜찮았냐면요…
🌈 개발 모드 마법 세트
| 항목 | 내용 |
|---|---|
| Vite proxy | /@@@@@/rest → 실제 서버로 프록시 전달 |
| Mock Adapter | 요청 URL이 좀 틀려도 “있다고 친다” |
| 상대경로 호출 | 브라우저에서 보내면 Vite가 뒷처리함 |
👉 즉, 오타가 있어도 mock이 받아줌 → 데이터가 응답됨 → 난 문제를 눈치채지 못함...
잠깐! Vite Proxy가 뭐냐면요?
“개발 모드에서는 API 요청을 그냥 localhost로 보내도 잘 되던데요?”
그건 다 Vite의
proxy기능 덕분입니다.
🎭 프록시란?
프록시는 중간에서 대신 요청을 전달해주는 대리인입니다.
즉, React 앱(렌더러)이 아래처럼 요청하더라도:
axios.post('/@@@@@/rest/getAllowWebList.do', {...})브라우저는 그걸 http://localhost:3000/@@@@@/rest/getAllowWebList.do로 해석하고,
Vite dev server는 설정에 따라 실제 서버인 https://*******.com:8443로 요청을 자동 전달합니다.
🧪 개발 환경에서 Proxy가 해주는 일
// vite.config.ts
server: {
proxy: {
'/@@@@@/rest': {
target: 'https://*******.com:8443',
changeOrigin: true,
secure: false,
}
}
}위 설정이 있다면 /@@@@@@/rest/xxx.do로 오는 요청을
모두 https://*******.com:8443/@@@@@/rest/xxx.do로 프록시해주는 것!
😈 근데 배포(EXE) 모드에서는?
- Vite dev server가 없으니 proxy도 아예 작동 안 함.
- 상대경로(
/@@@@@/rest/...)로 호출하면 브라우저는 그냥file://에서 찾으려 하거나, 아예 URL을 못 찾음. - 즉, 프록시 없는 배포 환경에서는 절대경로(https://…)를 무조건 써야 함.
💡 그래서 왜 문제가 생긴 걸까?
- 개발 모드에서는
/####/rest/...→ Vite가 프록시로 넘겨줌 → 작동 - 배포 모드에서는 프록시 없음 → 요청이 날아가지 않거나, 404 에러
💥 5. 배포 후엔 왜 터졌냐면요…
🔥 배포(EXE) 모드의 진실
| 항목 | 내용 |
|---|---|
| Vite dev server 없음 ❌ | proxy 동작도 없음 |
| mock adapter 없음 ❌ | 전부 실제 서버로 바로 감 |
__API_BASE__는 실 URL로 치환됨 | 오타나면 바로 404 뜸 |
그러니까...
- 개발 모드에선 오타도 응답이 오지만,
- 배포 모드에선 진짜 서버가 404를 때려버림
🧯 6. 해결한 방법 총정리
| 해결 항목 | 내용 |
|---|---|
| ✅ 엔드포인트 오타 수정 | getAllowWebList.do로 정정 |
| ✅ 환경변수 재정비 | .env, .env.development 각각 구성 |
✅ define: { __API_BASE__ } 방식으로 치환 | 빌드시 API URL 자동 반영 |
| ✅ mock adapter 제거하고 실제 요청 테스트 | 배포 전에도 실제 백엔드 호출 확인 습관화 |
🤡 7. 나의 실수 모음 (반성의 표)
| 항목 | 실수 내용 |
|---|---|
| 엔드포인트 오타 | getAlwCmmnExePrgList.do → 잘못된 명칭 |
| mock에 너무 의존 | 오타도 통과되니 진짜 문제를 못 봄 |
| 개발용 proxy 신뢰 | 배포 환경에서 proxy는 없음! 절대 URL 필수 |
| 콘솔 확인 안함 | axios 요청 실패도 제대로 로깅 안 함 |
✨ 8. 얻은 교훈
“개발 모드는 착한 척할 뿐, 진짜 배포에서 모든 게 드러난다.”
- ✅ 엔드포인트는 반드시 백엔드 문서랑 대조해서 철자까지 정확히
- ✅ 배포 전에 mock 제거하고 실제 서버에 테스트
- ✅ Vite proxy는 개발 전용이라는 걸 잊지 말 것
- ✅ define 치환 방식으로 env 관리하면 실수 줄일 수 있음
🧠 덤: 내 애착 env 설정
# .env.development
VITE_API_BASE=http://localhost:3000
# .env (프로덕션)
VITE_API_BASE=https://********.com:844vite.config.ts
define: {
__API_BASE__: JSON.stringify(env.VITE_API_BASE),
}api.ts
const API_BASE = __API_BASE__;
export function getAllowedWebsites(...) {
return axios.post(`${API_BASE}/@@@@@@/rest/getAllowWebList.do`, ...);
}
🎉 마무리
이제는 .exe 빌드만 하면 먹통 되는 이유를 안다!
다음에 비슷한 상황이 오면 무조건 3가지를 먼저 확인하자:
- 엔드포인트 오타나 환경변수 설정 실수는 배포 전 실서버로 반드시 검증하자
- Vite define 치환은 빌드 시점에 고정되므로, 런타임 수정 불가
- mock, proxy는 개발을 편하게 해주지만, 배포와는 완전히 다르다
이게 바로 개발 모드의 마법이 배포 모드에서 재앙이 되는 메커니즘 입니다.
이 글이 비슷한 문제로 멘붕하는 분들께 도움이 되었으면 좋겠습니다 🙏
나처럼 안 헤매고 배포까지 쭉쭉 가세요! 🚀
