[STAGE 2] Background(Web) - 웹 기본상식 - Web

# Background: Web

웹 (World Wide Web, W3, Web)
 = 현대 정보 통신을 대표하는 통신 수단 중 하나
 = 인터넷이라는 통신망을 활용하여 구현된 전 지구적 정보 공간
 = 시간과 장소에 구애받지 않고 인터넷에 접속할 수만 있다면, 웹에서 정보를 구하거나 공유 가능
→ 웹으로 연결된 사람들 사이에 형성되는 정보의 흐름이 마치 거미줄 같다고 하여 웹으로 이름 붙여짐

통신	과거	현대
목적	의사 소통 (정보 교환, 감정 표현 등)
수단	찾아가기, 봉화 신호	전화, 인터넷
특징	시간과 거리의 제약이 있음	시간과 거리의 제약이 거의 없음

 

1. 웹

웹 = 인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스
→ 웹 서버 (Web Server) = 정보를 제공하는 주체 / 웹 클라이언트 (Web Client) = 정보를 받는 이용자
→ 식당에서 음식을 서빙하는 사람 (Server)과 음식을 주문하는 고객 (Client)의 관계
→ HTTP = 웹상에서 서로 통신을 하기 위해 정해둔 일종의 규칙

(1) 웹의 발전과 웹 보안의 중요성
초기 웹 서비스 : 저장된 문서의 내용을 출력해 이용자에게 제공하는 간단한 서비스
현재 : 금융, 쇼핑, 협업 등 다양한 분야에서 이용자에게 편의를 주는 복잡한 서비스로 진화함
→ 웹의 발전으로 인해 오프라인에서 이뤄지던 많은 상호작용이 현재는 디지털 형태로 변환되어 웹 서비스로 구현됨
→ 웹에서 처리하는 정보 자산들이 많아짐에 따라 이들을 안전하게 보관하고 처리해야 할 필요성도 함께 증가함
→ 웹을 통한 정보의 교환 과정에서민감한 정보들이 유출되거나 악용되지 않도록 보호하는 웹 보안의 중요성이 대두

(2) 웹 서비스, 프론트엔드와 백엔드
이전 : 이용자가 요청하는 정보를 제공하기만 하는 수동적인 형태의 서비스

현재 : 이용자의 요청을 해석하고 가공하여 필요한 정보와 기능을 제공하는 능동형 서비스
→ 이용자의 요청을 받는 부분을 프론트엔드 (Front-end), 요청을 처리하는 부분을 백엔드 (Back-end)라고 부름
→ 호텔 프론트에 이런저런 서비스를 요청하면 뒤의 공간에서 고객 모르게 복잡한 일들이 벌어지는 것과 비슷함

→ 프론트엔드는 이용자에게 직접 보여지는 부분으로, 웹 리소스 (Web Resource)라는 것으로 구성됨
→ 페이지가 보여주고 있는 정보들은 모두 웹 리소스에 명시되어 있음
→ 페이지에 담기는 글, 글자들의 색깔과 모양, 배경 색상, 이미지의 크기나 투명도 등이 관련 언어로 적혀있음

2. 웹 리소스
웹 리소스 = 웹에 갖춰진 정보 자산
→ 예) 웹 브라우저의 주소창에 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라고도 부름
• 그 외
  문서, 이미지, 동영상, 폰트 등

3. 웹 클라이언트아 서버의 통신

간략화한 웹 서비스의 통신 과정
1. (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속
2. (클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청
3. (서버) HTTP로 전달된 이용자의 요청을 해석
4. (서버) 해석한 이용자의 요청에 따라 적절한 동작

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

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