URL
은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타낸다.CLI
환경에서 폴더와 파일의 위치를 찾아 이동하듯이, 슬래시(/
)를 이용해 서버의 폴더에 진입하거나 파일을 요청할 수 있다.그러나 기본적인 보안의 일환으로 외부에서 직접 접근이 가능한 경우는 거의 없다.
브라우저로 PC의 폴더와 파일을 탐색하는 방법
# Ubuntu:
file://127.0.0.1/home/username/Desktop/
# macOS:
file://127.0.0.1/Users/username/Desktop/
username
에는 사용자 이름을 입력한다.위 URL을 크롬 브라우저에 입력하면, 크롬 브라우저를 파일 탐색기로 쓸 수 있다.
이어서 입력한 URL
의 각 부분이 무엇을 나타내는지 살펴보자.
URL
, URI
의 구성URL
은 Uniform Resource Locator의 줄임말로,URL
은 scheme
, hosts
, url-path
로 구분할 수 있다.
가장 먼저 작성하는 scheme
은 통신 방식(프로토콜)을 결정한다.
일반적인 웹 브라우저에서는 http(s)
를 사용한다.
hosts
는 웹 서버의 이름이나 도메인, IP를 사용하며 주소를 나타낸다.
url-path
는 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타낸다.
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
를 전달하면 해당 요소가 있는 곳으로 스크롤을 이동할 수 있다.
브라우저의 검색창을 클릭하면 나타나는 주소가 URI
이다.
URI
는 URL
을 포함하는 상위개념이다.
따라서, 'URL
은 URI
다.' 는 참이고, '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 | 웹 서버에 전달하는 추가 질문 |
127.0.0.1
은 로컬 PC를 나타낸다.
port
는 서버로 진입할 수 있는 통로이다.
IP
주소와 그 주소에 진입할 수 있는 정해진 통로, PORT
(포트)에 대해 알아보자.공유기를 설치하고 비밀번호를 설정하려면, 공유기 관리 페이지에 접속해야 한다.
웹 브라우저에 닷(.
)으로 구분된 네 덩이의 숫자를 입력하면, 공유기의 관리 페이지로 접속할 수 있다.
이때 사용되는 네 덩이의 숫자를 IP 주소
라고 한다.
IP
는 Internet Protocol의 줄임말로, 인터넷상에서 사용하는 주소체계를 의미한다.
인터넷에 연결된 모든 PC는 IP 주소체계
를 따라 네 덩이의 숫자로 구분된다.
이렇게 네 덩이의 숫자로 구분된 IP 주소체계
를 IPv4
라고 한다.
IPv4
는 Internet Protocol version 4의 줄임말로, IP 주소체계의 네 번째 버전을 뜻한다.
nslookup
을 이용IPv4
주소를 확인할 수 있다.nslookup codestates.com
을 입력하면, 다음과 같은 화면을 만날 수 있다.IPv4
는 각 덩어리마다 0부터 255까지 나타낼 수 있다.IP 주소
를 표현할 수 있다.IP 주소
는 반드시 기억해야 한다.localhost
, 127.0.0.1
: 현재 사용 중인 로컬 PC를 지칭한다.0.0.0.0
255.255.255.255
: broadcast address, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소이다.IP
주소를 broadcast address 로 지정하면, 모든 기기에서 서버에 접근할 수 있다.IPv4
(IP version 4)으로 네트워크에 연결된 PC에 주소를 할당하는 일이 가능했다.IPv4
로 할당할 수 있는 PC가 한계를 넘어서게 되었다.IPv6
(IP version 6) 이다.IPv6
는 표기법을 달리 책정하여 2^(128)개의 IP 주소를 표현할 수 있다.IP
주소인 127.0.0.1 뒤에 :3000과 같은 숫자가 표현된다.IP
주소가 가리키는 PC에 접속할 수 있는 통로(채널)를 의미한다.IP
주소로 접근하여, 3000번
의 통로를 통해 실행 중인 리액트를 확인할 수 있다.3000번
포트를 사용 중이라면, 다음과 같이 다른 포트 번호(3001
)로 리액트가 실행된다.0~ 65535번
까지 사용할 수 있다.0 ~ 1024번
까지의 포트 번호는 주요 통신을 위한 규약에 따라 이미 정해져 있다.HTTP
(:80
), HTTPS
(:443
)과 같이 잘 알려진 포트의 경우, https://codestates.com:443
이 아닌 https://codestates.com
처럼 포트 번호를 URI
에 생략할 수 있지만,3000
과 같은 임시 포트)는 반드시 포트 번호를 포함해야 한다.IP 주소
를 대신하여 사용하는 주소가 있다.IP 주소
가 지번 또는 도로명 주소라면, 도메인 이름은 해당 주소에 위치한 상호로 볼 수 있다.
- 택시를 타고 목적지에 도착하는 상황을 가정해보자.
서울 중구 세종대로 110
이라는 도로명 주소가 있다.
택시를 타고, 기사님께 도로명 주소를 전달하면, 무사히 목적지에 도착할 수 있다.
그러나 도로명 주소 특성상 주소 자체가 상당히 길고, 주소지만 보면 어떤 건물이 있는지 파악하기 어렵다.- 도로명 주소를 대신해서, 상호나 건물의 이름을 택시 기사님께 전달할 수도 있다.
기사님께서울시청
까지 가달라는 메시지를 전달해도, 무사히 목적지에 도착할 수 있다.
IP 주소
를 보다 간단하게 나타낼 수 있다.IP 주소
를 확인하는 명령어 nslookup
으로 codestates.com
의 IP 주소
를 확인할 수 있다.IP 주소
는 3.34.112.225
이고, 도메인 이름
은 codestates.com
이다.IP 주소
가 있다.IP 주소
가 도메인 이름을 가지는 것은 아니다.127.0.0.1
은 localhost
로 사용할 수 있지만,도메인 이름
과 IP 주소
는 어떻게 매칭하는 걸까?IP 주소
를 확인하는 작업이 반드시 필요하다.네트워크에는 이것을 위한 서버가 별도로 있는데 이를 DNS
(Domain Name System)이라고 한다.
DNS
는 호스트의 도메인 이름
을 IP 주소
로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템이다.
만약 브라우저의 검색창에 naver.com
을 입력한다면,
이 요청은 DNS
에서 IP 주소
(ex.125.209.222.142)를 찾는다.
그리고 이 IP 주소
에 해당하는 웹 서버로 요청을 전달하여 클라이언트와 서버가 통신할 수 있도록 한다.
Chrome 브라우저의 Aw, Snap! (앗, 이런!) 에러 페이지
- Chrome 브라우저를 제공하는 구글은 이런 에러 메시지를 어떻게 핸들링해야 하는지 잘 설명해두었다.
- 이러한 에러 메시지를 만났을 때 어떤 에러인지 알아야 차분히 해결할 수 있다.
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 | 클라이언트 인증서(은행 또는 회사 내부 웹사이트 등)에 오류가 발생하여 웹페이지에 로그인할 수 없습니다. |
chrome://network-errors/
를 입력하여 확인할 수 있다.