— Web Development 2026 · Client-Server Foundation

🌐 서버와 클라이언트

웹 통신의 기본 원리부터 HTTP 상태 코드, 메서드, 그리고 FastAPI로 실제 서버 구현까지 한 번에

2026 DevOps

16 슬라이드

웹 통신 기초 + FastAPI

01 — 기초 개념

서버와 클라이언트란?

💻

클라이언트

(Client)

⇄

🖥️

서버

(Server)

클라이언트 (Client)

서비스를 요청하는 주체입니다. 웹 브라우저, 모바일 앱 등이 여기에 해당합니다.

서버 (Server)

클라이언트의 요청을 받아 서비스를 제공하는 주체입니다. 데이터를 저장하고 처리합니다.

02 — 쉬운 이해

🏪 실생활 비유

☕ 카페에서 커피 주문하기

손님 (클라이언트) → 주문서에 "아메리카노 1잔" 작성

바리스타 (서버) → 커피를 만들어서 제공

결과 → 손님이 커피를 받음

🍕 배달 앱 사용하기

앱 사용자 (클라이언트) → "피자 주문" 버튼 클릭

배달앱 서버 → 주문 정보를 저장하고 가게에 전달

결과 → 주문 확인 메시지 + 배달 진행

💰 ATM에서 돈 찾기

ATM 기기 (클라이언트) → 은행 서버에 출금 요청

은행 서버 → 잔액 확인 후 승인/거부

결과 → 현금 출금 또는 오류 메시지

03 — 상태 코드

✅ 성공 상태 코드 (2xx)

요청이 성공적으로 처리되었을 때 받는 코드입니다.

200 OK

요청이 성공적으로 처리됨

가장 일반적인 성공 응답

201 Created

새로운 리소스가 생성됨

POST 요청 성공 시

204 No Content

성공했지만 반환할 내용 없음

DELETE 요청 성공 시

202 Accepted

요청이 접수되어 처리 중

비동기 처리 시작

💡 2xx 코드는 모두 성공을 의미합니다!

04 — 에러 처리

❌ 오류 상태 코드 (4xx, 5xx)

클라이언트 오류 (4xx)

400 Bad Request

잘못된 요청 문법

401 Unauthorized

인증이 필요함

403 Forbidden

접근 권한 없음

404 Not Found

요청한 자원이 없음

서버 오류 (5xx)

500 Internal Server Error

서버 내부 오류

503 Service Unavailable

서비스 이용 불가

05 — 통신 방식

🌐 통신 양식 (HTTP 메서드)

클라이언트와 서버가 데이터를 주고받는 방식입니다.

GET    - 데이터 조회 요청 (예: 웹페이지 불러오기)
POST   - 새로운 데이터 생성 (예: 회원가입)
PUT    - 데이터 전체 수정 (예: 프로필 업데이트)
PATCH  - 데이터 일부 수정 (예: 이름 변경)
DELETE - 데이터 삭제 (예: 게시글 삭제)
    

💡 각 메서드는 목적에 맞게 사용되어야 시스템의 예측 가능성이 높아집니다.

06 — 주소 체계

🔗 URL 구조 (주소 구성)

https://www.example.com:443/api/users?page=1

1. 프로토콜 (Protocol)

https:// - 통신 규약 (http 또는 https)

2. 호스트 (Host) ⭐ 필수

www.example.com - 서버의 도메인 이름 또는 IP

3. 포트 (Port) ⭐ 필수

:443 - 서버의 특정 통신 관문 (기본 https=443)

4. 경로 (Path) ⭐ 필수

/api/users - 서버 내 리소스 위치

5. 쿼리 파라미터 (Query Parameter)

?page=1 - 서버에 전달하는 추가 옵션 정보

07 — 데이터 구조

📦 요청과 응답의 구조

HTTP 통신은 크게 Header와 Body로 구성됩니다.

📤 요청 (Request)

[Header]
- Content-Type
- Authorization (토큰)
- Cookie

[Body]
- 전송 데이터 (JSON 등)
        

📥 응답 (Response)

[Header]
- Status Code
- Content-Type
- Set-Cookie

[Body]
- 요청한 데이터 (HTML, JSON)
        

🔐 인증 정보는 어디에?

• 쿠키: Header의 Cookie 또는 Set-Cookie

• 토큰: Header의 Authorization (예: Bearer token)

08 — 데이터 포맷

📋 JSON 데이터 형식

현대 웹에서 가장 널리 쓰이는 데이터 교환 방식입니다.

{ "id": kb12345, "name": "코봉이", "email": "kobong@exmaple.com", "hobbies": [ "독서", "운동", "코딩" ], "address": { "city": "서울", "zipcode": "42" } }

✅ 사람이 읽기 쉬운 텍스트 형식

✅ 키(Key)-값(Value) 쌍 구조

✅ 배열과 객체 중첩 가능

✅ 모든 언어에서 범용적 지원

09 — 처리 방식

동기 vs 비동기 통신

⏸️ 동기 (Sync)

응답을 받을 때까지 대기

요청 📤
대기... ⏳
응답 📥
다음 실행 ▶️
        

예: 은행 입출금, 로그인

VS

⏯️ 비동기 (Async)

요청 후 다른 작업 가능

요청 📤
다른 작업 ▶️
응답 시 처리 📥
        

