웹, 네트워크, 서버, 클라이언트 이해하기

 

WEB 이해하기

우리가 아무런 생각 없이 쓰는 WWW는 어떤 의미가 있을까요? 🤔

WWW는 World Wide Web의 약자로 “전 세계에 펼쳐져 있는 거미줄”이라는 의미입니다.

https://www.submarinecablemap.com/

• 전 세계는 모두 물리적인 선으로 연결되어 있습니다.
• 첫번째 그림의 파란 선들과 오른쪽에 보이는 것이 바로 해저 케이블입니다.
• 우리는 이 해저 케이블로 물리적으로 연결되어있어,
  이 해저 케이블을 따라 데이터를 주고 받으면서 네트워크 통신을 하는 것입니다.

“잠깐! 요즘엔 위성이라는 게 있는데요?”

• 위성 통신은 전세계 트래픽의 1%에 불과합니다.
• 90%이상은 모두 해저 광케이블이 해결하고 있습니다.

케이블이 닿지 않는 곳은 어떻게 할까요? 🤔 (히말라야, 극지방 또는 개발도상국 …)

→ 요즘 인터넷 안되면 살 수 없지 않나 😟

 

이러한 차이는 정보의 격차를 만들고 특정 계층의 정보의 빈곤으로 이어집니다.

 

이것을 해결하는 방법은 없을까요?

일론머스크

Starlink 프로젝트

이를 위해 일론 머스크는 Starlink라는 프로젝트를 고안하였습니다.

Starlink는 아주 작은 소형 위성으로 감싸서 위성끼리 데이터를 교환하는 프로젝트입니다.

 

하지만 이 프로젝트가 무조건 장점만 있는 것은 아닙니다.

Starlink Train

사진을 찍었을 때 열차처럼 찍힌 Starlink Train때문에 별을 보고싶어도 보기 힘들어질 수도 있습니다.

이 외에도 아직 다양한 사회적인 문제들이 남아있습니다.

 

---

 

💡 정리

우리가 웹 또는 인터넷이라고 하는 건 결국 전 세계의 컴퓨터가 서로 연결되어 있는 거대한 인프라를 이용하는 것입니다.

 

---

 

클라이언트 - 서버 구조

• 우리가 사용하는 대부분의 서비스는 클라이언트-서버 구조를 가지고 있습니다.
• 결국 클라이언트도 서버도 하나의 컴퓨터입니다. 

클라이언트(Client)

• 인터넷에 연결된 장치 특히, 웹 브라우저를 말합니다.
• → 서비스를 요청하는 주체 (사용자)
• 스마트폰, 스마트워치, 웹브라우저, 게임 클라이언트도 결국 다 하나의 클라이언트입니다.

서버(Server)

• 자원(Resource)을 가지고 있는 컴퓨터입니다.
• 요청을 처리하고 응답하는 주체입니다.

💡 우리가 구글 사이트에 접속한다는 것은?
→ 어딘가에 있는 구글 사이트를 가지고 있는 컴퓨터에게 ‘구글 홈페이지.html’을 달라고 요청하는 것!

📚 구글 사이트에 접속하는 과정을 정리하면!
1. 구글.html 파일을 요청함
2. 구글 서버가 요청을 받아서 구글.html 파일을 우리 컴퓨터에게 전달함
3. 우리 컴퓨터의 웹 브라우저가 구글.html 파일을 해석해서 이쁘게 보여줌

→ 구글 서버 (Server) - 웹 브라우저 (Client)

 

---

 

웹 브라우저와 웹 페이지

수많은 웹브라우저의 종류

 

웹 브라우저란?

• 인터넷에서 내가 원하는 페이지를 찾아서 보여주고 하이퍼링크를 통해 다른 페이지로이동할 수 있도록 도와주는 프로그램입니다.
• HTML 파일을 우리가 보는 이쁜 화면으로 바꿔주는 프로그램입니다. (렌더링, Rendering)

