서버와 클라이언트 관계 이해

우리는 지금까지 사용자 화면을 직접 다루는 프론트엔드(Frontend) 개발에 집중해 왔습니다.

HTML, CSS, JavaScript, 그리고 프레임워크를 사용해 복잡한 UI를 구성하는 방법도 익혔습니다.

하지만 실제 서비스는 브라우저 안에서만 완성되지 않습니다.

계정, 데이터 저장/조회, 권한, 보안, 외부 연동처럼 핵심 기능은 대부분 백엔드(Backend)에서 수행됩니다.

즉, 프론트엔드가 사용자와 맞닿은 화면이라면, 백엔드는 그 화면이 제대로 동작하게 만드는 시스템의 중심입니다.

12장 백엔드 기초와 API에서는 프론트엔드와 백엔드가 어떤 방식으로 협력하는지, 그리고 API(Application Programming Interface)가 왜 중요한지 다룹니다.

첫 시작은 가장 기본인 클라이언트-서버 관계를 명확히 이해하는 것입니다.

웹은 기본적으로 클라이언트-서버 모델(Client-Server Model)에 기반하여 작동합니다.

이 모델은 정보를 요청하는 주체(클라이언트)와 정보를 제공하는 주체(서버)로 나뉘어 서로 통신하는 방식입니다.

HTTP 클라이언트·서버 책임 경계 — 상태 추적

HTTP 요청에서 route·입력·권한·업무 처리·응답 해석·UI로 담당자와 보유 정보가 바뀐다. 한 요청의 성공/실패 시점과 아직 실행하지 않은 처리를 구분할 가치가 있다.

DATA-FLOW · B99 WEB FUNDAMENTALS

HTTP 클라이언트·서버 책임 경계

요청은 method·URL·headers·body를 담고 서버는 routing·validation·authentication·authorization·business logic·data access를 거쳐 응답한다. 클라이언트는 loading·success·error 상태를 렌더링하지만 권한과 데이터 무결성은 서버가 강제한다.

네트워크는 호출 상자가 아니라 책임 경계다. 요청과 응답의 메타데이터가 양쪽 실패 처리까지 연결한다.

이 예의 조건

• 원도표의 전체 구조와 설명은 위 관계도와 표에서 유지합니다. 아래 인쇄 표에도 원도표의 관계·조건·라벨·설명·주석을 보존합니다.
• 두 관찰 칸의 위치는 고정입니다. 관찰 상태는 해당 순간의 값이며, 동작·이유는 그 조건에서의 판정과 변화 원인입니다. 독립 비교와 실패 분기는 별도 조건으로 읽고 모든 분기를 한 요청의 필수 실행 순서로 이어 읽지 않습니다.

전체 상태와 변화 근거

장면	현재 관찰값	설명	변화 이유
클라이언트 의도	현재 관찰값클라이언트: 입력·진행 표시 / 서버: 요청 전	설명화면이 요청을 시작한다	변화 이유UI 의도가 HTTP 계약으로 전달된다
서버 판정	현재 관찰값서버: 검증과 처리 / UI: 응답 대기	설명서버가 입력·권한·업무 조건을 확인한다	변화 이유클라이언트 검사만으로 서버 판단을 대신할 수 없다
응답 해석	현재 관찰값서버: 응답 전송 / UI: 성공 또는 오류 표시	설명클라이언트가 응답을 읽어 결과 화면을 고른다	변화 이유HTTP 결과와 UI 표현의 책임을 연결한다

HTTP 클라이언트·서버 책임 경계 — 상태 추적

HTTP 요청에서 route·입력·권한·업무 처리·응답 해석·UI로 담당자와 보유 정보가 바뀐다. 한 요청의 성공/실패 시점과 아직 실행하지 않은 처리를 구분할 가치가 있다.

DATA-FLOW · B99 WEB FUNDAMENTALS

HTTP 클라이언트·서버 책임 경계

