[TIL] 웹 기초 : 클라이언트와 서버에 대하여

TIL은 "Today I Learned"의 약자입니다. "오늘 내가 배운 것"이라는 뜻입니다. 새롭게 알게 된 흥미로운 사실, 정보, 또는 지식을 잊지 않기 위해 기록으로 남깁니다.  

 

학습 날짜 : 2024년 8월 26일 (월) 

---

0. 학습 목표

1. 클라이언트와 서버의 역할에 대해 이해한다.

 

---

1.  웹의 기본 동작 이해하기

웹의 기본 동작: 웹의 동작을 우체국에 비유해볼까요?

• 여러분(브라우저)이 친구(서버)에게 편지(요청)를 보냅니다.
• 친구(서버)는 여러분이 요청한 내용의 답장(HTML 또는 데이터)을 보냅니다.
• 여러분(브라우저)은 받은 답장을 읽고 이해합니다(렌더링).

HTML을 받는 경우:

• 네이버 웹페이지를 방문할 때를 생각해보세요.
• 여러분: "네이버 홈페이지 보여줘!" (주소창에 www.naver.com 입력)
• 네이버 서버: "여기 네이버 홈페이지 내용이야!" (HTML 파일 전송)
• 브라우저: "알겠어, 이걸로 페이지를 그릴게." (HTML 렌더링)

데이터만 받는 경우:

• 실시간 공연 예매 상황을 떠올려보세요.
• 여러분: "A5 좌석 상태 어때?" (특정 API에 요청)
• 서버: "A5 좌석은 현재 예매 가능해." (JSON 데이터 전송)
• 브라우저: "좋아, A5 좌석을 예매 가능으로 표시할게." (페이지 일부분만 업데이트)

개발자 도구로 살펴보기:

• 네이버 페이지에서 '메일' 메뉴를 "Mail"로 바꿔볼까요?
• 이렇게 바꾼 내용은 여러분의 컴퓨터에서만 보입니다.
• 페이지를 새로고침하면 원래대로 돌아오죠? 서버에서 다시 원본 HTML을 받아오기 때문입니다.

이렇게 웹은 여러분(브라우저)과 웹사이트 서버 사이의 대화로 이루어집니다. 여러분이 요청하면 서버가 응답하고, 브라우저는 그 응답을 여러분이 볼 수 있게 그려주는 거예요. 

---

 

2. 클라이언트와 서버 개념 정리

클라이언트 (Client) : 클라이언트는 서비스를 요청하는 쪽입니다. 웹에서는 주로 웹 브라우저를 말합니다.

•  역할:
  • 사용자의 입력을 받아 서버에 요청을 보냅니다.
  • 서버로부터 받은 데이터를 해석하고 사용자에게 보여줍니다.
•  예시:
  • 크롬, 파이어폭스, 사파리 등의 웹 브라우저
  • 모바일 앱

서버 (Server) : 서버는 클라이언트의 요청에 응답하여 서비스를 제공하는 쪽입니다.

• 역할:
  • 클라이언트의 요청을 받아 처리합니다.
  • 요청에 따른 데이터나 서비스를 제공합니다.
• 예시:
  • 웹 서버 (Apache, Nginx 등)
  • 데이터베이스 서버

서버와 클라이언트의 상호작용

• 클라이언트가 서버에 요청(Request)을 보냅니다.
• 서버는 요청을 처리하고 응답(Response)을 보냅니다.
• 클라이언트는 받은 응답을 해석하여 사용자에게 보여줍니다.

실제 예시: 웹페이지 로딩

1. 사용자가 브라우저(클라이언트)에 URL을 입력합니다.
2. 브라우저가 해당 URL의 서버에 페이지를 요청합니다.
3. 서버는 요청받은 페이지의 HTML을 브라우저에 보냅니다.
4. 브라우저는 받은 HTML을 해석하여 화면에 표시합니다.

개발 관점에서의 차이

• 클라이언트 사이드 개발:
  • 사용자가 직접 상호작용하는 부분을 다룹니다.
  • HTML, CSS, JavaScript를 주로 사용합니다.
• 서버 사이드 개발:
  • 데이터 처리, 보안, 데이터베이스 관리 등을 담당합니다.
  • PHP, Python, Java, Node.js 등의 언어를 사용합니다.

이렇게 서버와 클라이언트는 각자의 역할을 가지고 상호작용하면서 웹 서비스를 구성합니다. 클라이언트는 사용자와 가까운 쪽에서, 서버는 데이터와 가까운 쪽에서 작업을 처리한다고 이해하시면 됩니다.

 

 

---

3. 더 나아가기 

렌더링 : 렌더링은 HTML, CSS, JavaScript 등의 웹 리소스를 해석해서 사용자가 볼 수 있는 형태의 화면으로 만드는 과정입니다.

• 브라우저에서의 렌더링:
  • HTML을 파싱하여 DOM(Document Object Model) 트리를 만듭니다.
  • CSS를 파싱하여 CSSOM(CSS Object Model)을 만듭니다.
  • DOM과 CSSOM을 결합하여 렌더 트리를 만듭니다.
  • 렌더 트리를 기반으로 각 노드의 위치와 크기를 계산합니다(레이아웃).
  • 계산된 정보를 바탕으로 화면에 픽셀을 그립니다(페인팅)

• 렌더링의 중요성:
  • 사용자 경험: 빠른 렌더링은 웹사이트의 반응성을 높여 사용자 경험을 개선합니다.
  • 성능 최적화: 개발자들은 효율적인 렌더링을 위해 코드를 최적화합니다.

• 렌더링 유형:
  • 클라이언트 사이드 렌더링: 브라우저에서 JavaScript로 페이지를 그립니다.
  • 서버 사이드 렌더링: 서버에서 HTML을 생성하여 전송합니다.

렌더링은 웹 브라우저가 코드를 해석하여 시각적으로 표현하는 과정이라고 이해하시면 됩니다. 비유를 이용해 설명하자면, 요리 레시피(HTML, CSS, JS)를 보고 실제 요리(웹페이지)를 만드는 과정이라고 생각하면 됩니다.