[Javascript] URL 객체

 

 

과거, 자바스크립트에서는 URL을 일반 문자열로 다루는 경우가 많았으나 URL 문자열은 엄격한 규격을 따르기 때문에 버그가 생기기 쉬웠다. 그러므로 URL에서 특정 요소를 추출하거나 조작하는 데 적지 않은 주의가 필요하게 되었다. 이러한 문제점을 보완하기 위해 대부분의 브라우저와 자바스크립트 런타임에서는 URL API를 지원하고 있는데, 이 웹 표준 API를 이용하면 웹 주소를 보다 쉽고 안전하게 자바스크립트로 다룰 수 있게 된다.

 

URL API는 크게 웹 주소를 다루기 위한 URL 객체와 쿼리 스트링을 다루기 위한 URLSearchParams로 나뉘는데, 본 포스팅에서는 URL 객체에 대해서만 다뤄 보고 URLSearchParams는 별도의 글에서 다루도록 하겠다.

 

URL의 기본적인 구성요소에 대해서는 아래 글을 참조.

https://developing-move.tistory.com/246

 

 

 

URL 객체의 생성

자바스크립트에서 URL API를 사용하려면 우선 URL 객체를 생성해야 하는데, URL() 생성자에 문자열 형태의 웹 주소를 전달하면 URL 객체가 만들어진다. 이때 URL에 다국어나 특수문자가 포함되어 있다면 자동으로 처리해 준다.

new URL('http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument');

 

 

또한 URL() 생성자는 인자로 넘어온 URL 문자열의 유효성을 검사하여 유효하지 않은 경우에는 에러를 발생시킨다. 그러므로 개발자는 더욱 안전하게 자바스크립트로 URL을 다룰 수 있게 되는 것이다.

new URL("user@test.com"); // Failed to construct 'URL': Invalid URL

 

 

 

 

URL 객체의 속성

URL 객체에는 URL을 구성하고 있는 모든 요소들이 속성으로 저장되어 있어서 각 요소에 쉽게 접근할 수 있도록 해 준다.

 

const url = new URL('http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument');

url.protocol;	// 'http:'
url.hostname;	// 'www.example.com'
url.port;	// '8080'
url.pathname;	// '/path/to/myfile.html'
url.search;	// '?key1=value1&key2=value2'
url.hash;	// '#SomewhereInTheDocument'

url.host;	// 'www.example.com:8080'
url.origin;	// 'http://www.example.com:8080'
url.href;	// 'http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument'

 

 

URL 객체의 속성은 이처럼 읽을 수 있을 뿐만 아니라 쓸 수도 있다. 따라서 특정 속성을 갱신함으로써 쉽게 새로운 URL을 얻을 수 있다.

const url = new URL('http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument');

url.pathname;	// '/path/to/myfile.html'
url.pathname = '/newPath';
url.href;	// 'http://www.example.com:8080/newPath?key1=value1&key2=value2#SomewhereInTheDocument'

url.hash;	// '#SomewhereInTheDocument'
url.hash = '#newAreaInTheDocument';
url.href;	// 'http://www.example.com:8080/newPath?key1=value1&key2=value2#newAreaInTheDocument'

 

 

그러나 예외적으로 origin 속성의 경우 읽기 전용이라 주의가 필요하다. 다른 속성들처럼 새로운 값을 할당한다고 해도 URL 객체에 반영이 되지 않기 때문.

const url = new URL('http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument');

url.origin = 'http://127.0.0.1:1234';

url.origin;	// 'http://www.example.com:8080'
url.href;	// 'http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument'

 

 

 

 

 

URL 객체의 함수

URL 객체에는 toString() 함수가 있는데 href 속성 대신에 사용할 수 있으며 차이점이라면 toString()으로는 값을 읽을 수만 있고 수정은 불가능하다는 점이다. 또한 이처럼 URL 객체의 toString() 제공으로 인해 자바스크립트의 fetch() 함수의 인자로 바로 넘기는 것도 가능하다.

 

const url = new URL('http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument');

url.toString();	// 'http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument'

fetch(url);

 

 

 

 

Base URL 활용

URL() 생성자에 두 번째 인자로 Base URL을 넘기면 첫 번째 인자로 절대 경로 또는 상대 경로를 사용할 수도 있다.

const url1 = new URL('/xx', 'http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument');
url1.href;  // 'http://www.example.com:8080/xx'

const url2 = new URL('xx', 'http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument');
url2.href;  // 'http://www.example.com:8080/path/to/xx'

const url3 = new URL('../xx', 'http://www.example.com:8080/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument');
url3.href;  // 'http://www.example.com:8080/path/xx'

 

 

이 기능은 특히 현재 브라우저에서 열린 URL을 기준으로 다른 URL을 만들 때 유용하다.

const newUrl = new URL('/new', window.location);
newUrl.href;  // <현재 URL>/new
location.assign(newUrl.href);  // 새로운 페이지로 이동