yumyum

[Web Hacking] 웹 개념 본문

Dream Hack/Lecture

[Web Hacking] 웹 개념

yumyum0603 2023. 11. 16. 11:46

[웹 서비스]

프론트엔드 : 이용자의 요청을 받는 부분 => 웹 리소스로 구성(페이지가 보여주고있는 정보들을 명시)

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

 

[웹 리소스]

 

ex) http://yum.io/index.html 의 주소일 때,

yum.io에 존재하는 /index.html 경로의 리소스를 가져오라는 의미

 

모든 웹 리소스는 Uniform Resource Identifier(URI)를 가지고 이로 식별한다

 

{웹 리소스 종류}

- Hyper Text Markup Language (HTML) : 웹 문서의 뼈와 살을 담당. 태그와 속성을 통한 구조화된 문서 작성을 지원

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

- JavaScript (JS) : 웹 문서의 동작을 정의. 이용자가 버튼을 클릭했을때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현할 수 있다. JS는 이용자의 브라우저에서 실행되고, 클라이언트가 실행하는 코드라 하여 Clint_Side Script라고 부른다

 

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

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

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

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

4. (서버) 해석한 이용자의 요청에 따라 적절한 동작을 시행. 리소스를 요청하는 것이라면, 이를 탐색. 계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리

5. (서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달

6. (클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여줌

 

 

 

 

 

 

'Dream Hack > Lecture' 카테고리의 다른 글

[Web Hacking] Background: HTTP/HTTPS  (0) 2023.11.16