[Javascript] location 객체 이해하기
안녕하세요 코북입니다. 이번 개발 건 진행 중 현재 페이지의 주소를 자바 스크립트로 가져와야 하는 상황이 있었습니다. C#으로는 구현해본 경험이 있었지만 javascript로는 처음 구현해봤는데요. location객체에 대한 이해가 많이 부족하다고 느껴 정리해보려고 합니다.
자바스크립트의 location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있습니다. 이 객체는 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있습니다. location 객체의 프로퍼티와 메서드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있습니다.
우리가 가장 많이 사용하는 location 객체의 속성 값은 아마 href 일 것입니다.
window.location.href
document.location.href
location.href // 생략 가능자주 사용하다 보니 기계적으로 location.href를 사용할 수 있는데, location 객체에는 href 이외에도 다양한 속성을 가지고 있습니다. 각 속성에 대해 알기 전에 URL이 어떤 부분들로 구성되어 있는지와 location 객체가 사용하는 속성들을 아래 그림처럼 구분할 수 있습니다.
URL은 다음과 같이 나눠집니다. (노란색)
| URL | 설명 |
| Protocol | 프로토콜(http, https) |
| User information | 사용자 로그인 정보. 콜론으로 구분해 "아이디:패스워드" 와 같은 형식으로 입력. |
| Hostname | 호스트명. 도메인. |
| Port | 포트. 80, 443과 같이 연결 포트를 지정. 프로토콜이 http이면 80포트 생략 가능. 프로토콜이 https이면 443포트는 생략 가능. |
| Path | 도메인 하위 경로 ?로 시작하는 쿼리스트링 앞까지 해당. |
| Query string | 패스로 전달되는 파라메터값. ?에서 시작해 #으로 시작하는 Anchor 또는 Hast 앞까지 해당. |
| Anchor | 앵커. 해시. 현재 웹 페이지 안의 위치를 id 값으로 표시. 페이지 내 해당 위치로 이동하는데 사용. |
location 객체 속성은 이 URL에 다음의 속성으로 접근해 사용합니다. (빨간색)
| location 속성 | 설명 |
| href | URL 전체 |
| Protocol | Protocol, 프로토콜(http, https) |
| Host | Hostname + Port URL에 포트가 명시되지 않은 경우 Host와 Hostname은 동일 값 반환 |
| Hostname | 도메인 |
| Port | 포트. 80, 443과 같이 연결 포트를 지정. 프로토콜이 http이면 80포트 생략 가능. 프로토콜이 https이면 443포트는 생략 가능. |
| Pathname | 현재 실행 페이지. Path의 마지막 경로. "/"로 끝날 경우 서버에서 지정한 기본 페이지로 자동 지정되지만, 클라이언트인 자바스크립트에서는 비어있게 됨. |
| Origin | Protocol + Hostname + Port |
| Search | Query String |
| Hash | Anchor |
예를 들어
https://cobook.kr:443/post/write/form?id=110#content
이런 형태인 URL이 있다면 이런 속성 결과 값을 얻게 됩니다.
| location 속성 | 리턴값 |
| href | https://aport.kr:443/post/write/form?id=110#content |
| origin | https://aport.kr:443 |
| host | aport.kr:443 |
| hostname | aport.kr |
| protocol | https: |
| port | 443 |
| pathname | form |
| search | ?id=110 |
| hash | #content |
저는 현재 페이지의 주소 값만 필요했기 때문에
var now_url = document.location.protocol + document.location.hostname;다음과 같이 protocol과 hostname을 더한 후 변수에 담아 사용하였습니다.
출처 및 참고