HTTP/네트워크_02. 브라우저의 작동 원리 (보이지 않는 곳)

유슬기·2023년 1월 30일

프론트엔드

목록 보기

33/64

URL과 URI

브라우저의 검색창을 클릭하면 나타나는 주소가 URI이며, URI는 URL을 포함하는 상위개념이다.

브라우저의 주소창에 입력한 URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타낸다.

// 아래 URL을 크롬 브라우저에 입력하면 브라우저로 PC의 폴더와 파일을 탐색할 수 있다
file://127.0.0.1/Users/username/Desktop/

// 아래 URL을 크롬 브라우저에 입력하면 구글에서 JavaScript를 검색한 결과가 나온다
// '?' 뒤에 나오는 내용은 query로, 엄밀히 말하면 아래 주소는 URI이다
http://www.google.com:80/search?q=JavaScript

127.0.0.1 은 로컬 PC를 나타냄

명칭	부분	설명	URL	URI
scheme	file://, http://, https://	통신 프로토콜	✅	✅
hosts	127.0.0.1, www.google.com	웹 페이지, 이미지, 동영상 등의 파일이 위치한 웹 서버, 도메인 또는 IP	✅	✅
port	:80, :443, :3000	웹 서버에 접속하기 위한 통로	✅	✅
url-path	/search, /Users/username/Desktop	웹 서버의 루트 디렉토리로부터 웹 페이지, 이미지, 동영상 등의 파일이 위치까지의 경로	✅	✅
fragment	#image	일종의 북마크 기능을 수행하며, 특정 지점으로 스크롤을 이동하도록 지시	❎	✅
query	?q=JavaScript	웹 서버에 전달하는 추가 질문	❎	✅

URL

URL은 Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다.
URL은 scheme, hosts, url-path로 구분할 수 있다.

scheme: 가장 먼저 작성하는 scheme은 통신 방식(프로토콜)을 결정하며, 일반적인 웹 브라우저에서는 http(s)를 사용한다.
hosts: 웹 서버의 이름이나 도메인, IP를 사용하며 주소를 나타낸다. IP주소를 직접 사용한 것은 편의성이 떨어지므로 웹에서는 자주 사용되지 않는다.
url-path: 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타낸다.

URI

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

