*해당 모든 글은 Dreamhack.io (드림핵) 에 올라와 있는 자료를 토대로 정리한 것.
이번 코스에서는 웹 브라우저의 개념과 역할에 대해 배웁니다. 코스에서 배우는 핵심 개념은 다음과 같다.
• 웹 브라우저(Web Browser)
• URL(Uniform Resource Locator)
• DNS(Domain Name Server)
• 웹 렌더링(Web Rendering
웹 브라우저
웹은 인터넷이라는 글로벌 네트워크 위에 구현되어있고 정해진 프로토콜을 기반으로 통신한다.
개발자가 아닌 일반인이 이러한 규칙을 이해하고 사용하긴 매우 어렵기 때문에
20세기에 등장한 웹 브라우저는 서버와 HTTP 통신을 대신해주고 수신한 리소스를 시각화하여 쉽게 만들어주었다.
이용자가 주소창에 dreamhack.io를 입력했을 때 웹 브라우저가 하게 되는 기본적인 동작을 나열한 것이다.
1.웹 브라우저의 주소창에 입력된 주소(dreamhack.io)를 해석 (URL 분석)
2.dreamhack.io에 해당하는 주소 탐색 (DNS 요청)
(DNS에 대한 설명은 코스 후반부에 다뤄집니다.)
3.HTTP를 통해 dreamhack.io에 요청
4.dreamhack.io의 HTTP 응답 수신
5. 리소스 다운로드 및 웹 렌더링 (HTML, CSS, Javascript)
URL
URL은 Uniform Resource Locator의 약자로, 웹에 있는 리소스의 위치를 표현하는 문자열이다.
브라우저로 특정 웹 리소스에 접근할 때는, URL을 사용하여 이를 서버에게 요청한다.
다음은 URL의 예시이다.
| Scheme | 웹 서버와 어떤 프로토콜로 통신할지 나타냅니다. |
| Host | Authority의 일부로, 접속할 웹 서버의 주소에 대한 정보를 가지고 있습니다. |
| Port | Authority의 일부로, 접속할 웹 서버의 포트에 대한 정보를 가지고 있습니다. |
| Path | 접근할 웹 서버의 리소스 경로로 '/'로 구분됩니다. |
| Query | 웹 서버에 전달하는 파라미터이며 URL에서 '?' 뒤에 위치합니다. (쿼리 파라미터는 클라이언트가 서버에게 특정 요청을 할 때 추가적인 정보를 전달하는 데 사용됩니다.) |
| Fragment | 메인 리소스에 존재하는 서브 리소스를 접근할 때 이를 식별하기 위한 정보를 담고 있습니다. '#' 문자 뒤에 위치합니다. (프래그먼트는 웹 페이지의 특정 부분이나 요소에 직접 연결할 수 있도록 도와줍니다.) 예시 : https://example.com/page#일기장1 |
쿼리 파라미터 ? (지피티 도움)
쿼리 파라미터는 URL에서 '?'로 시작하여 '&'로 구분된 키-값 쌍으로 이루어진 부분을 말합니다. 이 부분은 URL에 추가적인 정보를 전달하기 위해 사용됩니다.
예를 들어, URL " https://example.com/search?q=apple&type=fruits "에서 쿼리 파라미터는 "?q=apple&type=fruits" 부분입니다. 이 부분을 통해 "q"와 "type"이라는 두 개의 파라미터가 전달되고 있습니다.
각 파라미터는 '='로 구분된 키와 값으로 구성됩니다. 위의 예시에서 "q=apple"은 "q"라는 키에 "apple"이라는 값이 할당된 것을 의미합니다. "type=fruits"는 "type"이라는 키에 "fruits"라는 값이 할당된 것을 의미합니다.
쿼리 파라미터는 웹 페이지에서 검색어, 필터 설정, 페이지 번호 등의 추가적인 매개변수를 전달할 때 주로 사용됩니다. 서버는 이러한 쿼리 파라미터를 읽어들여 요청에 맞는 동작을 수행하거나 결과를 반환할 수 있습니다.
쿼리 파라미터는 '&'를 사용하여 여러 개의 파라미터를 연결할 수 있습니다. 예를 들어, " https://example.com/search?q=apple&type=fruits&category=organic "와 같이 여러 개의 파라미터를 함께 사용할 수 있습니다.
쿼리 파라미터를 사용하면 동적인 웹 페이지를 생성하고 유저의 요청에 맞는 맞춤화된 결과를 제공할 수 있습니다.
Fragment ? (지피티 도움)
Fragment(프래그먼트)는 URL의 일부로서, 웹 페이지 내에서 특정 위치를 가리키는 용도로 사용됩니다. 일반적으로 URL의 끝에 '#'을 붙이고, 그 뒤에 프래그먼트 식별자를 추가합니다.
프래그먼트는 웹 페이지의 특정 부분이나 요소에 직접 연결할 수 있도록 도와줍니다. 웹 페이지는 주로 HTML로 구성되며, 각 요소는 고유한 ID를 가질 수 있습니다. 이 ID를 프래그먼트로 지정하면, 해당 요소가 웹 페이지 로딩 후 스크롤되어 보여지게 됩니다.
예를 들어, 다음과 같은 URL에 프래그먼트가 포함된 예시를 보겠습니다:
https://example.com/page#section1
위의 URL에서 "page"는 웹 페이지의 경로를 나타내고, "section1"은 프래그먼트입니다. 이 프래그먼트는 해당 웹 페이지의 특정 섹션에 직접 링크하고자 할 때 사용됩니다.
사용자가 위 URL을 방문하면, 웹 브라우저는 해당 페이지로 이동하고 스크롤을 해당 섹션으로 이동시킵니다. 이를 통해 사용자는 특정 부분을 쉽게 찾아볼 수 있게 됩니다.
프래그먼트는 주로 웹 페이지 내에서 내비게이션, 북마크, 페이지 내 링크 등에서 활용됩니다. 특정 부분으로 바로 이동하거나 다른 사용자에게 특정 위치를 공유할 때 유용하게 사용됩니다.
요약하자면, 쿼리 파라미터는 URL에 추가 정보를 전달하는 데 사용되고, 프래그먼트는 웹 페이지 내에서 특정 위치를 나타내는 데 사용됩니다. 쿼리 파라미터는 ?으로 시작하고 &로 여러 개를 구분하며, 프래그먼트는 #으로 시작합니다.
Domain Name
URL 구성 요소 중 Host는 웹 브라우저가 접속할 웹 서버의 주소를 나타낸다.
Host는 Domain Name, IP Address의 값을 가질 수 있다.
IP Address는 네트워크상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소이다.
불규칙한 숫자로 이루어진 IP Address는 사람이 외우기 어려우므로, 일반적으로는 도메인의 특성을 담은 이름을 정의하여 IP 대신 사용한다.
Domain Name 을 이용할때 브라우저는 Domain Name Server (DNS) 에 Domain Name 에 맞는 IP를 물어보고
DNS에선 물어본 Domain Name 에 맞는 IP Address를 제공하여 브라우저에선 응답받은 IP Address로 통신한다.
예시로 네이버를 들었을때
네이버의 IP Address가 123.456.789.101 이라고 하자
네이버에선 DNS에 123.456.789.101은 Naver.com 으로 도메인을 남겨두었고
우리 컴퓨터에서는 Naver.com 만 쳐도 DNS에서 이를 123.456.789.101 으로 알려주어 네이버에 접속이 되는 것 이다.
한마디로 외우기 쉽게 IP Address 에 이름을 붙여주고 이를 연결시켜주는 서비스인것.
웹 렌더링
웹 렌더링(Web Rendering)은 서버로부터 받은 리소스를 이용자에게 시각화하는 행위를 말한다.
서버의 응답을 받은 웹 브라우저는 리소스의 타입을 확인하고, 적절한 방식으로 이용자에게 전달한다.
예를 들어, 서버로부터 HTML과 CSS를 받으면 브라우저는 HTML을 파싱하고 CSS를 적용하여 이용자에게 보여준다.
웹 렌더링은 웹 렌더링 엔진에 의해서 이뤄지는데, 브라우저별로 서로 다른 엔진을 사용한다.
사파리는 웹킷(Webkit), 크롬은 블링크(Blink), 파이어폭스는 개코(Gecko) 엔진을 사용한다.
각각의 엔진에 따라 렌더링 과정과 순서, 속도의 차이는 있지만, HTML을 파싱하고 시각화하여 이용자에게 보여주는 것은 같다.
'드림핵 정리' 카테고리의 다른 글
| 드림 핵 - 웹 해킹 - cookie session ( Background: Cookie & Session ) (2) | 2023.07.01 |
|---|---|
| 드림 핵 - 웹 해킹 - 웹 브라우저 ( Tools : Browser DevTools ) (0) | 2023.06.27 |
| 드림 핵 - 웹 해킹 - 웹 기본 상식 ( Background: HTTP/HTTPS ) (0) | 2023.06.26 |
| 드림 핵 - 웹 해킹 - 웹 기본 상식 ( Background: Web ) (0) | 2023.06.25 |
| 드림 핵 - 웹 해킹 - 소개 (0) | 2023.06.25 |