본문 바로가기

Javascript&jQuery

location 객체와 URL 을 이해하자.

자바스크립트에서 URL과 관련된 정보를 담고 있는 객체는 "location" 객체입니다.

자바스크립트로 URL과 관련해서 가장 많이 사용하는 속성값은


location.href


입니다.

너무 자주 사용해서 아무렇지도 않게 쓰고 있지만


정확하게는

location 객체의 "href" 속성값을 읽는 것이고

이 속성은 현재 페이지의 전체 URL을 담고 있습니다.


URI가 될 수도 있고, 다른 것일 수도 있지만, 여기서는 웹과 관련한 URL에 대해서만 다루어 봅니다.


location 객체는 

DOM의 최상위 객체인 window 객체에 바로 붙어있습니다.

보통 window 객체명은 생략할 수 있기 때문에 


location.href


로 사용하지만 정확하게는


window.location.href


라고 사용하는 것이 정확합니다.


제이쿼리에서는 

location객체를 제이쿼리 객체로 변환해서 속성값을 읽게 됩니다.


$(location).attr('href')


이렇게 하면

"location.href" 와 동일한 결과를 얻게 됩니다.


그전에 URL(Uniform Resource Loactor)이 어떤 부분들로 구성되어지는지와 location 객체가 사용하는 속성들을 아래 그림처럼 구분할 수 있습니다.




처음에 이걸 배우던 시절에는


각 영역 파트(노랑색)를 PUHPPQA 라고 첫글자를 따서 외웠고, 뻐ㅋㅇ(발음이 다소 위험할 수 있으므로...) 로 외웠고

3개 4개를 나눠서

P U H - P P Q A 로 나눠서 전화번호호 처럼 외웠습니다.

그래서인지 URL 관련해서는 원하는 걸 얻는데 혼동하는 일이 어지간해서는 없습니다.


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

프로토콜(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://aport.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


Hostname, Pathname 과 Host, Path를 가끔 혼동하는 경우가 생기는데 location 객체에는 "path" 속성이 없고

name 붙은 것이 짧은것이라고 개념을 잡아두면 됩니다.