웹 페이지(Web Page)란?

• 특별한 정의를 기대했다면, 아쉽지만
• 우리가 보는 모든 화면 하나하나가 바로 웹 페이지입니다.

---

정적 웹페이지와 동적 웹페이지

 

정적 웹페이지(Static Web Page)

• 작성한 상태를 그대로 제공하는 웹 페이지입니다.
• 누가 응답을 받던 모든 상황에서 동일한 결과를 전달합니다.
• 우리가 작성한 HTML을 말합니다.

동적 웹페이지(Dynamic Web Page)

• 요청에 따라 보여주는 모습이 달라지는(수정되어) 웹 페이지입니다.
• 포털사이트에 A유저가 로그인했을 때와 B 유저가 로그인했을 때의 화면은 다릅니다. (받은 메일의 갯수, 가입한 카페…)
• 요청을 받아서 적절한 응답을 만들어주는 주체가 필요합니다.
  이 일을 해주는게 바로 ⇒ Django !

---

프론트엔드와 백엔드

 

🖥️ 백엔드 개발

• 보이지 않는 서버 측의 작업을 담당합니다.
• 데이터베이스와의 상호작용, 비즈니스 로직 처리, 보안, 사용자 인증 등을 처리합니다.
• 사용자가 요청한 데이터를 처리하고 그에 따른 결과를 생성합니다.
• 주로 서버 사이드 언어 및 프레임워크를 사용하여 개발되며, 데이터베이스와의 통신을 담당합니다.
• 주요 목표는 안정성, 보안성, 성능을 유지하면서 프론트엔드와의 원활한 데이터 교환을 지원하는 것입니다. 

 🖥️ 프론트엔드 개발

• 디자이너가 만든 웹 페이지를 기반으로 더 동적이고 상호작용적인 웹 애플리케이션을 개발합니다.
• 주로 JavaScript 프레임워크나 라이브러리를 사용하여 프론트엔드 기능을 개발하고, 데이터 처리와 상태 관리를 담당합니다.
• 백엔드와의 통신을 위한 API 요청 및 응답 처리, 데이터의 가공 및 표시, 사용자 입력에 대한 반응 등을 담당합니다.
• 주로 웹 애플리케이션의 비즈니스 로직과 상호작용적인 요소를 다루며, UI 컴포넌트의 상태 관리와 라우팅 등을 수행합니다.
• 프론트엔드 개발자는 보다 복잡하고 동적인 웹 애플리케이션을 만들기 위해 퍼블리셔와 협업하며, 웹 애플리케이션의 전체적인 아키텍처와 성능을 고려합니다. 

---

요청과 응답

클라이언트-서버 구조

 

웹 개발의 요청과 응답

 

📚 요청(Request)

• 클라이언트(웹 브라우저, 모바일 앱 등)가 서버에게 특정한 작업을 요청합니다.
• 클라이언트의 정보, 요청의 형식, 인증 정보 등을 포함합니다.
• 데이터를 포함하며, JSON이나 HTML 폼 데이터와 같은 형식으로 전달합니다.
• 클라이언트가 요청하는 것이 무엇인지 URL을 보면 파악할 수 있습니다.

📚 응답(Response)

• 서버가 클라이언트의 요청을 받고 처리한 후에 클라이언트에게 결과를 전송합니다.
• 결과에는 여러 가지 부가적인 정보를 포함합니다.
• HTML, JSON, XML 등의 형식일 수 있으며, 클라이언트가 요청한 작업에 따라 다양한 형태로 전송합니다. 

---

💡 Django 프로젝트를 만들고 App까지 만드는 것도 요청과 응답의 과정입니다!

 

python3 manage.py runserver 명령어는 전세계 어딘가에 있는 내 서버를 켜주는 역할을 합니다.

127.0.0.1:8000 을 클릭하는 것은,  해당 주소에 접근하는 요청을 보내고

웹페이지가 뜨는 과정은, 서버의 응답을 받은 것입니다!

---