[Javascript] URL의 구성요소

 

 

웹 개발에서 URL을 다루는 일은 빈번하게 발생한다. 프론트엔드에서는 URL로 다른 웹 페이지로 링크를 걸거나 자바스크립트, CSS 코드를 불러 오며 이미지, 오디오, 비디오 등의 멀티미디어를 제공할 수도 있다. 반면 백엔드에서는 요청 URL의 경로에 따라 DB에 저장되어 있는 데이터를 조회하고 URL의 쿼리스트링으로 넘어온 매개변수에 따라 다른 데이터를 처리해 줄 수 있다.

 

 

 

URL이란?

많은 사람들이 매일 같이 URL을 사용하고 있으면서도 정작 그 URL이라는 게 무엇인지에 대해서는 진지하게 생각해 볼 일이 없었을 것 같다. URL(Uniform Resource Locator)이란 쉽게 말해서 웹에서 사용되는 주소. 웹상에서 모든 자원(resource)에 유일한 주소가 부여되어야 브라우저가 웹 사이트를 방문하고 이미지나 비디오 등을 불러올 수 있는 것이다. 이러한 URL에는 역시 미리 약속된 규약과 표준화된 문서가 존재한다.

 

 

 

 

URL의 구성요소

 

https://developer.mozilla.org/ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL

 

 

 

맨 앞의 http:는 스키마(scheme) 또는 프로토콜(protocol)을 나타내는데, 브라우저가 웹 서버에 리소스를 요청하는 데 사용해야 하는 통신 프로토콜을 의미한다. 프로토콜은 네트워크상에서 데이터를 교환하거나 전송하기 위한 설정 방법에 해당한다. 다양한 프로토콜이 있지만 일반적으로 웹 사이트에 접근할 때는 http 또는 보다 안전한 https가 사용된다.

 

 

 

다음으로 www.example.com 부분은 hostname이라고 하는데 일반적으로는 예시와 같이 도메인 네임(domain name, 예시: www.example.com)으로 표기되지만 127.0.0.1과 같이 IP 주소를 사용할 수도 있다(그러나 IP 주소를 사용하는 것은 훨씬 불편하기 때문에 자주 사용하지는 않는다).

 

 

 

hostname 뒤에  :  기호가 나오고 다음에 나오는 숫자는 포트(port)를 의미한다. 포트는 웹 서버의 리소스에 접근하는 데 사용되는 기술적인 '게이트'를 나타낸다. 현실 세계에 비유하자면 hostname이 아파트 한 동이고 port를 각 호라고 할 수 있다. 하나의 서버에는 여러 개의 출입구가 있고 각 출입구에 번호가 붙어 있다고 상상해 볼 수 있겠다. 웹 서버가 리소스에 대한 권한을 부여하기 위해 HTTP 프로토콜 표준 포트(HTTP의 경우 80, HTTPS의 경우 443)를 사용하는 경우에는 일반적으로 생략한다(그렇지 않으면 필수).

 

cf) 지금까지의 프로토콜, 호스트네임, 포트를 묶어 출처(origin)이라고도 하는데, 이는 브라우저에서 보안상의 이유로 다른 출처로의 HTTP 요청을 제한하는 CORS(Cross-Origin Resource Sharing)의 토대가 된다.

 

 

 

그 다음의 /path/to/myfile.html은 웹 서버에 있는 리소스의 경로 또는 경로명(pathname)이라고 하며 해당 리소스가 어디에 위치하는지 나타낸다. 과거에는 실제로 서버의 하드 드라이브 내에서 물리적인 파일의 경로를 사용하고, 따라서 경로 맨 뒤에 파일 확장자까지 붙는 경우가 많았으나 근래에는 웹 서버의 자체적인 routing을 통해 논리적인 위치를 나타내는 경우가 더 많은 추세이다.

 

 

 

?key1=value1&key2&value2 부분은 보통 쿼리 스트링(query string) 또는 검색 매개변수(search parameter)라고도 부르는데 웹 서버에 제공되는 추가 매개변수에 해당된다. 이는 &로 구분된 키와 값의 쌍 목록이다. 위 예시에서와 같은 형태로 여러 개의 키와 값의 쌍을 매개변수로 할 수도 있으며 ?key=value1&key=value2와 같이 하나의 키에 여러 개의 값을 사용할 수도 있다. 웹 서버는 리소스를 반환하기 전에 이러한 매개변수를 활용하여 다양한 추가 작업들(필터링_filtering, 페이지네이션_pagination, 정렬_sorting 등)을 수행할 수 있다.

 

 

 

URL의 가장 마지막 부분인 #SomewhereInTheDocument은 앵커(anchor), 해시(hash), 조각(fragment) 등 다소 다양한 이름으로 불리는데 리소스 내에서 특정 부분을 나타내는 데 사용되며 특히 긴 콘텐츠의 목차를 구현할 때 유용하게 사용된다. 리소스 내부에서 일종의 책갈피 역할을 하는 것이다. 예를 들어 HTML 문서에서 브라우저는 앵커가 정의된 지점으로 스크롤하며 비디오나 오디오 문서에서 브라우저는 앵커가 나타내는 시간으로의 이동을 시도한다. 이러한 앵커 또는 해시는 클라이언트에서만 의미가 있는 부분이기 때문에 웹 서버로는 전송되지 않는다.