query: 웹 서버에 보내는 추가적인 질문(추가 매개변수)이다. 이러한 매개변수는 & 기호로 구분된 키/값 쌍의 목록이다. 웹 서버는 이러한 매개변수를 사용하여 리소스를 사용자에게 반환하기 전에 추가적인 작업을 수행할 수 있다.
예시로, http://www.google.com:80/search?q=JavaScript 를 브라우저의 검색창에 입력하면, 구글에서 JavaScript를 검색한 결과가 나타난다.
fragment: 일종의 북마크 기능을 수행하며 URL에 fragment(#)와 특정 HTML 요소의 id를 전달하면 해당 요소가 있는 곳으로 스크롤을 이동할 수 있다.
예를 들어 HTML 문서에서 브라우저는 앵커가 정의된 지점으로 스크롤하거나, 비디오 또는 오디오 문서에서 브라우저는 앵커가 나타내는 시간으로 이동하려고 시도한다.
프래그먼트 식별자라고도 하는 # 뒤의 부분은 요청과 함께 서버로 전송되지 않는다.

IP와 포트

IP address(Internet Protocol address, IP 주소)

인터넷 프로토콜을 사용하는 네트워크에 연결된 모든 장치에 할당된 번호로, 네트워크에 연결된 특정 PC의 주소를 나타내는 체계

IPv4: 인터넷에 연결된 모든 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 로 지정하면 모든 기기에서 서버에 접근할 수 있음
IPv6: 인터넷 보급률이 낮았던 초기에는 IPv4로 네트워크에 연결된 PC에 주소를 할당하는 일이 가능했으나, 개인 PC의 보급으로 전 세계의 누구나 PC를 이용해 인터넷에 접속하고, 각종 서비스를 위해 서버를 생산하면서 IPv4로 할당할 수 있는 PC가 한계를 넘어서게 되어 IPv6가 나오게 되었다.
IPv6는 표기법을 달리 책정하여 2^(128)개의 IP 주소를 표현할 수 있다.
- 예시: 2001:db8::ff00:42:8329

PORT(포트)

IP주소에 진입할 수 있는 정해진 통로

포트는 웹 서버의 리소스에 액세스하는 데 사용되는 기술적인 "게이트"를 나타낸다.
웹 서버가 HTTP 프로토콜의 표준 포트(HTTP의 경우 80, HTTPS의 경우 443)를 사용하여 리소스에 접근하는 경우엔 일반적으로 포트가 생략된다. 표준 포트를 사용하지 않는다면 필수로 입력해주어야 한다.
- HTTP(:80), HTTPS(:443)과 같이 잘 알려진 포트의 경우, https://codestates.com:443이 아닌 https://codestates.com처럼 포트 번호를 URI에 생략할 수 있지만, 그 외의 잘 알려지지 않은 포트(3000과 같은 임시 포트)는 반드시 포트 번호를 포함해야 한다.
포트 번호는 0~ 65535 까지 사용할 수 있다. 그중에서 0 ~ 1024번 까지의 포트 번호는 주요 통신을 위한 규약에 따라 이미 정해져 있다. 반드시 알아야 할 잘 알려진 포트 번호(well-known port)는 다음과 같다.
- 22 : SSH
- 80 : HTTP
- 443: HTTPS
- 더 많은 포트 번호 확인하기
이미 정해진 포트 번호라도 필요에 따라 자유롭게 사용할 수 있다. 이 번호는 강제적으로 지정된 것은 아니며, IANA의 권고안일 뿐이다. 가끔 각 포트 번호를 그대로 사용하지 않고 다른 용도로 사용하기도 한다.

도메인과 DNS

Domain name

웹 브라우저를 통해 특정 사이트에 진입할 때, IP 주소를 대신하여 사용하는 주소

IP 주소가 지번 또는 도로명 주소라면, 도메인 이름은 해당 주소에 위치한 상호(건물명)으로 볼 수 있음
터미널에서 도메인 이름을 통해 IP 주소를 확인하는 명령어 nslookup <도메인 이름>으로 해당 도메인의 IP 주소를 확인할 수 있다.
```
nslookup naver.com

Server:		210.220.163.82
Address:	210.220.163.82#53

Non-authoritative answer:
Name:	naver.com
Address: 223.130.200.107
Name:	naver.com
Address: 223.130.195.95
Name:	naver.com
Address: 223.130.200.104
Name:	naver.com
Address: 223.130.195.200
```
위 예시에서 IP 주소는 223.130.200.107, 도메인 이름은 naver.com이다. 주소창에 IP 주소(223.130.200.107)를 입력하면 naver.com으로 이동할 수 있다.

DNS(Domain Name System)

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

로컬 PC를 나타내는 127.0.0.1 은 localhost 로 사용할 수 있지만, 그 외의 모든 IP 주소는 도메인 이름을 일정 기간 동안 대여하여 사용한다.
브라우저의 검색창에 대여한 도메인 이름을 입력하여 해당 사이트로 이동하기 위해서는 해당 도메인 이름과 매칭된 IP 주소를 확인하는 작업이 반드시 필요하다. 네트워크에는 이것을 위한 서버가 별도로 있는데 이를 DNS(Domain Name System)이라고 한다.
브라우저의 검색창에 도메인 이름을 입력(요청) → DNS에서 IP 주소를 찾음 → 해당 IP 주소에 해당하는 웹 서버로 요청을 전달하여 클라이언트와 서버가 통신할 수 있도록 함

크롬 브라우저 에러 읽기

Chrome 브라우저를 사용하다 보면 누구나 한 번쯤 에러 메시지를 만날 수 있다. 이 에러 메시지는 웹페이지를 제공하는 서버와 Chrome 브라우저가 소통하는 단계, 또는 기기와 네트워크의 연결, Chrome 브라우저가 해석할 수 없는 데이터를 전송받은 경우 발생한다.

아래에서 설명하는 에러 메시지는 Chrome 브라우저를 사용하면 만날 수 있는 잘 알려진 에러 메시지이다.

Chrome 브라우저를 제공하는 구글은 이런 에러 메시지를 각각 어떻게 핸들링해야 하는지 잘 설명해두었기 때문에 어떤 에러인지 알면 해결할 수 있을 것이다.

Error Message	Description
"Aw, Snap!" ("앗, 이런!")	Chrome 브라우저에서 페이지를 로드하는 데 문제가 발생했습니다.
ERR_NAME_NOT_RESOLVED	호스트 이름(웹 주소)이 존재하지 않습니다.
ERR_INTERNET_DISCONNECTED	사용 중인 기기가 인터넷에 연결되지 않았습니다.
ERR_CONNECTION_TIMED_OUTERR_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	클라이언트 인증서(은행 또는 회사 내부 웹사이트 등)에 오류가 발생하여 웹페이지에 로그인할 수 없습니다.