개발 환경에서 프론트-백 서버 분리 이유

1. 역할의 분리

• 프론트엔드(React) 개발 서버
  • 주로 npm start나 yarn start로 띄우는 Webpack/Vite 개발 서버
  • 핫리로드(Hot-Reloading), 소스맵, 빠른 빌드 최적화 등 개발 생산성에 특화
  • HTML/CSS/JS 파일을 브라우저가 바로 가져가서 실행
• 백엔드(Spring Boot 등) 서버
  • 비즈니스 로직, DB 연동, 인증·인가, API(REST)를 구현
  • 데이터 처리와 보안을 책임

이 둘을 분리하면

1. 프론트만 수정해도 → 빠른 화면 확인(전체 서버 재시작 불필요)
2. 백엔드만 수정해도 → API 로직 테스트 집중
3. 서로의 작업이 꼬이지 않고 독립적으로 개발·디버깅 가능

---

2. 개발 환경에서의 연동

1. 프론트 개발 서버(예: localhost:3000) →
2. 백엔드 API 서버(예: localhost:8080)

React 에서는 보통 package.json에 proxy 설정을 걸어서

// package.json 예시
{
  // …
  "proxy": "http://localhost:8080",
  // …
}

이렇게 하면 /api/... 요청이 자동으로 백엔드 서버로 프록시되어

// React 코드
fetch('/api/posts')  // 실제로는 localhost:8080/api/posts에 요청
  .then(res => res.json())
  .then(data => /* … */);

처럼 CORS 문제 없이 프론트 ↔ 백엔드 통신이 가능함

---

3. 프로덕션(실서비스) 배포 방식

개발과 달리 실제 서비스에선 하나의 서버(또는 CDN+API 서버)에서 통합 배포

1. npm run build 로 React 앱을 정적 파일(index.html, bundle.js 등)로 묶고
2. Spring Boot 같은 백엔드 서버의 정적 리소스 폴더(src/main/resources/static 등)에 복사
3. 같은 포트(예: 8080)로 GET / 요청 시 React 앱, GET /api/... 요청 시 API를 동시에 처리

이렇게 하면 사용자 입장에선 서버 하나로 보이지만, 안에서는

• 정적 콘텐츠 서빙
• API 요청 처리 두 역할이 분리되어 동작

---

4. 결론

• 개발 중엔 프론트(HMR, 빠른 컴파일)와 백엔드(API)를 따로 띄워서 생산성을 높인다.
• 실서비스(프로덕션) 배포 시에는 정적 빌드 파일을 백엔드와 통합해서 “서버 하나”처럼 운용할 수 있다