🌐 웹 개발 입문자를 위한 기본 개념: '웹(Web)'이란 무엇일까?

안녕하세요, 순간을 기록하는 개발자입니다. 웹 개발의 세계에 첫발을 내딛는 여러분을 진심으로 환영합니다.

저는 여러분이 기본 개념에 충실하고, 정석적인 지식을 통해 흔들림 없는 성장을 이루도록 돕기 위해 이 글을 작성 하였습니다. 그 첫 시작으로, 모든 웹 개발의 토대인 '웹(Web)'이 정확히 무엇인지, 그리고 웹이 어떻게 움직이는지에 대해 가장 쉽고 명확하게 파헤쳐 보겠습니다.

1. 웹(Web)의 정의: '정보의 거미줄'을 이해하다

웹은 흔히 "월드 와이드 웹 ( $\text{World Wide Web, WWW}$ 을 줄여 부르는 말입니다. 웹은 인터넷이라는 물리적인 통신망 위에서 작동하는 정보 공유 시스템입니다. 전 세계에 흩어져 있는 무수히 많은 문서, 이미지, 영상 등의 정보를 서로 연결하여, 사용자가 주소를 통해 쉽고 편리하게 접근할 수 있도록 만든 거대한 가상의 정보 공간입니다.

📌 웹과 인터넷의 차이: 이 기본부터 잡고 갑시다

웹 개발 입문자들이 가장 먼저 정확하게 구분해야 할 기본 개념입니다.

구분	역할	비유
인터넷 ( $\text{Internet}$ )	전 세계 컴퓨터를 물리적으로 연결하는 거대한 통신망 그 자체입니다. (하드웨어 인프라)	전기가 통하는 전선
웹 ( $\text{Web}$ )	인터넷망 위에서 작동하는 정보 공유 서비스이자, 데이터를 검색하고 접근하는 시스템입니다. (소프트웨어/서비스)	전선(인터넷)을 통해 전송되는 방송/통신

인터넷이 기반 시설이라면, 웹은 그 시설을 이용해 데이터를 주고받는 서비스라고 이해하시면 쉽습니다.

2. 웹의 작동 원리 (개론): 클라이언트와 서버의 약속

웹이 움직이는 원리는 간단합니다. 바로 "클라이언트(Client)"와 "서버(Server)"라는 두 주체 간의 상호작용, 즉 요청(Request)과 응답(Response)입니다.

(1) 클라이언트 (Client): 정보를 '요청'하는 사용자 측

역할: 웹 브라우저(Chrome, Safari 등)를 통해 웹 페이지, 데이터 등의 정보를 서버에 요청하는 주체입니다.
실제 행동: 브라우저 주소창에 URL을 입력하거나, 페이지 내의 링크를 클릭하는 모든 행위가 클라이언트의 요청입니다.

(2) 서버 (Server): 정보를 '응답'하는 저장소

역할: 웹 페이지를 구성하는 모든 파일( $\text{HTML, CSS, JavaScript}$ )과 데이터를 저장하고 관리하는 전문 컴퓨터입니다.
실제 행동: 클라이언트의 요청을 받으면 해당 정보를 찾아서 HTTP라는 정해진 규칙에 따라 클라이언트에게 되돌려줍니다.

쉽게 비유하자면, 클라이언트(나)가 서점(서버) 직원에게 특정 책( $\text{HTML}$ 파일)을 달라고 요청하면, 직원은 책을 찾아서 나에게 건네주는 행위와 같습니다.

3. 웹을 이루는 3가지 핵심 기본 요소 (정석)

웹은 단순히 클라이언트와 서버만 존재하는 것이 아닙니다. 이들이 서로 소통하고 정보를 표현하기 위해 약속된 세 가지 기본 원칙이 존재합니다. 웹 개발을 시작했다면 이 기본 요소들의 이름과 역할을 정확히 알고 넘어가야 합니다.

① $\text{URL}$ (Uniform Resource Locator): 웹 주소

역할: 웹상에 존재하는 고유한 정보의 위치를 나타내는 주소입니다.
정석 풀이: 웹 개발자는 URL을 통해 서버에 어떤 정보를 '요청'할지 정확하게 지정합니다. URL은 정보를 찾는 길잡이인 동시에, 웹 페이지의 이름표 역할을 합니다.

② $\text{HTTP}$ (HyperText Transfer Protocol): 통신 규약

역할: 클라이언트와 서버가 하이퍼텍스트(Hypertext)를 주고받기 위해 사용하는 통신 규칙입니다.
정석 풀이: 웹상에서 요청과 응답이 어떤 방식으로 이루어져야 하는지에 대한 모든 규칙을 HTTP가 정의합니다. 예를 들어, 웹에서 데이터를 가져올 때는 $\text{GET}$ 요청을, 데이터를 서버에 보낼 때는 $\text{POST}$ 요청을 사용해야 한다는 규칙이 HTTP에 포함됩니다. 웹 개발의 기본은 이 $\text{HTTP}$ 규칙을 이해하고 따르는 것에서 시작합니다.

③ $\text{HTML}$ (HyperText Markup Language): 웹 문서 언어

역할: 웹 페이지의 "구조와 내용(뼈대)"을 정의하는 마크업 언어입니다.
정석 풀이: 서버가 클라이언트에게 보내주는 정보의 대부분은 $\text{HTML}$ 문서 형태입니다. 브라우저는 이 $\text{HTML}$ 코드를 해석하여 텍스트, 이미지, 링크 등을 우리가 보는 웹 페이지 화면으로 '렌더링(Rendering)'하여 보여줍니다. $\text{CSS}$ (디자인)와 $\text{JavaScript}$ (동작)가 아무리 복잡해도, 그 모든 것은 HTML이라는 뼈대 위에서 작동합니다

⚛️ 리액트 개발 환경 세팅: CRA vs Vite