Computer Science/인터넷

[Chapter5] URL은 무엇인가?

코북 2023. 1. 24. 22:52

URL은 무엇이고, 웹에서 어떻게 URL이 작동하는지 알아보자.

 

Summary

 Hypertext 그리고 HTTP 처럼, URL은 웹에서 중요한 개념 중 하나이다. 이것은 웹 상에 게시된 어떤 리소스를 검색하고 찾기 위해서 브라우저에 의해 사용되는 메커니즘(목적을 달성하기 위한 방법)이다. 

 

URL은 Uniform Resource Locator의 약자이며, 인터넷에서 자원의 위치를 의미한다. URL은 웹 상에서 지정된 고유 리소스의 주소에 불과하다. 이론적으로, 유효한 각 URL은 고유 리소스를 가리킨다. 이러한 리소스는 HTML 페이지, CSS 문서, 이미지 등이 될 수 있다. 실제로는 몇 가지 예외가 있는데, 그중 가장 일반적인 것은 더 이상 존재하지 않거나 이동한 리소스를 가리키는 URL이다. URL로 표시되는 리소스와 URL 자체는 웹 서버에서 처리되므로 해당 리소스 및 관련 URL을 신중하게 관리하는 것은 웹 서버의 소유자에게 달려있다.

 

Deeper Dive

1. Basics : anatomy of a URL

다음은 URL의 몇 가지 예시이다.

https://developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL

해당 URL 중 하나를 브라우저의 주소 표시줄에 입력하여 연결된 페이지(리소스)를 로드하도록 지시할 수 있다.

 

URL은 필수 항목과 선택 항목으로 구성된다. 가장 중요한 부분은 아래 URL에 강조 표시 되어있다. (자세한 내용은 다음 섹션에서 다룬다) :

URL은 일반 우편 주소와 비슷하다고 생각할 수 있다. Scheme는 당신이 사용하기를 원하는 우편 서비스를 나타내고, domain name은 도시 또는 마을이며, port는 우편 번호와 같습니다. Path는 우편물이 배달되어야 하는 건물을 나타낸다. parameters는 건물의 아파트 번호와 같은 추가 정보를 나타낸다. 마지막으로, anchor는 당신에게 메일을 보낸 실제 사람을 나타낸다.

 

※ 참고 : URL과 관련된 몇 가지 추가 부분과 추가 규칙이 있지만, 그것들은 일반 사용자 또는 웹 개발자와는 관련이 없기 때문에 이것에 대해 걱정할 필요는 없다. 완전히 작동하는 URL을 구축하고 사용하기 위해 사용자는 그것들을 알 필요가 없다.

 

 

2. Scheme

URL의 첫 번째 부분은 scheme으로, 이것은 브라우저가 리소스를 요청하는 데 사용해야 하는 프로토콜을 나타낸다 (프로토콜은 컴퓨터 네트워크에서 데이터를 교환하거나 전송하기 위해 설정된 방법이다.). 일반적으로 웹 사이트의 프로토콜은 HTTPS 또는 HTTP(보안되지 않은 버전)이다. 웹 페이지 주소를 지정하려면 이 두 가지 중 하나가 필요하지만 브라우저는 mailto:(메일 클라이언트 열기)와 같은 다른 체계를 처리하는 방법도 알고 있으므로 다른 프로토콜을 봐도 놀랄 필요는 없다.

 

 

3. Authority

Scheme 다음으로는 authority가 나오는데, 이는 문자 패턴 ://에 의해 scheme과 구분된다. Authority는 도메인(예:www.example.com)과 포트(예:80)가 모두 포함되며 이 둘은 콜론으로 구분된다.

  • 도메인은 요청 중인 웹 서버를 나타낸다. 일반적으로 이것은 도메인 이름이지만, IP주소도 사용될 수 있다(그러나 IP주소는 훨씬 불편하기 때문에 잘 사용하지 않는다.).
  • 포트는 웹 서버의 리소스에 접근하는 데 사용되는 기술적 "gate"를 나타낸다. 웹 서버가 표준 포트(HTTP의 경우 80, HTTPS의 경우 443)를 사용하여 리소스에 대한 접근을 허용하는 경우 일반적으로 생략된다. 그렇지 않으면 필수이다.

