Background : Web

*해당 카테고리에 작성되는 강의 내용은 Dreamhack에서 학습했던 내용을 기반으로 재정리한 내용이며, 자세한 내용은 드림핵에서 보실 수 있습니다.

1. 웹이란?

현대 정보 통신을 대표하는 통신 수단 중 하나

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

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

• 시간과 장소에 구애받지 않고 인터넷에 접속할 수만 있다면, 웹에서 정보를 구하거나 공유 O
• 인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스를 웹
  • 웹 서버(Web Server) : 여러가지 정보를 제공하는 주체 
  • 웹 클라이언트(Web Client) : 정보를 받는 이용자

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

• 초기 웹 서비스는 저장된 문서의 내용을 출력해 이용자에게 제공하는 간단한 서비스 but 웹과 관련된 기술이 발전하면서 이제는 금융, 쇼핑, 협업 등 다양한 분야에서 이용자에게 편의를 주는 복잡한 서비스로 진화

3. 웹 서비스, 프론트엔드와 백엔드 

• 프론트 엔드(Front-end) : 이용자의 요청을 받는 부분
• 백엔드(Back-end) : 요청을 처리하는 부분
• 웹 리소스(Web Resource) : 페이지가 보여주고 있는 정보들은 모두 웹 리소스에 명시

4. 웹 리소스

• 웹 리소스 : 웹에 갖춰진 정보 자산
  • 모든 웹 리소스는 고유의 Uniform Resource Identifier (URI)를 가지며, 이를 이용해서 식별

(1) Hyper Text Markup Language (HTML)

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

(2) Cascading Style Sheets (CSS)

• 웹 리소스들의 시각화 방법을 기재한 스타일 시트
• 글자의 색깔이나 모양, 배경 색상, 이미지의 크기나 위치 등을 CSS로 지정

(3) JavaScript (JS)

• 웹 문서의 동작을 정의
• 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현
• Client-Side Script라고도 불림

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

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

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

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

(4) 서버 : 해석한 이용자의 요청에 따라 적절한 동작을 함

(5) 서버 : 이용자에게 전달할 리소르를 HTTP 형식으로 이용자에게 전달함
(6) 클라이언트 : 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화해서 이용자에게 제시