W3B H4CK1NG
[dreamhack] Lecture. Background: Web
hauni
2023. 11. 16. 01:37
Web
HTTP를 이용하여 정보를 공유하는 서비스
웹 서버Web Server : 정보를 제공하는 주체
웹 클라이언트Web Client : 정보를 받는 이용자
프론트엔드와 백엔드
- 프론트엔드: 이용자의 요청을 받는 부분
- 이용자에게 직접 보여지는 부분
- 웹 리소스Web Resource로 구성
백엔드: 요청을 처리하는 부분
웹 리소스Web Resoucre
웹에 갖춰진 정보 자산을 의미
http://dreamhack.io/index.html 주소를 입력하면 dreamhack.io에 존재하는 /index.html 경로의 리소스를 가져오라는 의미
모든 웹 소스는 고유의 URI(Uniform Resource Indicator)를 가짐
- 프론트엔드를 구성하는 대표적인 웹 리소스
- HTML; Hyper Text Markup Language태그와 속성을 통한 구조화된 문서 작성을 지원
- 웹 문서의 뼈와 살을 담당
- CSS; Cascading Style Sheets웹 리소스들의 시각화 방법을 기재한 스타일 시트
- 웹 문서의 생김새 지정
- JS; JavaScriptJS는 이용자의 브라우저에서 실행됨 → 클라이언트가 실행하는 코드라고 하여 Client-Side Script라고도 부름
- 웹 문서의 동작을 정의
- 그 외 → 문서, 이미지, 영상, 폰트
HTML Editor
<!DOCTYPE html> <html> <head></head> <body> <b>하은이짱</b> </body> </html>
Run → 하은이짱
웹 클라이언트와 서버의 통신
- (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속합니다.
- (클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청합니다.
- (서버) HTTP로 전달된 이용자의 요청을 해석합니다
- (서버) 해석한 이용자의 요청에 따라 적절한 동작을 합니다. 리소스를 요청하는 것이라면, 이를 탐색합니다. 계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리합니다.
- (서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달합니다.
- (클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여줍니다.