※ 참고 : scheme과 authority의 구분자는 :// 이다. 콜론은 scheme을 URL의 다음 부분과 구분하고, //는 URL의 다음 부분이 authority임을 나타낸다. Authority를 사용하지 않는 URL의 한 가지 예시는 메일 클라이언트(mailto:foobar)이다. 이것은 scheme을 포함하지만 authority를 사용하지 않는다. 따라서 콜론 뒤에 두 개의 슬래시(//)가 나타나지 않으며 콜론은 scheme과 메일 주소 사이의 구분 기호 역할만 한다.

 

 

4. Path to resource

/path/to/myfile.html 은 웹 서버의 리소스에 대한 경로이다. 웹 초기에는 이와 같은 경로가 웹 서버의 물리적 파일 위치를 나타냈다. 요즘에는 대부분 웹 서버에 의해 처리되는 어떤 물리적 실체가 없는 추상적인 위치이다.

 

 

5. Parameters

?key1=value1&ket2=value2 웹 서버에 제공되는 추가 매개변수이다. 이러한 매개변수는 & 기호로 구분된 key와 value로 이루어진 쌍으로 구성된 리스트이다. 웹 서버는 리소스를 반환하기 전에 이러한 매개변수를 사용하여 추가 작업을 수행할 수 있다. 각 웹 서버에는 매개변수에 관한 매개변수에 관련된 고유한 규칙이 있으며, 특정 웹 서버가 매개변수를 처리하는지 여부를 확인하는 신뢰할 수 있는 유일한 방법은 웹 서버 소유자에게 문의하는 것이다.

 

 

6.Anchor

#somewhereInTheDocument는 리소스 자체의 다른 부분에 대한 anchor이다. Anchor는 리소스 내부의 일종의 "bookmark"를 나타내며 브라우저가 해당 "bookmark" 위치에 있는 내용을 표시하도록 지시한다. 예를 들어, HTML 문서에서 브라우저는 그 anchor가 정의된 지점으로 스크롤하고, 비디오 또는 오디오 문서에서 브라우저는 anchor가 나타내는 시간으로 이동한다. Fragment identifier(단편 식별자, 조각 식별자)라고도 하는 #의 뒤 부분은 request에 의해 서버로 전송되지 않는다는 점은 주목해 볼 만한 가치가 있다.

 

 

7. How to use URLs

 모든 URL은 브라우저의 주소 표시줄에 직접 입력하여 URL의 뒤에 있는 리소스에 접근할 수 있다. 그러나 이것은 빙산의 일각에 불과하다!

 

HTML 언어 -나중에 설명한다- 는 URL을 광범위하게 사용한다.

  • <a> 태그 element를 사용하여 다른 문서에 대한 링크를 생성한다
  • <link> 또는 <script>와 같은 다양한 elements를 통해 문서를 관련된 리소스와 연결한다.
  • 이미지(<img> element에 의한), 비디오(<video> element에 의한), 소리나 음악(<audio> element에 의한) 등과 같은 미디어를 표시한다.
  • <iframe> element에 의해 다른 HTML 문서를 표시한다.

※ 참고 : 페이지의 일부로서 리소스를 로드하기 위해 URL을 명시할 때(예를 들어, <script>, <audio>, <img>, <video> 등을 사용할 때) 일반적으로 HTTP 및 HTTPS URL을 사용해야 하며, 예외는 거의 없다.(주목할 만한 것은 data; Data URLs 참조) 예를 들어, FTP를 사용하는 것은 안전하지 않으며 이것은 더 이상 최신 브라우저에서 지원하지 않는다.

 

CSS나 JavaScript와 같은 다른 기술들은 URL을 광범위하게 사용하고 이것들은 실제로 웹의 핵심이다.

 

 

8. Absolute URLs vs. relative URLs

 우리가 위에서 본 것을 절대 URL이라고 하지만, 상대 URL이라고 불리는 것도 있다. URL표준은 URL objects(메모리 내에서 URL의 표현)과 구별하기 위하여 절대 URL 문자열과 상대 URL 문자열이라는 용어를 사용하지만 두 가지 모두를 정의한다.

 

 URL의 맥락에서 절대적인 것과 상대적인 것의 차이가 무엇인지 살펴보자.

 

 URL의 필수적인 부분은 URL이 사용되는 context에 따라 크게 달라진다. 브라우저의 주소 표시줄에서 URL은 어떤 context도 갖지 않기 때문에 위에서 본 것과 같이 full (or absolute) URL을 제공해야 한다. 프로토콜(브라우저는 기본적으로 HTTP를 사용한다) 또는 포트(대상 웹 서버가 비정상적인 포트를 사용하는 경우에는 필요함)를 포함할 필요는 없지만 URL의 다른 부분은 모두 필요하다.

 