요청은 method·URL·headers·body를 담고 서버는 routing·validation·authentication·authorization·business logic·data access를 거쳐 응답한다. 클라이언트는 loading·success·error 상태를 렌더링하지만 권한과 데이터 무결성은 서버가 강제한다.

네트워크는 호출 상자가 아니라 책임 경계다. 요청과 응답의 메타데이터가 양쪽 실패 처리까지 연결한다.

이 예의 조건

• 원도표의 전체 구조와 설명은 위 관계도와 표에서 유지합니다. 아래 인쇄 표에도 원도표의 관계·조건·라벨·설명·주석을 보존합니다.
• 두 관찰 칸의 위치는 고정입니다. 관찰 상태는 해당 순간의 값이며, 동작·이유는 그 조건에서의 판정과 변화 원인입니다. 독립 비교와 실패 분기는 별도 조건으로 읽고 모든 분기를 한 요청의 필수 실행 순서로 이어 읽지 않습니다.

전체 상태와 변화 근거

장면	현재 관찰값	설명	변화 이유
클라이언트 의도	현재 관찰값클라이언트: 입력·진행 표시 / 서버: 요청 전	설명화면이 요청을 시작한다	변화 이유UI 의도가 HTTP 계약으로 전달된다
서버 판정	현재 관찰값서버: 검증과 처리 / UI: 응답 대기	설명서버가 입력·권한·업무 조건을 확인한다	변화 이유클라이언트 검사만으로 서버 판단을 대신할 수 없다
응답 해석	현재 관찰값서버: 응답 전송 / UI: 성공 또는 오류 표시	설명클라이언트가 응답을 읽어 결과 화면을 고른다	변화 이유HTTP 결과와 UI 표현의 책임을 연결한다

---

클라이언트 (Client)란?

클라이언트는 서비스를 요청하는 쪽입니다.

웹 환경에서 클라이언트는 주로 사용자가 웹 애플리케이션에 접근하기 위해 사용하는 소프트웨어를 의미합니다.

• 웹 브라우저: Chrome, Firefox, Safari, Edge 등 우리가 인터넷에 접속할 때 사용하는 웹 브라우저가 가장 대표적인 웹 클라이언트입니다. HTML, CSS, JavaScript를 해석하여 웹 페이지를 화면에 렌더링하고, 사용자의 입력(클릭, 타이핑 등)을 받아 서버에 요청을 보냅니다.
• 모바일 앱: 스마트폰이나 태블릿에 설치된 네이티브 앱(iOS 앱, Android 앱)도 특정 서버에 데이터를 요청하고 응답을 받는 클라이언트가 될 수 있습니다.
• 데스크톱 애플리케이션: PC에 설치된 프로그램도 특정 서비스를 이용하기 위해 서버에 요청을 보낼 수 있습니다.
• API 클라이언트: Postman, Insomnia와 같은 도구는 개발자가 직접 HTTP 요청을 만들어서 서버 API를 테스트할 때 사용하는 클라이언트입니다.

클라이언트의 주된 역할은 사용자의 요청을 서버에 전달하고, 서버로부터 받은 응답(데이터, HTML 등)을 사용자에게 적절한 형태로 보여주는 것입니다.

---

서버 (Server)란?

서버는 클라이언트의 요청을 받아 처리하고, 그에 대한 응답을 다시 클라이언트에게 보내주는 컴퓨터 프로그램 또는 하드웨어를 의미합니다.

서버는 "서비스를 제공하는 자"라는 의미를 가집니다.

