프론트 서버 백엔드 서버 분리 할 수 있게 된 이유

---

✅ 1. REST API vs Ajax

구분	REST API	Ajax
정의	HTTP 기반의 서버 설계 방식	자바스크립트에서 비동기 요청을 보내는 기술
역할	백엔드가 어떤 URL에 어떤 방식으로 응답할지 정의	프론트엔드가 서버에 데이터를 요청하는 수단
형태	GET /users, POST /articles 등 리소스 중심 URL 설계	XMLHttpRequest, fetch() 등으로 요청 보냄
연관성	Ajax로 REST API 호출 가능	REST API는 Ajax 말고도 curl, Postman, axios, 앱, 서버 간 통신 등 다양한 방식으로 호출 가능
비유	“식당의 메뉴판과 주방 규칙”	“웨이터가 주문하는 방식”

🔹 핵심 차이

• REST API는 '무엇을 요청할 수 있나'에 대한 설계 규칙

• Ajax는 '어떻게 요청을 보낼 것인가'에 대한 클라이언트 기술

---

✅ 2. Fetch vs XMLHttpRequest

구분	fetch()	XMLHttpRequest
모던 브라우저 지원	✅ (ES6 이후 표준)	✅ (오래된 방식)
Promise 지원	✅ 기본 내장	❌ 직접 콜백 등록
코드 간결성	✅ 매우 깔끔	❌ 상태 추적 필요 (readyState, onreadystatechange)
Stream 처리	✅ 지원	❌ 미지원
취소 (Abort)	✅ AbortController	❌ 복잡하거나 미지원
사용 추천	✅ 최신 코드에 적합	⛔ 유지보수 또는 레거시 코드에만 적합

🔹 예시 비교

✅ Fetch

fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data));

❌ XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      console.log(data);
    }
  }
};
xhr.open('GET', '/api/users');
xhr.send();

---

✅ 3. CORS 설정으로 분리된 서버 간 통신하기

🔹 CORS (Cross-Origin Resource Sharing)

서로 다른 출처(origin) 간에 Ajax 요청을 허용할지 제어하는 브라우저 보안 정책

🔸 서로 다른 origin 이란?

출처 = 프로토콜 + 도메인 + 포트
예:
http://localhost:3000       ← 프론트엔드 개발 서버
http://localhost:8080       ← 백엔드 서버
→ 서로 다른 origin

🔹 해결 방법: 백엔드에 CORS 허용 설정

✅ Spring Boot 예시

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 API
                .allowedOrigins("http://localhost:3000") // 허용할 프론트 서버
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true);
    }
}

또는 간단하게 클래스 단에:

@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class MyApiController { ... }

---

✅ 4. 그럼 CDN은 프론트엔드 서버인가?

📌 답: CDN(Content Delivery Network)은 "정적 프론트엔드 리소스 서버" 역할을 합니다.

항목	설명
CDN에서 호스팅하는 것	HTML, CSS, JS, 이미지, 폰트 등 정적 리소스
역할	전 세계에 분산된 서버에서 리소스를 빠르게 제공
프론트엔드 서버인가?	네, 사용자의 브라우저에 보여지는 모든 프론트 리소스를 제공하므로 프론트 서버로 간주 가능
백엔드 API 서버와의 차이	CDN은 HTML/JS/CSS 등 리소스만 제공하고, API는 데이터를 주고받는 REST endpoint 역할

🔹 예: React 앱을 S3 + CloudFront로 배포했다면?

• CloudFront (CDN) = 정적 프론트 서버

• API 서버 (예: Spring) = 백엔드

• 둘은 도메인이 다르므로 CORS 설정 필요

---

✅ 전체 요약

개념	설명
REST API	백엔드가 제공하는 자원 및 HTTP 설계 방식 (URL, Method 기반)
Ajax	자바스크립트로 서버에 비동기 요청을 보내는 기술
fetch vs XMLHttpRequest	fetch는 최신 Promise 기반, XHR은 레거시
CORS	서로 다른 서버 간 통신을 허용하는 브라우저 정책 (서버에서 허용 필요)
CDN	정적 리소스를 빠르게 제공하는 글로벌 프론트엔드 서버 역할을 수행함

---