URL이 HTML 페이지와 같은 문서에서 사용될 때는 상황이 약간 다르다. 브라우저가 이미 문서의 URL을 가지고 있기 때문에 이 정보를 사용하여 해당 문서 내에서 사용할 수 있는 URL의 누락된 부분을 채울 수 있다. 우리는 URL의 경로 부분을 보고 절대 URL과 상대 URL을 구분할 수 있다. URL의 경로 부분이 "/" 문자로 시작하는 경우, 브라우저는 현재 문서에서 제공하는 context를 참조하지 않고 서버의 최상위 루트에서 리소스를 가져온다.

 

 이를 명확하게 하는 몇 가지 예시를 살펴보자.

8-1. Examples of absolute URLs

  • Full URL (우리가 전에 사용했던 것과 같은 것)
https://developer.mozilla.org/en-US/docs/Learn

 

  • Implicit protocol (암시적 프로토콜)
//developer.mozilla.org/en-US/docs/Learn

이 경우 브라우저는 해당 URL을 호스트하는 문서를 로드하는 데 사용된 프로토콜과 동일한 프로토콜로 해당 URL을 호출한다.

 

  • Implicit domain name (암시적 도메인 이름)
/en-US/docs/Learn

 이것은 HTML 문서 내의 절대 URL에 대한 가장 일반적인 사용 사례이다. 브라우저는 해당 URL을 호스팅하는 문서를 로드하는 데 사용되는 프로토콜과 도메인 이름을 동일하게 사용한다. 

※ 참고 : 프로토콜을 생략하지 않고 도메인 이름을 생략할 수 없다. 

 

8-2. Examples of relative URLs

 다음 예시를 더 잘 이해하기 위해 URL이 다음 URL에 있는 문서 내에서 호출된다고 가정해 보자.

https://developer.mozilla.org/en-US/docs/Learn

  • Sub-resource (하위 리소스)
Skills/Infrastructure/Understanding_URLs

 해당 URL이 / 로 시작되지 않으므로 브라우저는 현재 리소스가 들어있는 하위 디렉토리에서 문서를 찾으려고 시도한다. 이 예시에서는 https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs 라는 URL에 접근하려 한다.

 

  • Going back in the directory tree
../CSS/display

 이 경우 UNIX 파일 시스템 월드에서 상속된 ../ 쓰기 규칙을 사용하여 브라우저에 하나의 디렉터리로부터 올라갈 것임을 알려준다. 여기서 우리는 https://developer.mozilla.org/en-US/docs/Learn/../CSS/display 라는 URL로 이동하려고 한다. 이것은 https://developer.mozilla.org/en-US/docs/CSS/display으로 단순화 될 수 있다.

 

 

9. Semantic URLs (의미론적인 URL)

 기술적인 특징에도 불구하고, URL은 사람이 읽을 수 있는 웹 사이트의 진입점을 나타낸다. 누구나 URL을 기억할 수 있고, 브라우저의 주소 표시줄에 URL을 입력할 수 있다. 웹의 중심은 사람이기 때문에 semantic URL이라고 불리는 것을 구축하는 것이 최고의 관행으로 간주된다. Sematic URL은 기술적인 노하우와는 상관없이 누구나 이해할 수 있는 고유한 의미의 단어를 사용한다. 

 

 물론 언어적인 의미론은 컴퓨터와는 관련이 없다. 당신은 랜덤 문자의 매시업(여러 가지 자료에서 요소들을 따와 새로운 노래·비디오·컴퓨터 파일 등을 만든 것)과 같은 URL을 자주 볼 수 있다. 그러나 사람이 읽을 수 있는 URL을 만드는 것은 많은 이점이 있다.

  • 당신이 URL들을 조작하는 것이 더 쉬워진다.
  • 사용자가 웹 상에서 어디에 있는지, 무엇을 하고 있는지, 무엇을 읽거나 상호 작용하는지에 대해 사용자에게 명확하게 한다.
  • 일부 검색 엔진은 이러한 sementics(의미론)을 사용하여 관련 페이지의 분류를 개선할 수 있다.

 

 

Next Chapter : What is a Domain Name?

출처 : https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL