자바스크립트는 location 객체를 통해 현재 웹 페이지와 관련된 다양한 정보를 손쉽게 얻을 수 있도록 지원합니다. 특히 이 객체가 제공하는 window.location.protocol과 window.location.pathname 속성을 사용하면 현재 페이지의 프로토콜(protocol)과 경로(pathname)를 각각 확인할 수 있습니다. 지금부터 두 속성의 사용 방법을 예제와 함께 자세히 살펴보겠습니다.
1. 페이지 경로(Pathname) 가져오기
모든 웹 사이트에는 도메인 뒤에 붙는 고유한 경로(pathname)가 존재합니다. 자바스크립트의 location 객체에서 제공하는 window.location.pathname 속성을 사용하면 현재 페이지의 경로를 문자열 형태로 그대로 얻을 수 있습니다. 반환되는 값에는 항상 맨 앞의 슬래시(/)가 포함됩니다.
예제 코드
<html>
<body>
<p id="pathname"></p>
<script>
document.getElementById("pathname").innerHTML =
"Page path is: " + window.location.pathname;
</script>
</body>
</html>
실행 결과
Page path is: /cg/assets/jgCOmn.php
2. 프로토콜(Protocol) 가져오기
일반적으로 웹 사이트 주소는 https://로 시작합니다. 이 부분이 바로 해당 사이트의 프로토콜입니다. 프로토콜은 메시지가 어떤 형식으로 작성되고 전송되는지, 그리고 웹 서버와 브라우저가 다양한 명령에 어떻게 응답해야 하는지를 정의하는 통신 규약입니다. window.location.protocol 속성을 사용하면 현재 페이지에서 사용 중인 프로토콜(https:, http:, file: 등)을 확인할 수 있습니다.
예제 코드
<html>
<body>
<p id="protoname"></p>
<script>
document.getElementById("protoname").innerHTML =
"Protocol name is: " + window.location.protocol;
</script>
</body>
</html>
실행 결과
The page protocol is: https:
정리
이처럼 window.location.pathname으로 현재 문서의 경로를, window.location.protocol로 사용 중인 프로토콜을 간단히 조회할 수 있습니다. 두 값을 조합하면 디버깅, 로그 기록, 조건 분기 처리 등 다양한 상황에서 유용하게 활용할 수 있습니다.