[웹 해킹] 웹 해킹 (1) - 웹 기초 [웹 / 프론트엔드 / 백엔드 / 웹 리소스 / HTML / CSS / JS / 웹 통신 ]

 

---

[웹(WEB)]

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

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

♣ 웹 서비스는 저장된 내용을 출력해 이용자에게 제공하는 간단한 서비스에서 다양한 기능을 수행하는 형태로 발전되어 왔다.
이전의 웹 서비스는 이용자가 요청하는 정보를 제공하기만 하는 수동적인 형태의 서비스였다면,  현재는 이용자의 요청을 해석하고 가공하여 필요한 정보와 기능을 제공하는 능동형 서비스에 가깝다.

---

[프론트엔드와 백엔드]

♣ 이용자의 요청을 받는 부분을 프론트엔드(Front-end), 요청을 처리하는 부분을 백엔드(Back-end)라고 부른다.

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

---

[웹 리소스(Web Resource)]

♣ 웹 리소스(Web Resource)란, 웹에 갖춰진 정보 자산을 의미한다. 웹 브라우저의 주소 창에 주소를 입력하면 웹 서버의 특정 경로의 리소스를 가져오라는 요청을 보내게 된다.

♣ 모든 웹의 리소스는 고유의 URI(Uniform Resource Identifier)를 가지며, 이것을 이용해 식별된다.

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

HTML(Hyper Text Markup Language)	- Hyper Text란 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것이며, 이 기능을 가진 문서를 만드는 마크업 언어를 HTML이라고 한다. - 웹 문서의 뼈와 살을 담당한다. 태그(<>)와 속성을 통한 구조화된 문서 작성을 지원한다.
CSS(Cascading Style Sheets)	- HTML 등의 마크업 언어로 작성된 문서가 실제로 웹 사이트에 표현되는 방법을 정해주는 스타일 시트 언어이다. - 즉, 웹 문서의 생김새를 지정한다. 웹 리소스들의 시각화 방법을 기재하여 글자의 색깔이나 모양, 배경 색상, 이미지의 크기나 위치 등을 CSS로 지정할 수 있다. - 브라우저는 CSS를 참고하여 웹 문서를 시각화한다.
JS(JavaScript)	- HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어이다. - 즉, 웹 문서의 동작을 정의한다. 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현할 수 있다. - JS는 이용자의 브라우저에서 싱행되는데, 클라이언트가 실행하는 코드라고 하여 클라이언트 사이드 스크립트(Client-Side Script)라고도 불린다.
그 외 웹 리소스	- 문서, 이미지, 동영상, 폰트 등

---

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

♣ 웹 서비스의 통신 과정을 간단하게 나타내면 다음과 같다.

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