예: SNS 피드, 알림

💡 현대적인 웹 경험(UX)을 위해서는 비동기 통신이 필수적입니다.

10 — FastAPI

⚡ FastAPI란?

Python으로 서버(API)를 만들 수 있는 현대적인 웹 프레임워크입니다.

🐍 Python으로 서버를?

지금까지 배운 서버 역할 — 요청을 받고 응답을 돌려주는 것 — 을 Python 코드로 직접 구현할 수 있습니다.

🚀 왜 FastAPI인가?

이름 그대로 빠르고(Fast), 코드 작성도 빠르고, 실행 속도도 빠릅니다. 입문자도 몇 줄로 동작하는 서버를 만들 수 있습니다.

💡 FastAPI의 3가지 강점

• 자동 문서화: 코드를 작성하면 API 문서가 자동으로 생성됩니다

• 타입 힌트: Python의 타입 힌트로 요청/응답 데이터를 검증해줍니다

• 비동기 지원: async/await 문법을 기본으로 지원합니다

📦 설치 한 줄: pip install fastapi uvicorn

11 — FastAPI

🛠️ 서버 만들기

단 10줄로 동작하는 HTTP 서버를 만들 수 있습니다.

from fastapi import FastAPI

app = FastAPI()          # ① FastAPI 앱 생성

@app.get("/hello")       # ② GET /hello 경로 등록
def say_hello():
    return {"Hello": "FastAPI!"}

# 실행 명령어 (터미널)
uvicorn main:app --reload
    

📤 클라이언트 요청

GET http://localhost:8000/hello

📥 서버 응답

{"Hello": "FastAPI!"}

⚙️ uvicorn은 FastAPI 앱을 실제로 실행시켜 주는 ASGI 서버입니다. --reload 옵션을 붙이면 코드 수정 시 자동으로 재시작합니다.

12 — FastAPI

🔀 HTTP 메서드 구현하기

앞서 배운 GET · POST · PUT · DELETE를 FastAPI로 직접 만들어봅니다.

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()
users = {}   # 간단한 메모리 저장소

# 데이터 모델 정의
class User(BaseModel):
    name: str
    email: str

@app.get("/users/{user_id}")     # READ   - 조회
def get_user(user_id: int):
    return users.get(user_id, "없음")

@app.post("/users/{user_id}")    # CREATE - 생성
def create_user(user_id: int, user: User):
    users[user_id] = user
    return {"result": "저장 완료"}

@app.delete("/users/{user_id}")  # DELETE - 삭제
def delete_user(user_id: int):
    users.pop(user_id, None)
    return {"result": "삭제 완료"}
    

💡 {user_id}처럼 경로에 중괄호를 쓰면 URL에서 값을 자동으로 받아올 수 있습니다.
예) /users/42 → user_id = 42

13 — FastAPI

📌 파라미터 종류

클라이언트가 서버에 데이터를 전달하는 방법은 크게 3가지입니다.

🔑 경로 파라미터

URL 경로 안에 포함된 값

# URL: /users/42
@app.get("/users/{user_id}")
def get_user(user_id: int):
    return {"id": user_id}
        

❓ 쿼리 파라미터

URL 뒤 ?key=value 형태

# URL: /users/search?name=코봉이
@app.get("/users/search")
def search_user(name: str):
    return {"search_name": name}
        

📦 Request Body (POST)

JSON 형태로 전달 — Pydantic 모델로 자동 검증

# POST /users  Body: {"name":"코봉이","email":"kobong@example.com"}
class User(BaseModel):
    name: str
    email: str

@app.post("/users")
def create_user(user: User):
    return {"name": user.name, "status": "created"}
      

14 — FastAPI

📖 자동 문서화 — Swagger UI

FastAPI의 가장 강력한 기능 중 하나 — 코드를 작성하는 순간 API 문서가 자동 생성됩니다.

🌐 접속 주소

서버 실행 후 브라우저에서

http://localhost:8000/docs
# → Swagger UI (대화형)

http://localhost:8000/redoc
# → ReDoc (가독성 높은 문서)
        

✅ 문서에서 할 수 있는 것

API 목록 한눈에 확인
요청 파라미터 / Body 확인
브라우저에서 직접 API 테스트
응답 예시 자동 표시

🎯 왜 중요한가요?

프론트엔드 개발자나 팀원과 협업할 때 "이 API는 이렇게 쓰면 됩니다"라고 문서를 따로 작성할 필요가 없습니다. FastAPI가 자동으로 해줍니다!

15 — 마무리

✨ 전체 요약

🌐 서버 & 클라이언트

역할: 클라이언트는 요청, 서버는 응답
상태 코드: 2xx(성공) / 4xx(클라이언트), 5xx(서버) 오류
메서드: GET / POST / PUT / PATCH / DELETE
주소: Host + Port + Path의 조합 (URL)
패킷: Header(설정) + Body(실제 데이터)
통신: 비동기 처리가 핵심 개념

⚡ FastAPI 프레임워크

기능: 현대적이고 빠른 API 개발 도구
라우팅: @app.get 등으로 경로 설정
파라미터: 경로, 쿼리, Request Body 지원
문서화: 코드를 짜면 Swagger UI 자동 생성
검증: Python 타입 힌트로 데이터 자동 검증