오늘은 URL,DNS,웹 렌더링 ,개발자 도구를 알아볼까 합니다.
URL이란?
웹에있는 리소스의 위치를 표현하는 문자열이라고 명하며 이 URL은 5가지로 구성이 됩니다
1. Scheme
2. Authority
3. Path
4. Query
5. Fragment
이 5가지로 구성이 되며 각 용어에 대한 뜻은 다음과 같이 풀이 됩니다
우선 1. Scheme 부터 알아보도록 하겠습니다
Scheme란?
사용자가 웹 서버와 어떤 프로토콜로 통신할지를 나타내는 문자열입니다.
이들은 가장 앞쪽에 위치하고 있으며
대부분 우리가 잘 알고있는 HTTP/HTTPS와 같은 프로토콜로 이루어져 있습니다.
Authority란?
Authority는 두개의 문자열로 나뉠 수 있습니다.
1. Host
2. Port
로 나뉠 수 있는데 각각 문자열에 대해서 설명 드리겠습니다.
Host란?
Authority의 일부로써 접속할 웹 서버의 주소에 대한 정보를 가지고 있습니다.
주로 도메인이나 ip adress가 웹서버의 주소에 대한 정보를 가지고 있습니다.
Post란?
Authority의 일부로 접속할 웹 서버의 포트에 대한 정보를 가지고 있습니다.
대부분은 Host 뒤에 붙혀서 사용됩니다.
Path란?
접근할 웹 서버의 리소스 경로로 ' / ' 로 구분이 됩니다.
아마 리소스를 불러오는 경로 라고 생각하시면 될거 같습니다.
Query란?
웹 서버에서 전달하는 파라미터입니다. 이들은 주로 URL의 ' ?'의 뒤쪽 부분에 위치합니다.
Fragment란?
메인 리소스에 존재하는 서브리소스를 접근할 때,
이를 식별하기 위한 정보를 담고있는 문자열 입니다. 이들은 주로 URL에서 '#' 문자 뒤에 위치하는것이 대부분이며,
웹 브라우저만 갖고있다는 특징이 있습니다.
URL의 예시
URL의 예시를 들어보겠습니다.
foo://example.com:443/over/there?name=ferret#nose 이라는 URL주소가 있다고 가정해 봅시다
여기서 foo:// 는 Scheme 에 해당이 됩니다.
다음으로 example.com:443을 살펴보면 Authority라고 말한다고 했는데 이것들은
Host와 Post로 나뉠 수 있다고 설명 드렸고, 여기서 example.com 은 Host에 해당하고, :443 은 Post에 해당합니다.
다음은 /over/there 입니다
Path에 해당을 하는것을 알 수 있습니다.
그 다음은 ?name=ferret 입니다.
Query에 해당합니다.
마지막으로 #nose 입니다.
Fragment에 해당하는거를 보실 수 있습니다.
여기서 Host에 대해서 좀 더 설명을 해보겠습니다.
아까 Host는 도메인 네임하고 아이피 어드레스값을 가진다고 말씀 드렸습니다.
여기서 아이피 어드레스란?
네크워크상 통신이 이루어 질떄 장치를 식별하기 위해서 사용하는 주소입니다.
불규칙한 숫자로 이루어진 아이피 어드레스는 사람이 외우기 어려우므로.
도메인을 사용합니다.
예시를 들어보면 우리가 흔히 알고있는 구글을 예로 들어봅시다.
구글의 도메인 네임은 google.co.kr으로 알고 있고 이를 주소창에 치고 들어가면 잘 들어가 집니다.
이와 같이 구글 아이피 어드레스를 확인한 후에 142.250.74.3을 주소창에 치고 들어가면 같은 구글 사이트로 이동되는것을 알 수 있습니다.
이러한 아이피 어드레스에서 도메인으로 변경시켜 주는 것을 DNS 일명 Domain Name System 이라고 말합니다.
웹 랜더링이란?
서버로 부터 받은 리소스를 사용자에게 시각하 하는 행위를 말합니다.
서버의 응답을 받은 사용자의 웹 브라우저는 리소스의 타입을 확인하고, 적절한 방식으로 사용자에게 전달합니다.
그리고 웹 랜더링은 각 엔진에 의해서 이루어지는데,
아이폰에서의 브라우저를 담당하는 사파리 에서는 '웹킷' 이라는 엔진을 사용하고,
마이크로소프트에서의 제공되는 크롬은 '블링크' 라는 엔진을 사용하며,
파이어 폭스 브라우저에서는 '개코' 라는 엔진을 사용합니다.
마지막으로 개발자 도구에 대해서 살펴 보도록 하겠습니다.
우선 개발자 도구는 웹사이트에서 F12버튼을 눌러서 끄고 켤수있습니다.
각 내부 레이아웃을 소개 시켜드리자면,
가장 맨 위에 보이시는 레이아웃들 부터 설명을 드리겠습니다.
가장 왼쪽에 위치한 아이콘들은 왼쪽부터 요소검사 & 디바이스 툴바를 의미합니다
요소 검사란?
요소검사를 활용하면 특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 손쉽게 찾으실수 있습니다.
요소검사 버튼을 누르고 웹 페이지의 원하는 요소에 마우스를 올리면 대상의 정보가 나옵니다.
그상태에서 클릭하면 HTML코드가 확대됩니다.
디바이스 툴바란?
현재 브라우저의 화면 비율 및 유저 에이전트를 원하는 값으로 바꿀 수 있도록 도와주는 역할을 합니다.
그다음 Element부터 lighthouse까지는 기능을 선택하는 패널들입니다.
왼쪽부터 설명을 드리면,
1. Element: 페이지를 구성하는 HTML검사기 입니다
=> 코드를 선택한 상태로 F2를 누르시거나 더블클릭을 하시면 코드를 수정할 수 있습니다.
2.Console: 자바 스크립트를 실행하고 결과를 알 수 있습니다.
=>프론트 엔드의 자바 스크립트 코드에서 발생한 각종 메세지를 출력하고,
이용자가 입력한 자바 스크립트 코드를 실행하도록 도와주는 역할을 합니다.
단축키는 ctrl+ shift+J입니다.
3. Sources: HTML,CSS,JS등 페이지를 구성하는 리소스를 확인하고 이를 디버깅을 할수 있도록 도와줍니다.
=>개발자 도구 가장 왼쪽에 보이시는 것은 현재 페이지의 리소스 파일 트리, 파일 시스템을 나타냅니다.
가운데 부분은 선택된 리소스를 상세하게 볼 수 있는 창입니다
가장 오른쪽에 watch, call stack, scope, breakpoint가 있습니다
watch는 원하는 자바 스크립트 식을 입력하면 , 코드 실행과정에서 해당 식의 값변화를 확인하실수 있습니다.
call stack: 함수들의 호출 순서를 스택 형태로 보여줍니다.
가령 A>B>C 일 경우에 C 내부코드를 실행시 가장 위에는 C 맨 밑에는 A 가 보여집니다.
Scope: 정의된 모든 변수들의 값을 확인할수 있습니다.
Breakpoint: 브레이크 포인트들을 확인하고 각각을 활성화 또는 비활성화 할 수 있습니다.
Network: 서버와 오가는 데이터를 확인할 수 있습니다.
Application: 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터들을 확인할 수 있습니다.
그밖에 performance, memory, security,lighthouse등이 있습니다.
가장 왼쪽에 있는 가위표모양의 아이콘과 숫자는 현재 페이지에서 발생한 에러 및 경고메세지를 의미합니다.
마지막으로 톱니바퀴 모양 아이콘은 개발자 도구의 설정을 나타냅니다.