Client와 Server의 역할과 통신 과정

1. Client Side (Front-end)

클라이언트는 사용자가 직접 상호작용하는 웹 브라우저나 모바일 앱 등을 의미한다. 사용자 요청사항에 따라 서버에 필요한 데이터를 요청하고 서버로부터 응답을 받아 화면에 보여준다.

클라이언트의 주요 역할

사용자 인터페이스(UI) 제공 : 사용자에게 보여지는 화면을 구성한다. (버튼, 메뉴 등)
데이터 유효성 검사 : 서버로 데이터를 전송하기전에 입력값을 검증한다. (이메일 형식, 비밀번호 규칙 등)
서버와의 통신 : HTTP 요청을 생성하고 서버로부터 응답을 받아 처리한다. (응답 데이터를 화면에 표시)
임시 데이터 저장 : 쿠키, 로컬/세션 스토리지 등을 사용해서 브라우저에 데이터를 저장한다.

클라이언트 사이드 언어

HTML (HyperText Markup Language) : 웹 페이지의 레이아웃(뼈대, 기초)를 정의하는 언어.
CSS (Cascading Style Sheets) : 웹 페이지의 스타일(폰트, 색상 등)을 적용하는 언어
JavaScript : 웹 페이지에서 동적인 동작(버튼 클릭, 애니메이션 등)을 구현하는 “프로그래밍 언어”

2. Server Side (Back-end)

서버는 클라이언트의 요청을 처리하고 필요한 데이터를 제공하는 컴퓨터 프로그램 또는 장치이다. 서버는 클라이언트와 달리 사용자와 직접 상호작용하지 않으며, 클라이언트가 요청한 데이터를 처리하거나 저장하고, 그 결과를 제공한다.

서버의 주요 역할

요청 처리 : 클라이언트가 보낸 HTTP 요청을 수신하고 처리하여 응답을 생성한다.
비즈니스 로직 실행 : 클라이언트의 요청에 따라 사용자 로그인, 상품 구매 처리 등 특정 작업을 수행한다.
데이터 관리 : 데이터베이스와 연동하여 데이터를 저장, 조회, 수정, 삭제(CRUD) 작업을 수행한다.
보안 및 인증 : 사용자 인증(Authentication) 및 권한 확인(Authorization)을 통해 데이터를 보호한다

서버 사이드 언어

Java : 안정성과 보안성이 높아 대규모 웹 개발에서 주로 사용
PHP : 간단한 웹 페이지를 개발할 때 주로 사용
Node.js : 실시간으로 정보를 주고 받는 웹 페이지를 개발할 때 주로 사용
Python : 웹 개발, 데이터 분석, 머신러닝 등 다양한 분야에서 활용.

3. 클라이언트-서버 통신

클라이언트와 서버는 네트워크를 통해 서로 통신하며 주로 HTTP/HTTPS 프로토콜을 사용한다. 클라이언트는 요청(Request)을 보내고, 서버는 응답(Response)을 반환한다. 여기서 HTTP란 클라이언트와 서버 간에 통신을 할 수있도록 정해진 “규칙”이다.

통신 방식 종류

동기식 통신 : 클라이언트가 요청을 보낸 후 응답을 받을 때까지 대기한다. (일반적인 웹 페이지 로딩)
비동기식 통신 (AJAX) : 클라이언트가 요청을 보낸 후 응답을 기다리지 않고 다른 작업을 계속 수행한다
새로고침 없이 데이터 갱신이 필요할 때 사용 → 실시간 채팅, 검색 자동완성 등

통신 과정

예시) 쇼핑몰 상품 주문

클라이언트 요청 (Client → Server)

  사용자가 '나이키 운동화 A123' 상품 페이지에서 '구매하기' 버튼 클릭

서버에서 데이터베이스 조회 (Server → Database)

서버: "다음 정보들을 확인/처리해줘
- A123 상품의 재고 확인
- 해당 고객의 포인트 잔액 확인
- 새로운 주문 정보 생성"

데이터베이스 응답 (Database → Server)

데이터베이스: "확인 결과:
- A123 상품 재고 있음 (남은수량: 50켤레)
- 고객 포인트: 5,000점
- 주문번호 2024020001 생성 완료"

서버의 응답 (Server → Client)

서버: "주문이 성공적으로 완료되었습니다. 상태코드 201
{
    "주문번호": "2024020001",
    "상품명": "나이키 운동화 A123",
    "결제금액": "89,000원",
    "배송예정일": "2024-02-15"
    "적립예정포인트": "890점"
}"