• 웹 서버: 웹 페이지 파일(HTML, CSS, JS, 이미지 등)을 저장하고 있다가 클라이언트(브라우저)의 요청이 오면 해당 파일을 전송합니다. Apache, Nginx 등이 대표적입니다.
• 애플리케이션 서버 (WAS: Web Application Server): 클라이언트의 요청을 받아 복잡한 비즈니스 로직을 수행하고, 데이터베이스와 연동하여 데이터를 처리하는 역할을 합니다. Java의 Tomcat, Node.js의 Express, Python의 Django/Flask 등이 여기에 해당합니다.
• 데이터베이스 서버: 대량의 데이터를 체계적으로 저장하고 관리하며, 애플리케이션 서버의 요청에 따라 데이터를 조회하거나 저장합니다. MySQL, PostgreSQL, MongoDB 등이 있습니다.

서버의 주된 역할은 클라이언트의 요청을 기다리고, 요청이 오면 이를 해석하여 적절한 처리(데이터 조회, 저장, 연산 등)를 수행한 후, 결과를 다시 클라이언트에게 응답하는 것입니다.

---

클라이언트-서버 통신 과정 (HTTP 프로토콜)

웹에서 클라이언트와 서버는 주로 HTTP(Hypertext Transfer Protocol)라는 통신 규약을 사용하여 데이터를 주고받습니다.

이 과정은 다음과 같습니다.

이러한 요청-응답 과정은 우리가 웹 서핑을 할 때마다 수없이 반복되며, 웹의 기본 작동 원리를 이룹니다.

---

역할 분리와 협업

클라이언트와 서버의 역할이 명확히 분리되면서, 현대 웹 개발에서는 프론트엔드 개발자와 백엔드 개발자가 각자의 전문 분야에 집중하여 협업하는 것이 일반적입니다.

• 프론트엔드 개발자: 주로 사용자 인터페이스(UI)와 사용자 경험(UX)을 담당합니다. 서버로부터 데이터를 받아와 화면에 표시하고, 사용자의 상호작용을 처리하여 서버에 요청을 보냅니다. (우리가 앞서 배운 내용들)
• 백엔드 개발자: 주로 서버, 데이터베이스, 비즈니스 로직, 보안, 인증 등을 담당합니다. 프론트엔드(클라이언트)가 필요로 하는 데이터를 효율적으로 제공하고, 서비스의 핵심 기능을 구현합니다. (이제부터 배울 내용들)

프론트엔드와 백엔드는 서로 다른 언어(JavaScript, Python, Java, PHP 등)와 프레임워크를 사용할 수 있지만, HTTP라는 공통된 통신 규약을 통해 데이터를 주고받으며 하나의 웹 애플리케이션을 완성합니다.

문제가 생겼을 때도 같은 기준을 사용하면 원인을 빠르게 좁힐 수 있습니다.

요청이 올바르게 만들어졌는지, 서버에 도착했는지, 응답이 의도대로 돌아왔는지를 차례로 확인합니다.

클라이언트와 서버의 책임을 분리해서 보면 화면 문제인지, 요청 문제인지, 서버 처리 문제인지 빠르게 좁힐 수 있습니다.

마지막으로 전체 흐름을 점검할 때는 책임 구간별 질문으로 원인을 좁힙니다.

---

서버-클라이언트 구조 정리

정리 단계에서는 요청과 응답의 책임 경계를 분리해 문제 원인을 빠르게 찾는 관점을 강조합니다.

이번 장에서는 웹 애플리케이션의 가장 근본적인 작동 원리인 서버와 클라이언트의 관계를 명확히 이해했습니다.

이번 절에서는 클라이언트가 정보를 요청하고 서버가 응답하는 구조를 정리했습니다.

HTTP 요청과 응답 흐름을 기준으로 웹 브라우저, 애플리케이션 서버, 데이터베이스 서버의 역할을 구분합니다.

이러한 클라이언트-서버 모델에 대한 이해는 우리가 앞으로 배우게 될 백엔드 개발과 API 설계의 기초가 됩니다.

프론트엔드가 어떤 데이터를 어떻게 요청해야 하는가를 고민한다면, 백엔드는 어떤 데이터를 어떻게 제공하고 처리해야 하는가를 고민하게 될 것입니다.