웹(Web)이란?

웹의 개념과 동작 구조

---

1. 웹(Web)이란?

**웹(Web)**은 인터넷을 통해 정보를 주고받을 수 있는 시스템입니다. 우리가 방문하는 웹사이트(예: 네이버, 구글, 티스토리)는 모두 웹의 일부입니다.
웹에서는 주로 **HTML(문서 구조), CSS(디자인), JavaScript(동적 기능)**을 사용하여 화면을 구성하며, HTTP(또는 HTTPS) 프로토콜을 통해 데이터를 주고받습니다.

---

2. 웹의 동작 과정 

웹사이트에 접속할 때, 브라우저는 여러 단계를 거쳐 요청을 서버로 보내고 응답을 받아 화면을 표시합니다.

📌 웹 동작 과정 

1️⃣ 사용자가 브라우저에 https://myblog.tistory.com 입력
2️⃣ 브라우저는 **DNS 서버(Domain Name System 서버)**에 myblog.tistory.com의 IP 주소를 요청
3️⃣ DNS 서버가 해당 도메인의 IP 주소(예: 123.45.67.89)를 찾아 반환
4️⃣ 브라우저는 해당 IP 주소의 **웹 서버(Web Server)**에 접속하여 웹페이지 요청(HTTP 요청) 전송
5️⃣ 서버는 해당 페이지를 처리하고, HTML/CSS/JS 등의 데이터를 브라우저에 반환(HTTP 응답)
6️⃣ 브라우저는 받은 데이터를 해석하여 화면에 표시

DNS 서버란?
사람이 기억하기 쉬운 **도메인(예: www.naver.com)**을 실제 인터넷에서 사용하는 **IP 주소(예: 123.45.67.89)**로 변환하는 역할을 하는 서버입니다.
우리가 www.google.com을 입력하면, DNS 서버가 해당 주소의 실제 IP를 찾아 브라우저에 전달합니다.

---

3. 클라이언트-서버 구조

웹은 크게 **클라이언트(Client, 사용자 측)**와 **서버(Server, 데이터 처리 측)**로 나뉩니다.

✅ 클라이언트(Client)

• 사용자가 직접 사용하는 **웹 브라우저(Chrome, Edge, Firefox 등)**이 대표적인 클라이언트입니다.
• 사용자의 요청을 서버로 전송하고, 받은 데이터를 화면에 표시하는 역할을 합니다.

✅ 서버(Server)

• 사용자의 요청을 처리하고, 데이터를 응답하는 컴퓨터(프로그램 포함)
• 서버는 요청에 따라 HTML, JSON, 이미지, 동영상 등 다양한 데이터를 제공할 수 있습니다.
• 대표적인 웹 서버:
  • Apache, Nginx (정적인 파일 제공 가능)
  • Tomcat, Spring Boot, Node.js (동적인 데이터 처리 가능)

---

4. 백엔드 중심 개발과 프런트엔드 중심 개발의 차이

1️⃣ 백엔드 중심 개발 (서버 사이드 렌더링, SSR)

• 서버에서 HTML을 완성하여 클라이언트에 제공하는 방식입니다.
• 사용자가 페이지를 요청하면, 서버가 데이터를 가져와 완성된 HTML 파일을 만들어 반환합니다.
• 예제: JSP(Java), PHP, Django(Python), Spring MVC(Java)
• 특징
  • ✅ SEO(검색 엔진 최적화)에 유리함 (구글, 네이버 검색에 잘 노출됨)
  • ✅ 초기 로딩 속도가 빠름 (바로 완성된 HTML 제공)
  • ❌ 서버 부하가 증가 (사용자가 많아지면 처리 속도가 느려질 수 있음)

🔹 서버에서 "blogView.jsp"라는 HTML을 완성해서 반환
🔹 브라우저는 받은 HTML을 그대로 표시

---

2️⃣ 프런트엔드 중심 개발 (클라이언트 사이드 렌더링, CSR)

• 서버에서 HTML이 아닌 **데이터(JSON)**만 제공하고, 브라우저에서 JavaScript가 데이터를 받아 화면을 구성하는 방식입니다.
• 프레임워크: React, Vue, Angular + Spring Boot(Node.js)
• 특징
  • ✅ 서버 부하가 적음 (서버는 데이터를 제공할 뿐, HTML을 직접 생성하지 않음)
  • ✅ 사용자가 빠르게 페이지 이동 가능 (JavaScript로 비동기 처리 가능)
  • ❌ 초기 로딩 속도가 느릴 수 있음 (브라우저에서 JavaScript 실행 필요)
  • ❌ SEO가 불리할 수 있음 (검색 엔진이 JavaScript 실행을 제대로 하지 못할 수도 있음)

🔹 서버에서 "완성된 HTML"을 주는 것이 아니라, JSON 데이터만 줌
🔹 JavaScript가 JSON 데이터를 받아 화면을 구성함

---

📌 백엔드 중심(SSR)과 프런트엔드 중심(CSR)의 차이 정리

SSR (서버 렌더링)CSR (클라이언트 렌더링)

렌더링 위치	서버에서 HTML 생성	브라우저에서 HTML 생성
초기 속도	빠름	느릴 수 있음
사용자 경험(UX)	페이지 새로고침 필요	부드러운 전환(비동기)
SEO	검색엔진 최적화 쉬움	검색엔진 최적화 어려울 수 있음
기술 스택	Spring MVC, Django, PHP	React, Vue, Angular

---

5. 결론

• 웹은 클라이언트(사용자 측)와 서버(데이터 제공 측)가 통신하면서 동작합니다.
• DNS 서버는 도메인 주소를 실제 IP 주소로 변환하여 사용자가 원하는 웹사이트를 찾을 수 있도록 합니다.
• 개발 방식에는 **백엔드 중심(SSR)**과 **프런트엔드 중심(CSR)**이 있으며, 각각의 장단점이 있습니다.
• SEO가 중요한 블로그, 뉴스 사이트는 SSR이 유리하고, 빠른 UX가 중요한 웹앱은 CSR이 적합합니다.