[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 객체가 사용하는 속성들을 아래 그림처럼 구분할 수 있습니다.

출처 : https://blogpack.tistory.com/105

 

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을 더한 후 변수에 담아 사용하였습니다.

 

 

출처 및 참고

http://www.tcpschool.com/javascript/js_bom_location

https://blogpack.tistory.com/105