[Dreamhack] Background: Web 강의 정리

웹의 기초 개념과 발전

1. 웹(Web)이란?

웹은 인터넷을 기반으로 구현된 서비스 중 하나로, HTTP라는 규칙을 통해 정보를 공유하는 서비스를 말한다.

여기서 정보를 제공하는 주체는 웹 서버(Web Server), 정보를 받는 이용자는 웹 클라이언트(Web Clinet)라고 한다.

마치 식당에서 서빙하는 사람(서버)과 음식을 주문하는 고객(클라이언트)의 관계와 비슷하게 이해 할 수 있다.

 

2. HTTP란?  

HTTP(HyperText Transfer Protocol)는 웹 상에서 정보를 주고 받기 위한 일종의 규칙이다.

서버와 클라이언트는 이 규칙을 기반으로 서로 통신하며 데이터를 교환한다.

 

 

웹의 발전과 웹 보안의 중요성

초기 웹 서비스는 단순히 저장된 문서를 이용자에게 제공하는 것이 주된 역할이었다. 그러나 기술이 발전하면서 이제 웹은 금융, 쇼핑, 협업 등 다양한 분야에서 복잡한 서비스를 제공하는 형태로 진화했고, 과거에는 정보를 단순히 보여주는 것에 그쳤다면, 현재는 정보를 검색하고 제품을 구매하는 등 다양한 상호작용이 가능하다. 

웹에서 처리되는 정보가 늘어남에 따라 웹 보안의 중요성도 커졌고, 예를 들어, 사용자가 물건을 구매할 때 입력하는 주소나 카드 번호와 같은 민감한 정보들이 안전하게 보호되지 않는다면 심각한 문제가 발생할 수 있다. 따라서 웹에서의 정보 교환 과정에서 보안을 강화하는 것이 필수적이다.

 

 

웹 서비스의 구조 : 프론트엔드(FrontEnd)와 백엔드(BackEnd)

웹 서비스는 크게  프론트엔드와 백엔드로 나눌 수 있다.

프론트엔드 : 사용자가 직접 보는 웹 페이지로 페이지에 표시되는 모든 정보가 포함된다. 이 부분은 글자, 이미지, 색상 등을 표시하는 웹 리소스(Web Resource)로 구성된다.

백엔드 : 사용자의 요청을 처리하는 역할을 한다. 마치 호텔 프론트에서 고객이 요청한 일을 뒤에서 처리하는 것과 같다. 

 

 

웹리소스(Web Resource)

웹 리소스는웹 페이지에 표시되는 모든 정보 자산을 의미한다. 예를 들어, 웹 브라우저에 dreamhack.io/index.html을 입력하면 index.html 경로에 존재하는 리소스를 가져와 표시하는 것이다. 모든 웹 리소스는 고유한 URI(Uniform Resource Identifier)를 가지며 이를 통해 식별된다.

 

대표적인 웹 리소스는 다음과 같다.

HTML(HyperText Markup Language) :

- 웹 문서의 구조와 내용을 담당하는 언어

- 태그와 속성을 통한 구조화된 문서 작성을 지원

 

CSS(Cascading Style Sheets) :

- 웹 페이지의 시각적 스타일을 정의하는 스타일 시트

- 글자의 색깔이나 모양, 배경 색상, 이미지의 크기나 위치 등을 CSS로 지정

- 브라우저는 이를 참고하여 웹 문서를 시각화

 

JavaScript(JS) :

- 웹 문서의 동작을 정의

- 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현

- JS 는 이용자의 브라우저에서 실행되는데, 클라이언트가 실행하는 코드라하여 Client-Side Script라고도 부름

 

그 외

- 문서, 이미지, 동영상, 폰트 등

 

그림(1) 출처 : Dreamhack

 

 

 

웹 클라이언트와 서버의 통신

1. (클라이언트) 이용자가 브라우저를 이용하면 웹 서버에 접속

2. (클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청

3. (서버) HTTP로 전달된 이용자의 요청을 해석

4. (서버) 해석한 이용자의 요청에 따라 적절한 동작, 리소스를 요청하는 것이라면, 이를 탐색하고 계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리

5. (서버) 이용자에게 전달할 리소르를 HTTP 형식으로 이용자에게 전달

6. (클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS등의 웹 리소스를 시각화하여 이용자에게 보여줌

 

그림(2) 출처 : dreamhack

 

 

키워드

통신 : 정보를 전하는 것, 현대에는 전화, 인터넷 등의 통신 수단을 이용하여 과거보다 시간과 공간의 제약을 받지 않고 이뤄짐.

웹 : 인터넷이라는 통신망을 활용하여 구현된전 지구적 정보 공간

웹클라이언트 : 웹에서 정보를 요구하는 주체

웹 서버 : 웹에서 정보를 제공하는 주체

웹 리소스 : 웹 서버가 제공하는 정보 자원(e.g. HTML, Javascript, CSS 등)

웹 서비스 : 웹 상에서 제공되는 서비스(e.g. SNS, 온라인 쇼핑몰 등)

 

 

후기

Dreamhack 온라인 강의를 시작하였는데 사실 다 아는 부분이지만 처음부터 다시 한다는 생각으로 다시 강의를 듣고 시작하게되었다. 요즘 일을 많이 벌려놔서 이것도 배워보고 싶고 자격증도 취득하고 싶고 엄청 많이하는데 모두 다 끝까지 완주하고싶다.!~