스킬캠퍼스

오늘 끝나면

클라이언트 vs 서버

  • 클라이언트 vs 서버의 핵심 문제를 한 문장으로 설명한다
  • 오른쪽 실습에서 클라이언트이 어떻게 움직이는지 관찰한다
  • 다음 강의와 이어지는 한계를 말할 수 있다

실습 미션

누가 무엇을 하나 — 개발 멘탈모델의 핵심 이 문장이 실제로 무슨 뜻인지 실습에서 한 번 손으로 확인한다.

성공 조건

  • 실습의 기본값을 먼저 관찰
  • 입력값이나 모드를 한 번 이상 바꿔 결과 비교
  • 왜 결과가 바뀌었는지 한 문장으로 설명

개발 · Day 14

클라이언트
vs 서버

클라이언트는 시키는 쪽이고 서버는 만드는 쪽이다. 식당으로 치면 손님과 주방이다. 개발 지도의 뼈대가 되는 구분이다.

P.01개발 · Day 14

누가 시키고 누가 만드나

웹과 앱은 두 역할로 나뉜다.

클라이언트요청하는 쪽이다. 폰과 노트북, 그 안의 브라우저이 여기에 해당한다.

서버응답하는 쪽이다. 늘 켜져 있는 컴퓨터로, 시키면 만들어서 내준다.

요청하는 쪽 · 응답하는 쪽
요청하는 쪽클라이언트브라우저 · 앱📱응답하는 쪽서버늘 켜진 컴퓨터🖥️시킴만들어 줌시키는 쪽과 만드는 쪽, 그게 전부
P.02개발 · Day 14

식당으로 외워두기

식당으로 외워두면 헷갈리지 않는다.

손님이 클라이언트다. 메뉴를 보고 주문한다. 직접 요리는 하지 않는다.

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

손님은 주방이 어떻게 만드는지 모른다. 완성된 음식만 받는다. 웹도 똑같다. 화면만 받을 뿐 서버 속은 보이지 않는다.

손님 ↔ 주방
🙋손님= 클라이언트🍳주방= 서버주문음식손님은 요리법을 모른다, 완성된 음식만 받는다웹도 똑같다, 화면만 받을 뿐 서버 속은 안 보인다
P.03개발 · Day 14

서버는 왜 안 꺼지나

내 노트북은 덮으면 꺼진다. 서버는 그렇지 않다.

누군가 새벽 3시에 사이트를 열 때 서버가 꺼져 있으면 응답하지 못한다.

그래서 서버는 24시간 켜진 채 데이터센터에서 손님을 기다린다. 마법 상자가 아니라, 늘 켜져서 응답만 하는 역할을 맡은 컴퓨터다.

내 컴퓨터 vs 서버
내 노트북💤덮으면 꺼진다필요할 때만 켠다서버24시간 켜져 있다늘 기다린다새벽 3시에 누가 열어도, 서버는 켜져 있어야 응답한다마법 상자가 아니라, 안 꺼지는 역할을 맡은 컴퓨터일 뿐이다
P.04개발 · Day 14

한 번의 왕복, 단계별로

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

손님(클라이언트)이 먼저 시키고, 주방(서버)이 만들어 보내면, 다시 손님이 받아서 본다.

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

누가 무엇을 하나 · 직접 밟아 보기
요청-응답 실험실 · 지금 일하는 쪽에 불이 들어온다
손님
클라이언트
요청하는 쪽
브라우저 · 앱
● 지금 일하는 중
주방
서버
응답하는 쪽
늘 켜진 컴퓨터
○ 대기
1 / 6 단계, 지금 일하는 쪽: 클라이언트 (손님)
주소창에 google.com 입력, 요청 시작
식당으로 치면 → 손님이 메뉴판을 보고 주문을 정한다
한 번의 왕복 (요청 → 응답)
손님(클라이언트)이 시키고, 주방(서버)이 만들어 내준다. 늘 이 왕복이다
P.05개발 · Day 14

한 화면에 둘이 섞여 있음

쇼핑몰 화면 하나를 쪼개 보면 둘이 같이 일한다.

버튼을 눌렀을 때 색이 바뀌는 것은 주방까지 가지 않는다. 손님이 그 자리에서 처리한다.

반면 상품 목록과 가격, 재고서버에 물어봐야 한다. 데이터가 거기에 있기 때문이다.

그래서 개발할 때 늘 묻게 된다. "이 일은 클라가 할까, 서버가 할까?"

코드 보기, 손님 일과 주방 일의 갈림
// 클라이언트(손님)가 그 자리에서 하는 일
button.onclick = () => button.classList.toggle("on")

// 서버(주방)에 물어봐야 하는 일
const res = await fetch("/api/products")
const list = await res.json()  // 상품·가격·재고
클라이언트 일 · 서버 일
손님클라버튼 색 바꾸기그 자리서 처리한다손님클라입력칸 글자 보이기서버 안 간다주방서버상품 목록·가격서버에 물어본다주방서버로그인 확인·재고데이터 거기 있다

늘 묻게 된다. "이 일은 클라가 할까, 서버가 할까?"

3줄 요약

  1. 1누가 무엇을 하나 — 개발 멘탈모델의 핵심
  2. 2클라이언트 vs 서버은 코딩 기본 → 인터넷과 웹 → 프론트/백엔드 → 데이터 → 배포 흐름 안의 한 칸이다.
  3. 3개념을 외우는 것보다 입력을 바꾸면 무엇이 달라지는지 보는 것이 우선이다.

완료 전 점검

복습 카드

클라이언트

누가 무엇을 하나 — 개발 멘탈모델의 핵심

입력

프로그램이 받아들이는 값이나 사용자 행동

규칙

입력을 처리하는 코드의 절차