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

우리는 지금까지 웹 브라우저에서 사용자에게 직접 보여지고 상호작용하는 부분인 프론트엔드(Frontend) 개발에 집중해왔습니다. HTML로 웹 페이지의 구조를 만들고, CSS로 스타일을 입히며, JavaScript로 동적인 기능을 구현하고, React와 같은 프레임워크로 복잡한 UI를 효율적으로 관리하는 방법을 학습했습니다. 또한 Fetch API를 통해 외부 데이터를 가져오는 기능도 이미 경험했습니다.

하지만 대부분의 현대 웹 애플리케이션은 단순히 클라이언트(브라우저)에서만 동작하는 것이 아닙니다. 사용자 계정 관리, 데이터 저장 및 조회, 비즈니스 로직 처리, 보안, 다른 서비스와의 연동 등 웹 애플리케이션의 핵심 기능을 수행하는 부분은 사용자 눈에 보이지 않는 곳, 즉 백엔드(Backend) 에서 이루어집니다. 백엔드는 애플리케이션의 "심장"과 같아서, 프론트엔드가 요구하는 데이터를 제공하고, 비즈니스 규칙에 따라 데이터를 처리하며, 데이터베이스와 상호작용합니다.

12장 "백엔드 기초와 API"에서는 백엔드의 기본 개념을 이해하고, 프론트엔드와 백엔드가 어떻게 통신하는지, 그리고 백엔드 개발에 사용되는 주요 기술과 API(Application Programming Interface)의 중요성에 대해 다룰 것입니다. 그 첫 번째 장으로, 웹의 가장 기본적인 작동 원리인 서버와 클라이언트의 관계를 명확히 이해하는 것부터 시작하겠습니다.

웹은 기본적으로 클라이언트-서버 모델(Client-Server Model) 에 기반하여 작동합니다. 이 모델은 정보를 요청하는 주체(클라이언트)와 정보를 제공하는 주체(서버)로 나뉘어 서로 통신하는 방식입니다.

클라이언트 (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) 라는 통신 규약을 사용하여 데이터를 주고받습니다. 이 과정은 다음과 같습니다.

요청 (Request)

사용자가 브라우저에서 웹 주소(URL)를 입력하거나, 링크를 클릭하거나, 버튼을 누르는 등의 행위를 합니다.
클라이언트(브라우저)는 이 행위를 HTTP 요청 메시지로 변환하여 서버로 전송합니다.
요청 메시지에는 URL (어떤 자원을 원하는지), HTTP 메서드 (어떤 동작을 원하는지 - GET, POST, PUT, DELETE 등), 헤더 (부가 정보), 바디 (데이터) 등이 포함될 수 있습니다.

처리 (Process)

서버는 클라이언트로부터 HTTP 요청을 받습니다.
서버는 요청 메시지를 분석하여 클라이언트가 원하는 것이 무엇인지 파악합니다.
필요에 따라 데이터베이스에 접근하여 데이터를 조회하거나 저장하고, 복잡한 비즈니스 로직을 수행합니다.

응답 (Response)

서버는 요청 처리 결과를 HTTP 응답 메시지로 구성하여 클라이언트에게 전송합니다.
응답 메시지에는 상태 코드 (요청 처리 결과 - 200 OK, 404 Not Found, 500 Internal Server Error 등), 헤더 (부가 정보), 바디 (클라이언트에게 전달할 데이터 - HTML, JSON, 이미지 등) 등이 포함될 수 있습니다.

렌더링 (Render)

클라이언트(브라우저)는 서버로부터 받은 HTTP 응답 메시지를 받습니다.
응답 바디에 HTML, CSS, JavaScript 파일이 포함되어 있다면 이를 파싱하여 웹 페이지를 화면에 렌더링합니다.
JSON 데이터와 같은 경우, JavaScript 코드를 통해 이 데이터를 가공하여 UI를 동적으로 업데이트합니다.

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

역할 분리와 협업

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

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

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

마무리하며

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

여러분은 웹에서 정보를 요청하는 주체가 클라이언트(웹 브라우저, 모바일 앱 등) 이고, 정보를 제공하는 주체가 서버(웹 서버, 애플리케이션 서버, 데이터베이스 서버 등) 임을 알았습니다. 또한, 이 둘이 HTTP 프로토콜을 사용하여 요청(Request)과 응답(Response)을 주고받는 일련의 통신 과정을 살펴보았습니다.

이러한 클라이언트-서버 모델에 대한 이해는 우리가 앞으로 배우게 될 백엔드 개발과 API 설계의 기초가 됩니다. 프론트엔드가 "어떤 데이터를 어떻게 요청해야 하는가"를 고민한다면, 백엔드는 "어떤 데이터를 어떻게 제공하고 처리해야 하는가"를 고민하게 될 것입니다.