[Web_Hacking] stage2_Web

*웹

인터넷 기반 서비스 중 HTTP를 이용해 정보를 공유하는 서비스를 말한다. 정보 제공 주체를 웹 서버(Web Server), 정보를 받는 이용자를 웹 클라이언트(Web Clinet)라고 한다. -> 여기서 HTTP는 웹상의 통신 규칙 같은 것이다.

 

프론트엔드: 웹 서비스 구조에서 이용자의 요청을 받는 부분 -> 이용자에게 직접 보여지는 부분으로, 웹 리소스로 구성된다. 페이지가 보여주는 모든 정보들은 웹 리소스에 명시되어 있다. (페이지에 담기는 글, 글자들의 색과 모양, 배경 색상, 이미지 크기나 투명도 등)

 

백엔드: 해당 요청을 처리하는 부분

 

 

 

*웹 리소스

웹에 갖춰진 정보 자산이다. 웹  브라우저 주소창에 http://dreamhack.io/index.html 주소를 입력하게 되면, dreamhack.io에 존재하는 /index.html 경로의 리소스를 가져오라는 뜻이다. 모든 웹 리소스는 고유한 URI(Uniform Resource Indicator)를 가지고, 이를 이용해 식별된다. 

 

웹의 프론트엔드를 구성하는 대표적인 웹 리소스들 ↓

 

HTML(Hyper Text Markup Language): 웹 문서의 프레임. 태그와 속성을 통해 구조화된 문서 작성 지원

 

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

 

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

 

 

 

*클라이언트-서버 통신

이용자가 웹 서버에 접속 -> 브라우저는 이용자의 요청을 해석 후 HTTP형식으로 서버에 리소스 요청 -> 서버는 HTTP로 전달된 요청 해석 -> 해석한 요청에 따라 서버는 적절한 동작을 함. -> 서버는 이용자에게 전달할 리소스를 HTTP형식으로 이용자에 전달 -> 브라우저는 서버에게 응답받은 HTML, CSSm JS등의 웹 리소스를 시각화해서 이용자에게 보여줌