프론트엔드와 백엔드의 통신 완벽 이해하기 (REST API & CORS)

프론트엔드와 백엔드의 통신 완벽 이해하기 (REST API & CORS)

풀스택(Full-stack) 개발자의 시야를 갖추려면 클라이언트(화면)와 서버(데이터)가 어떤 규칙으로 대화하는지 정확히 알아야 합니다. 백엔드에서 만든 매칭 플랫폼 데이터가 어떻게 프론트엔드로 전달되는지 그 흐름을 파헤쳐 봅니다.

1. 현대 웹의 대화 수단: RESTful API와 JSON

과거에는 서버가 HTML 화면을 직접 만들어 던져주었지만, 이제는 철저히 분리되어 있습니다. 프론트엔드(React 등)는 뼈대만 가지고 있고, 백엔드(FastAPI 등)에 API 요청을 보내 알맹이 데이터만 받아옵니다. 이때 데이터를 담는 국제 표준 규격 박스가 바로 JSON(JavaScript Object Notation)입니다.

• 요청(Request): GET /api/projects/1 (1번 프로젝트 정보 좀 줘!)
• 응답(Response): {"id": 1, "title": "개발자 매칭 플랫폼 만들기", "status": "모집중"}

2. 주니어의 주적, CORS(Cross-Origin Resource Sharing) 에러

프론트엔드와 백엔드를 따로 띄워놓고 통신을 시도하면 십중팔구 붉은색의 CORS 에러를 마주하게 됩니다. 이는 브라우저의 보안 정책 때문인데, 프론트(예: localhost:3000)와 백엔드(예: localhost:8000)의 '출처(Origin)'가 다르기 때문에 브라우저가 통신을 차단하는 것입니다.

3. FastAPI에서 CORS 에러 우아하게 해결하기

이 문제는 백엔드에서 "저 도메인은 안전한 녀석이니 통과시켜 줘!"라고 허가증(Header)을 발급해 주면 해결됩니다.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 프론트엔드의 주소를 명시적으로 허용 리스트에 추가
origins = [
    "http://localhost:3000",
    "https://my-dev-match.com"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE"], # 허용할 HTTP 메서드
    allow_headers=["*"],
)

4. 마무리

CORS 설정과 HTTP 상태 코드(200, 400, 500 등)의 의미만 정확히 알아도 프론트엔드 개발자와의 협업 효율이 200% 상승합니다. 네트워크의 기초를 탄탄히 다져보세요!