웹 개발을 하다 보면 현재 페이지의 URL에서 호스트명(hostname)과 경로(path)를 분리해야 하는 경우가 자주 있습니다. 자바스크립트에서는 Window.location 객체를 사용하면 이를 아주 간단하게 처리할 수 있습니다.
Window.location이란?
Window.location은 읽기 전용 속성으로, 현재 문서의 위치 정보를 담고 있는 Location 객체를 반환합니다. 이 객체가 제공하는 다양한 속성을 활용하면 URL의 각 구성 요소를 손쉽게 추출할 수 있습니다.
Location 객체의 주요 속성
- Location.href — 전체 URL을 담고 있는 DOMString입니다. 값을 변경하면 해당 문서가 새 페이지로 이동하며, 연관된 문서와 다른 출처(origin)의 값으로도 설정할 수 있습니다.
- Location.protocol — URL의 프로토콜 스킴으로, 마지막 콜론(:)까지 포함됩니다. 예:
https: - Location.host — 호스트 정보로, 호스트명과 포트 번호(포트가 있는 경우)를 함께 반환합니다.
- Location.hostname — URL의 도메인 이름만 반환합니다.
- Location.port — URL에 지정된 포트 번호입니다.
- Location.pathname — 시작 슬래시(/)를 포함한 URL의 경로 부분입니다.
- Location.search — 물음표(?) 뒤에 오는 매개변수, 즉 쿼리스트링(querystring)입니다. 최신 브라우저에서는
URLSearchParams와URL.searchParams를 제공하여 쿼리스트링을 더욱 편리하게 파싱할 수 있습니다. - Location.hash — 해시(#) 뒤에 오는 프래그먼트 식별자(fragment identifier)입니다.
- Location.username — 도메인 이름 앞에 지정된 사용자 이름입니다.
- Location.password — 도메인 이름 앞에 지정된 비밀번호입니다.
사용 예제
다음 예제는 현재 페이지의 호스트명과 경로를 각각 추출하는 방법을 보여줍니다.
let hostname = location.hostname let path = location.pathname console.log(hostname) console.log(path)
현재 페이지의 URL이 다음과 같다고 가정해 보겠습니다.
https://www.tutorialspoint.com/ajax/index.htm
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 얻을 수 있습니다.
www.tutorialspoint.com /ajax/index.htm
이처럼 location.hostname으로 도메인을, location.pathname으로 경로를 손쉽게 분리할 수 있습니다. 별도의 정규식이나 문자열 처리 없이 브라우저가 기본 제공하는 Location 객체만으로 URL 파싱이 가능하기 때문에, 코드가 간결해지고 안정성도 높아집니다.