이번 코스에서는 웹과 각각의 구성 요소에 대해 배운다. 코스에서 배우는 핵심 개념은 다음과 같다.
| • 통신 • 웹 • 웹 클라이언트 • 웹 서버 • 웹 리소스 • 웹 서비스 |
웹 ( Web ) 이란
과거에는 서로 거리가 떨어진 사람들이 의사소통을 하기위해
말을타고 직접 찾아가거나 봉화 신호를 올리는 등의 방법으로 소통했다.
그러나 현대에는 전 세계에 걸친 통신망을 바탕으로 통신 할 수 있게 되었다.
웹이란 인터넷 통신망을 활용하여 구현된 전 지구적 정보 공간이다.
시간과 장소에 구애받지 않고 인터넷에 접속만 할 수 있다면 정보를 구하거나 공유 할 수 있다.
웹으로 연결된 사람들 사이에 형성된 정보의 흐름이 마치 거미줄 같다고 하여 웹 이라 이름이 붙여졌다.
인터넷을 기반으로 구현된 기술중 HTTP 를 이용하여 정보를 공유하는 서비를 웹이라 한다.
여기서 정보를 제공하는 쪽이 웹 서버 ( Web Server )
정보를 제공 받는 쪽이 웹 클라이언트 ( Web Client ) 라고 한다.
여기서 HTTP 라는 것은 웹상에서 서로 통신을 하기 위해 정해둔 일종의 규칙이다.
과거 초기에는 웹 서비스는 저장된 문서를 단순히 출력해 사용자에게 보여주는 간단한 서비스였다.
그런데 이젠 발전이 되서 다양한 분야에서 사용자에게 편의를 주는 복잡한 서비스로 진화했다.
그만큼 웹에서 처리하는 정보 자산들이 많아짐에 따라 이들을 안전하게 보관하고 처리해야할 필요성도 생겼다.
정보들이 안전하게 보호되지 않는다면 민감한 정보들이 노출됨에 따라 유출되거나 악용 될 수 있기 때문이다.
웹 서비스 , 프론트 엔드와 백엔드
앞서 말한것 처럼 웹 서비스는 다양한 기능을 하게 발전되었다.
검색 사이트에 "사과" 라는 단어를 검색했을 때 사과라는 검색 결과가 나오게끔 했을 때
검색창과 검색 버튼과 검색결과 등등 부분들이 사용자에게 직접적으로 보여지는 프론트 엔드
사용자에게 안보이는 곳에서 사과라는 단어를 해석하고 가공하여 처리해서 결과를 제공해주는 백엔드가 있다.
음식점에서 주문을 받는 사람과 인테리어 , 테이블 , 의자 등등이 보여지는 프론트 엔드라고 보고
안보이는 곳 에서 음식을 찾아서 만들고 조리하여 만들어주는 곳을 백엔드라고 보면 이해하기 쉽다.
프론트 엔드는 이용자에게 직접 보여지는 곳으로 , 웹 리소스 ( Web Resource ) 라는 것으로 구성된다.
페이지가 보여주고 있는 정보들은 모두 웹 리소스에 명시 되어있다. 페이지에 담기는 글 , 글씨 , 색깔 , 그림 등등..
웹 리소스란, 웹에 갖춰진 정보 자산을 의미한다. 웹 브라우저에 http://dreamhack.io/index.html 주소를 입력하면 dreamhack.io 에 존재하는 /index.html 경로의 리소스를 가져오라는 의미이다.
웹의 프론트 엔드를 담당하는 대표적인 웹 리소스들은 다음과 같다.
● Hyper Text Markup Language (HTML)
웹 문서의 뼈와 살을 담당한다. 태그와 속성을 통한 구조화된 문서 작성을 지원한다.
● Cascading Style Sheets (CSS)
웹 문서의 생김새를 지정한다. 글자의 색깔이나 크기 폰트 이미지 배경색상 위치 등을 CSS로 지정할 수 있다.
● JavaScript (JS)
웹 문서의 동작을 정의 한다 . 이용자가 버튼을 클릭했을 때 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할 지 등.
HTML Editor
드림핵에서 웹 리소스의 역할들을 수정하여 실행 해 볼수 있는 사이트를 제공해 주었다.
먼저 HTML의 부분은 살과 뼈를 맡아주고 있다했다. Hello world 라는 문서를 보여주고있다.
CSS에는 문서의 색깔을 바꿔주는 상태이고
JavaScript 에는 아무것도 넣지않아 동작을 하지 않고있는 모습이다.
여기서 생각 해보았다. 너무 심심한것 같아서
뼈대가 세워져있는 Hello world 라는 문구에 클릭을 하면
다른 사이트로 이동시켜주는 동작을 만들어보고 싶었다.
어떻게 할지 모르는 상태이기 때문에 챗GPT 에 물어보고 답변을 얻어왔다.
아래는 HTML과 JavaScript를 사용하여 클릭 이벤트를 처리하고 다른 사이트로 이동시키는 예제입니다.
"Hello world"라는 문구로 변경하였습니다.
<!DOCTYPE html>
<html>
<head>
<title>클릭 이벤트 예제</title>
</head>
<body>
<p id="myText">Hello world</p>
<script>
// id가 "myText"인 요소를 가져옵니다.
var element = document.getElementById("myText");
// 요소를 클릭했을 때 실행할 함수를 정의합니다.
function handleClick() {
// 새로운 사이트로 이동합니다.
window.location.href = "https://example.com";
}
// 요소에 클릭 이벤트를 추가합니다.
element.addEventListener("click", handleClick);
</script>
</body>
</html>위의 코드는 <p> 요소에 "Hello world"라는 텍스트를 표시하고, 이를 클릭하면 handleClick 함수가 실행됩니다. handleClick 함수에서는 window.location.href를 사용하여 새로운 사이트로 이동하도록 설정되어 있습니다. 여기에서는 "https://example.com"을 대표적인 예시로 사용하였지만, 원하는 다른 사이트 주소로 변경할 수 있습니다.
이 예제를 HTML 파일로 저장하고 웹 브라우저에서 열면 "Hello world"라는 텍스트가 표시되며, 클릭하면 지정한 사이트로 이동합니다.
설명까지 해줬는데 봐도 모르겠다.
이번 코스에서 배운 내용을 토대로 웹 서비스의 통신 과정을 간략화하면 다음과 같습니다.
- (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속합니다.
- (클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청합니다.
- (서버) HTTP로 전달된 이용자의 요청을 해석합니다.
- (서버) 해석한 이용자의 요청에 따라 적절한 동작을 합니다. 리소스를 요청하는 것이라면, 이를 탐색합니다. 계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리합니다.
- (서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달합니다.
- (클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여줍니다.
'드림핵 정리' 카테고리의 다른 글
| 드림 핵 - 웹 해킹 - cookie session ( Background: Cookie & Session ) (2) | 2023.07.01 |
|---|---|
| 드림 핵 - 웹 해킹 - 웹 브라우저 ( Tools : Browser DevTools ) (0) | 2023.06.27 |
| 드림 핵 - 웹 해킹 - 웹 브라우저 ( Background : Web Browser ) (0) | 2023.06.27 |
| 드림 핵 - 웹 해킹 - 웹 기본 상식 ( Background: HTTP/HTTPS ) (0) | 2023.06.26 |
| 드림 핵 - 웹 해킹 - 소개 (0) | 2023.06.25 |