[javascript] 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 Locator)이 어떤 부분들로 구성되어지는지와 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 붙은 것이 짧은것이라고 개념을 잡아두면 됩니다.