웹 ( Web ) 기초

웹🕸️

인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스를 웹이라 한다.

여기서 정보를 제공하는 주체를 웹 서버 (Web Server),

정보를 받는 이용자를 웹 클라이언트 (Web Client) 라고 한다.

식당에서 음식을 서빙하는 사람 (Server)과 음식을 주문하는 고객 (Client)의 관계로 생각하면 된다.

여기서, HTTP란 웹 상에서 서로 통신을 하기 위해 정해둔 일종의 규칙이다. 

 

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

초기 웹 서비스는 저장된 문서의 내용을 출력해 이용자에게 제공하는 간단한 서비스였다.

그런데 웹과 관련된 기술이 발전하면서 이제는 금융, 쇼핑, 협업 등 다양한 분야에서

이용자에게 편의를 주는 복잡한 서비스로 진화했다.

마이크로소프트 홈페이지의 과거와 현재를 살펴보면 상당히 많은 부분이 달라졌음을 알 수 있다.

과거에는 단순히 정보를 보여주는 것에서 그쳤다면,

현재는 정보를 검색하고 직접 제품을 구매할 수 있도록 변화하였다.

과거 microsoft 페이지

현재 microsoft 페이지

이러한 웹의 발전은 우리의 일상을 많은 부분에서 바꿔놓았으며,

오프라인에서 이뤄지던 많은 상호작용이 현재는 디지털 형태로 변환되어 웹 서비스로 구현되고 있다.

한편, 웹에서 처리하는 정보 자산들이 많아짐에 따라 이들을 안전하게 보관하고 처리해야 할 필요성도 함께 증가하였다.

예를 들어, 고객이 물건을 구매하는 과정에서는 고객의 주소, 카드 번호 등의 정보들이 웹을 통해 서버로 전달된다.

만약 이 정보들이 안전하게 보호되지 않는다면 고객에게 심각한 피해를 야기할 수 있다.

그래서 웹을 통한 정보의 교환 과정에서 이러한 민감한 정보들이 유출되거나 악용되지 않도록 보호하는

웹 보안의 중요성이 대두하고 있다.

 

 

 

웹 리소스

​

웹 리소스란, 웹에 갖춰진 정보 자산을 의미한다. 웹 브라우저의 주소창에 http://dreamhack.io/index.html 주소를

입력하면 dreamhack.io에 존재하는 /index.html 경로의 리소스를 가져오라는 의미이다.

모든 웹 리소스는 고유의 Uniform Resource Indicator (URI)를 가지며, 이를 이용하여 식별된다.

웹의 프론트엔드를 구성하는 대표적인 웹 리소스들은 다음과 같다.

 

• Hyper Text Markup Language (HTML)
• 웹 문서의 뼈와 살을 담당한다. 태그와 속성을 통한 구조화된 문서 작성을 지원한다.

​

• Cascading Style Sheets (CSS)
• 웹 문서의 생김새를 지정한다. 웹 리소스들의 시각화 방법을 기재한 스타일 시트이다. 글자의 색깔이나 모양, 배경 색상, 이미지의 크기나 위치 등을 CSS로 지정할 수 있다. 브라우저는 이를 참고하여 웹 문서를 시각화한다.

​

• JavaScript (JS)
• 웹 문서의 동작을 정의한다. 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현할 수 있다. JS는 이용자의 브라우저에서 실행되는데, 클라이언트가 실행하는 코드라고 하여 Client-Side Script라고도 부른다.

 

• 그 외
• 문서, 이미지, 동영상, 폰트 등

 

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

​

웹 서비스의 통신 과정을 간략화하면 다음과 같다.

​

1. (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속한다.
2. (클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청한다.
3. (서버) HTTP로 전달된 이용자의 요청을 해석한다.
4. (서버) 해석한 이용자의 요청에 따라 적절한 동작을 한다. 리소스를 요청하는 것이라면, 이를 탐색한다. 계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리한다.
5. (서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달한다.
6. (클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여준다.

 

 

키워드

• 통신: 정보를 전하는 것. 현대에는 전화, 인터넷 등의 통신 수단을 이용하여 과거보다 시간과 공간의 제약을 받지 않고 이뤄짐.
• 웹: 인터넷이라는 통신망을 활용하여 구현된 전 지구적 정보 공간
• 웹 클라이언트: 웹에서 정보를 요구하는 주체
• 웹 서버: 웹에서 정보를 제공하는 주체
• 웹 리소스: 웹 서버가 제공하는 정보 자원(ex: HTML, Javascript, CSS 등)
• 웹 서비스: 웹 상에서 제공되는 서비스 (ex: SNS, 온라인 쇼핑몰 등)

 

 

 

 

---

출처:https://learn.dreamhack.io/170#4