클라이언트
vs 서버

누가 시키고 누가 만드나

세상 모든 웹·앱은 딱 두 역할로 나뉨.

클라이언트 — 요청하는 쪽임. 내 손에 든 폰·노트북, 그 안의 브라우저나 앱임.

서버 — 응답하는 쪽임. 어딘가에서 늘 켜져 있는 컴퓨터임. 시키면 만들어 내줌.

이름은 어려워 보여도 단순함. 시키는 쪽 / 만드는 쪽. 그게 전부임.

식당으로 외워두기

헷갈리면 식당을 떠올리셈. 한 번에 외워짐.

손님이 클라이언트임. 메뉴를 보고 주문함. 직접 요리는 안 함.

주방이 서버임. 주문을 받아 요리해서 내줌. 재료(데이터)도 거기 있음.

손님은 주방이 어떻게 만드는지 모름. 완성된 음식만 받음. 웹도 똑같음 — 화면만 받지, 서버 속은 안 보임.

요리를 안 함 ≠ 아무것도 안 함. 손님도 할 일이 있음 (다음 장).

서버는 왜 안 꺼지나

내 노트북은 덮으면 꺼짐. 서버는 안 그럼.

누군가 새벽 3시에 그 사이트를 열 수도 있음. 그때 서버가 꺼져 있으면 응답을 못 함.

그래서 서버는 24시간 켜진 채 데이터센터에 박혀 있음. 손님을 항상 기다림.

모양은 그냥 컴퓨터임. 특별한 마법 상자가 아님. 늘 켜져서 응답만 하는 역할을 맡았을 뿐임.

한 번의 왕복, 단계별로

주소를 치고 화면이 뜨기까지, 일은 양쪽을 오감.

손님(클라이언트)이 먼저 시킴 → 주방(서버)이 만들어 보냄 → 다시 손님이 받아서 봄.

단계를 하나씩 눌러 보셈. 그 일을 누가 하는지 그쪽에 불이 들어옴.

중요한 건 일하는 주체가 계속 바뀐다는 점임. 한쪽이 다 하는 게 아님.

한 화면에 둘이 섞여 있음

실제 쇼핑몰 화면 하나를 쪼개 보면 둘이 같이 일함.

버튼 눌렀을 때 색이 바뀌는 것 — 굳이 주방까지 안 감. 손님이 그 자리에서 처리함.

근데 상품 목록·가격·재고 — 이건 서버에 물어봐야 함. 데이터가 거기 있으니까.

그래서 개발할 때 늘 묻게 됨. "이 일은 클라가 할까, 서버가 할까?" 그 감이 잡히면 절반은 온 거임.

// 클라이언트(손님)가 그 자리에서 하는 일
button.onclick = () => button.classList.toggle("on")

// 서버(주방)에 물어봐야 하는 일
const res = await fetch("/api/products")
const list = await res.json()  // 상품·가격·재고