— Web Development 2026 · Client-Server Foundation

🌐 서버와 클라이언트

웹 통신의 기본 원리부터 HTTP 상태 코드, 메서드, 그리고 현대 웹의 필수 개념까지 완벽하게 정복합니다.

2026 Web Lecture

12 슬라이드

웹 통신 기초

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": 12345, "name": "홍길동", "email": "hong@example.com", "hobbies": [ "독서", "운동", "음악감상" ], "address": { "city": "서울", "zipcode": "12345" } }

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

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

✅ 배열과 객체 중첩 가능

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

09 — 처리 방식

동기 vs 비동기 통신

⏸️ 동기 (Sync)

응답을 받을 때까지 대기

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

예: 은행 입출금, 로그인

VS

⏯️ 비동기 (Async)

요청 후 다른 작업 가능

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

예: SNS 피드, 알림

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

10 — 보안 정책

🛑 CORS 정책

Cross-Origin Resource Sharing (다른 출처 간 리소스 공유)

🚫 왜 차단되나요?

브라우저는 보안을 위해 다른 도메인으로의 요청을 기본적으로 금지합니다 (SOP 정책).

✅ 어떻게 해결하나요?

서버에서 허용할 도메인을 Header에 명시해야 합니다.

Access-Control-Allow-Origin: https://myapp.com

🔑 핵심: 프로토콜, 도메인, 포트 중 하나라도 다르면 다른 출처로 간주됩니다.

11 — 마무리

✨ 전체 요약

역할: 클라이언트는 요청, 서버는 응답
상태 코드: 2xx(성공), 4xx(클라이언트 오류), 5xx(서버 오류)
메서드: GET/POST/PUT/PATCH/DELETE (CRUD 작업)
구성: Host, Port, Path가 모여 통신 주소(URL) 완성
패킷: Header(메타 데이터)와 Body(실제 데이터)로 구성
통신: 실시간성을 위한 비동기와 보안을 위한 CORS

🎉 수고하셨습니다!

웹 아키텍처의 핵심인 서버-클라이언트 개념을 마스터하셨습니다.