(SEB_FE) Section2 Unit7 브라우저의 작동 원리(안 보이는 곳)

브라우저의 작동 원리를 이해할 수 있다.
보이지 않는 곳의 통신을 이해할 수 있다.
URL과 URI의 차이를 이해할 수 있다.
IP 주소와 PORT에 대해 이해할 수 있다.
DNS와 IP 주소의 관계를 설명할 수 있다.
크롬 브라우저의 에러 메시지를 통해 문제를 파악할 수 있다.

🏀URL과 URI

🏅URL

Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다

• scheme, hosts, url-path로 구분할 수 있다

  • 가장 먼저 작성하는 scheme은 통신 방식(프로토콜)을 결정
    (일반적인 웹 브라우저에서는 http(s))

  • hosts는 웹 서버의 이름이나 도메인, IP를 사용하며, 주소를 의미

  • url-path는 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 의미

🏅URI

Uniform Resource Identifier의 줄임말로, 일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더해 query, fragment를 포함한다

• query는 웹 서버에 보내는 추가적인 질문이다

• fragment는 일종의 북마크 기능을 수행한다.

  • URL에 fragment(#)와 특정 HTML 요소의 id를 전달하면
    해당 요소가 있는 곳으로 스크롤을 이동할 수 있다.

즉 URI는 URL을 포함하는 상위 개념

부분	명칭	설명
file://, http://, https://	scheme	통신 프로토콜
127.0.0.1, www.google.com	hosts	웹 페이지, 이미지, 동영상 등의 파일이 위치한 웹 서버, 도메인 또는 IP
:80, :443, :3000	port	웹 서버에 접속하기 위한 통로
/search, /Users/username/Desktop	url-path	웹 서버의 루트 디렉토리로부터 웹 페이지, 이미지, 동영상 등의 파일이 위치까지의 경로
q=JavaScript	query	웹 서버에 전달하는 추가 질문

🏀IP와 포트

🏅IP(Internet Protocol) address

네트워크에 연결된 특정 PC의 주소를 나타내는 체계
(IP: 인터넷상에서 사용하는 주소체계)

• 인터넷에 연결된 모든 PC는 IP 주소체계를 따라 네 덩이의 숫자로 구분된다.
  이렇게 네 덩이의 숫자로 구분된 IP 주소체계를 IPv4라고 하는데,
  IPv4는 Internet Protocol version 4의 줄임말로, IP 주소체계의 네 번째 버전을 뜻한다.

• IPv4는 각 덩어리마다 0부터 255까지 나타낼 수 있다.
  따라서 2^(32)인 약 43억 개의 IP 주소를 표현할 수 있는 것! 그중에서 몇 가지는 이미 용도가 정해져 있다. 아래의 IP주소는 반드시 기억하자!

  • localhost, 127.0.0.1 : 현재 사용 중인 로컬 PC를 지칭
  • 0.0.0.0, 255.255.255.255 : broadcast address, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소. 서버에서 접근 가능 IP 주소를 broadcast address 로 지정하면, 모든 기기에서 서버에 접근할 수 있다.

BUT!
개인 PC의 보급으로 전 세계의 누구나 PC를 이용해 인터넷에 접속하고, 각종 서비스를 위해 서버를 생산하면서 IPv4로 할당할 수 있는 PC가 한계를 넘어서게 되어버림.

➡ 이에 대응하기 위해 세상에 나온 것이 IPv6(IP version 6)!
IPv6는 표기법을 달리 책정하여 2^(128)개의 IP 주소를 표현할 수 있다.

🏅PORT

IP 주소가 가리키는 PC에 접속할 수 있는 통로(채널)

• http://localhost:3000 의 경우 로컬 PC의 IP주소로 접근하여 3000번의 통로를 통해 실행 중이라는 말!

• 이미 사용 중인 포트는 중복해서 사용할 수 없다.
  다른 프로그램이 3000번 포트를 사용해서 실행 중이라면, 3001번 포트를 사용하게 된다.

• 포트 번호는 0~ 65535 까지 사용할 수 있다.
  그중 0 ~ 1024번 까지의 포트 번호는 주요 통신을 위한 규약에 따라 이미 정해져 있다.
  아래는 반드시 알아야 할 잘 알려진 포트 번호!

  • 22 : SSH
  • 80 : HTTP
  • 443: HTTPS

위처럼 잘 알려진 포트 번호인 경우, URI에 포트번호를 생략할 수 있지만,
그 외의 포트번호들은 꼭 URI에 포트번호를 포함해야 한다.

🏀도메인과 DNS

🏅Domain name

웹 브라우저를 통해 특정 사이트에 진입을 할 때, IP 주소를 대신하여 사용하는 주소
만약 IP 주소가 지번 또는 도로명 주소라면, 도메인 이름은 해당 주소에 위치한 상호

• IP주소: 서울 중구 세종대로 110
• 도메인 주소: 서울 시청

도메인 이름은 일정기간동안 대여하는 것!

🏅DNS

호스트의 도메인 이름을 IP 주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템

• 네트워크 상에 존재하는 모든 PC는 IP 주소가 있다.
  그러나 모든 IP 주소가 도메인 이름을 가지는 것은 아니다.

• 브라우저의 검색창에 도메인 이름을 입력하여 해당 사이트로 이동하기 위해서는
  해당 도메인 이름과 매칭된 IP 주소를 확인하는 작업이 반드시 필요
  네트워크에는 이것을 위한 서버가 별도로 있다 ➡ DNS(Domain Name System)

만약 브라우저의 검색창에 naver.com을 입력한다면, 이 요청은 DNS에서 IP 주소(ex.125.209.222.142)를 찾게 된다.
그리고 이 IP 주소에 해당하는 웹 서버로 요청을 전달하여 클라이언트와 서버가 통신할 수 있도록 하는 것이다.

🏀크롬 브라우저 에러 읽기

Error Message	Description
"Aw, Snap!" ("앗, 이런!")	Chrome 브라우저에서 페이지를 로드하는 데 문제가 발생했습니다.
ERR_NAME_NOT_RESOLVED	호스트 이름(웹 주소)이 존재하지 않습니다.
ERR_INTERNET_DISCONNECTED	사용 중인 기기가 인터넷에 연결되지 않았습니다.
ERR_CONNECTION_TIMED_OUT ERR_TIMED_OUT	페이지에 연결하는 데 시간이 너무 오래 걸립니다. 인터넷 연결이 너무 느리거나, 웹페이지에 접속한 사용자가 많아서 발생할 수 있습니다.
ERR_CONNECTION_RESET	웹페이지 연결을 방해하는 요소가 어딘가에 발생했습니다.
ERR_NETWORK_CHANGED	웹페이지를 로드하는 중에 기기의 네트워크 연결이 해제되었거나, 새로운 네트워크에 연결되었습니다.
ERR_CONNECTION_REFUSED	웹페이지에서 Chrome 브라우저의 연결을 허용하지 않았습니다.
ERR_CACHE_MISS	웹페이지로부터 이전에 입력한 정보를 다시 한번 제출하도록 요청받았습니다.
ERR_EMPTY_RESPONSE	웹페이지에서 데이터를 전혀 전송하지 않았으며, 데이터를 전송할 서버가 다운되었을 수 있습니다.
ERR_SSL_PROTOCOL_ERROR	페이지에서 전송된 데이터를 Chrome 브라우저가 해석하지 못했습니다.
ERR_BAD_SSL_CLIENT_AUTH_CERT	클라이언트 인증서(은행 또는 회사 내부 웹사이트 등)에 오류가 발생하여 웹페이지에 로그인할 수 없습니다.

위의 에러 메시지를 만나면, 다음과 같은 문제가 발생할 수 있다.

• 웹페이지에 연결할 수 없습니다.
• 웹페이지가 열리지 않습니다.
• HTTPS가 적용된 웹페이지가 열리지 않습니다.
• 사진이 로드되지 않습니다.
• 새 탭이 로드되지 않습니다.