JavaScript로 URL에서 모든 데이터 값을 가져오는 방법

JavaScript의 new URL() 생성자 메서드를 활용하면 URL 문자열에 담긴 모든 데이터 값을 객체 형태로 손쉽게 추출할 수 있습니다. 이번 글에서는 그 구체적인 사용 방법을 알아봅니다.

URL 데이터 값이 필요한 이유

예를 들어 웹사이트에 내부 검색 기능을 구축한다고 가정해 보겠습니다. 이런 기능을 제대로 구현하려면 URL 문자열에 포함된 모든 데이터 값(프로토콜, 호스트, 경로, 쿼리 파라미터 등)에 접근할 수 있어야 합니다.

다행히 JavaScript에는 new URL()이라는 생성자 메서드가 내장되어 있어, URL 문자열을 하나의 객체로 변환해 줍니다. 변환된 객체에는 URL을 구성하는 모든 속성과 값이 체계적으로 정리되어 있어 필요한 정보를 쉽게 꺼내 쓸 수 있습니다.

new URL() 객체 생성하기

사용 방법은 매우 간단합니다. 변수를 하나 선언한 뒤 new URL('your-url') 형태로 값을 할당하면 됩니다. 아래 예제에서는 TechStacker의 한 글 주소를 기반으로 URL 객체를 생성하고 있습니다.

const urlData = new URL('https://techstacker.com/how-to-detect-double-clicks-with-vanilla-javascript');

이제 결과를 콘솔에 출력해 보겠습니다.

console.log(urlData)

반환되는 URL 객체는 대략 다음과 같은 구조입니다.

var url = {
	hash: "",
	host: "techstacker.com",
	hostname: "techstacker.com",
	href: "https://techstacker.com/,how-to-detect-double-clicks-with-vanilla-javascript",
	origin: "https://techstacker.com",
	password: "",
	pathname: "/how-to-detect-double-clicks-with-vanilla-javascript"
	port: "",
	protocol: "https:",
	search: "",
	searchParams: "URLSearchParams {}",
	username: ""
};

hash, host, pathname, protocol, searchParams 등 URL을 이루는 요소들이 속성별로 깔끔하게 분류되어 있는 것을 확인할 수 있습니다.

특정 속성 값에 접근하기

객체가 준비되면 각 속성에 자유롭게 접근해 원하는 작업을 수행할 수 있습니다. 예를 들어 URL의 pathname(경로 부분)을 가져오려면 다음과 같이 작성합니다.

console.log(url.pathname)
// 출력 결과: "/how-to-detect-double-clicks-with-vanilla-javascript"

이처럼 new URL() 메서드만 알고 있으면 복잡한 문자열 파싱 없이도 URL의 모든 구성 요소를 안전하고 편리하게 다룰 수 있습니다. 특히 쿼리 스트링을 다룰 때 유용한 searchParams 속성(URLSearchParams 객체)까지 함께 제공되므로, 검색 기능이나 필터링 기능을 개발할 때 적극적으로 활용해 보시기 바랍니다.