자바스크립트 현재 URL 경로 가져오기

올바른 이해와 사용 방법

현재 페이지의 URL 경로는 window.location.pathname 속성으로 가져올 수 있습니다.

window.location.pathname 속성은 현재 URL을 표준 URL 구조로 분석한 결과에서 경로 정보를 문자열로 반환합니다. 경로가 없으면 빈 문자열("")을 반환합니다.

참고하세요!
window.location.pathname 속성은 보통 줄여서 location.pathname라고만 작성하는 경우도 많습니다.
브라우저에서는 window 객체가 전역 객체이므로, window.location는 줄여서 location만으로도 동일하게 사용할 수 있습니다.

문자열로 반환되는 URL의 경로 정보

URL에서 경로란 도메인 뒤에 슬래시(/)로 구분되어 오는 주소의 일부로 웹 페이지나 리소스의 위치를 나타냅니다.
예를 들어 https://example.com/products/list에서 /products/list 부분이 경로에 해당합니다. 좀 더 기술적인 용어로 'pathname'이라고 합니다.

주의할 점

도메인 뒤에 슬래시(/)로 구분되어 오는 주소의 일부를 경로라고 하지만, 이 경로에 물음표(?)나 해시(#)가 포함되어 있으면 이 부분부터는 경로에 포함되지 않습니다.

window.location.pathname 속성은 현재 URL에서 사용되는 pathname, 즉 경로를 문자열로 반환합니다.

기본 예제

현재 웹 페이지가 어떤 경로인지 확인하고 콘솔에 출력하는 가장 단순한 코드입니다.

window 객체는 생략할 수 있으며, 보통 location.pathname을 사용합니다.

JavaScript

/* 전체 URL 예: https://www.example.com/products/list?page=1#review */
console.log(location.pathname); // console.log(window.location.pathname)과 동일
// 출력: "/products/list"

루트 URL의 경로 정보 가져오기

브라우저 주소창에 https://example.com를 입력하여 해당 주소로 이동했다고 가정하겠습니다.
이 가정처럼 도메인 뒤에 슬래시(/)로 구분된 경로나 파일명 등을 덧붙이지 않은 가장 기본이 되는 웹 주소를 루트 URL(Root URL)이라고 합니다.

사람의 눈으로 이 브라우저 주소창을 보면 언뜻 느낄 때 URL의 경로가 없는 것처럼 보입니다. 왜냐하면 눈으로 보기엔 도메인(example.com) 뒤에 슬래시(/)로 구분된 경로가 없기 때문입니다.

하지만, 예상과는 다르게 window.location.pathname 속성으로 경로를 가져오면 아래의 코드 예제처럼 "/"라는 문자열을 반환합니다.

이것은 window.location.pathname 속성을 사용하는 개발자에게 헷갈림이 가장 많이 생기는 포인트입니다.

아마도 window.location.pathname 속성은 경로가 없으면 빈 문자열("")을 반환할것이라는 예상과 달리 "/"라는 문자열을 반환하기 때문입니다.

표준 URL 구조에서는 경로가 항상 존재함

일반적으로 알고 있는 http와 https는 URL에 사용되는 표준 프로토콜입니다.
표준 프로토콜에는 이 두 가지 외에도 ftp, file, ws, wss가 더 있습니다. 이러한 프로토콜은 자바스크립트 URL 표준 명세서에서 special scheme이라고 하며, 이러한 프로토콜을 사용하는 URL은 표준 URL 구조를 따르므로 경로가 항상 존재합니다. 표준 URL 구조에는 경로가 포함되어 있으며, 브라우저 주소창에 경로가 없는 것처럼 보이더라도 URL 구조상으로는 경로가 있는 것으로 처리됩니다.

따라서, 브라우저 주소창에 https://example.com처럼 도메인만 표시되어 있더라도 window.location.pathname 속성으로 현재 URL의 경로를 가져오면 빈 문자열("")이 아니라 "/"를 반환합니다.

활용 예제

현재 웹 페이지의 경로를 확인하여 특정 페이지에서만 기능을 활성화하거나 비활성화할 때 사용합니다.

JavaScript

/* 현재 URL 예: https://www.example.com/admin/preview */

if (location.pathname === "/admin/preview") {
    // 미리보기 페이지에서만 기능 활성화
    console.log("미리보기 기능 활성화");
} else {
    // 그 외의 페이지에서는 기능 비활성화
    console.log("기능 비활성화");
}