[JSP&Javascript] 현재 URL 정보 가져오기

안녕하세요,

이번에는 URL 정보를 가지고 조작하는 방법에 대해서 포스팅을 해보겠습니다.

'window.location.href' -> 웹을 조금이라도 해보셨다면 눈에 익숙한 문법이라고 생각합니다.

보통 페이지를 전환시킬때 window.location.href='전환할 페이지 주소'; 를 사용하여 화면을 리다이렉트(Redirect) 시키는데요

이 포스팅을 쓰기 전까지 window.location.href로 현재 페이지를 가져오고, substr 함수로 제가 원하는 부분만 자른뒤 붙이고,

새로운 주소를 만들어 window.location.href='새로운 주소'; 형식으로 페이지를 전환시켰었습니다.

근데 이 location 뒤에 href 속성뿐만 아니라 더욱 많은 객체 속성들이 있었는지 아셨나요?

아래 내용을 통해서 살펴보도록 하겠습니다!

일단, Location 객체를 console을 통해서 웹으로 찍어봤습니다.

1. Location
1. ancestorOrigins: DOMStringList {length: 0}
2. assign: ƒ ()
3. hash: ""
4. host: "local.project1.test1.com:9002"
5. hostname: "local.project1.test1.com"
6. href: "https://local.project1.test1.com:9002/project1/ko/sign-up/login?returnUrl=%2Fproject1%2Fko%2Fcustomer-engagement%2Fevent%2Fdetail%2Fsocial-comment%3FeventCode%3D8796191411744"
7. origin: "https://local.project1.test1.com:9002"
8. pathname: "/project1/ko/sign-up/login"
9. port: "9002"
10. protocol: "https:"
11. reload: ƒ reload()
12. replace: ƒ ()
13. search: "?returnUrl=%2Fproject1%2Fko%2Fcustomer-engagement%2Fevent%2Fdetail%2Fsocial-comment%3FeventCode%3D8796191411744"
14. toString: ƒ toString()
15. valueOf: ƒ valueOf()
16. Symbol(Symbol.toPrimitive): undefined
17. __proto__: Location

찍힌 로그를 보시게되면 Locaiton 안에도 href 속성 뿐만아니라 host, hostname, search,,,,,등 많은 속성이 있다는것을 보실 수 있죠.

이를 통해서 특별한 경우, substr을 사용하여 현재 주소를 조작하지 않아도, 중요한 링크 정보를 뽑아내는것이 가능합니다.

(substr 같은경우 주소가 크게 바뀌게되면 유연하게 대응되지 못할 가능성이 있습니다... (프로그래밍적으로 보면 강결합에 해당하죠))

Location의 속성들을 사용하게 된다면 주소가 어떻게 바뀌던지간에 URL 틀에 맞춰서 해당 정보를 가져올 수 있습니다.

그럼, 각 속성들을 설명드리겠습니다.

현재 해당하는 URL 주소는 아래와 같습니다.

https://local.project1.test1.com:9002/project1/ko/sign-up/login?returnUrl=%2Fproject1%2Fko%2Fcustomer-engagement%2Fevent%2Fdetail%2Fsocia...

이 URL을 기준으로 출력되는 결과를 아래에 설명하겠습니다.

location.protocol : protocol: "https:"

프로토콜 여부에 따라서 (http / https) 정보를 가져오게됩니다. 

저는 "https:" 로 출력이 되었네요.

location.port : port: "9002"

현재 주소의 포트번호가 찍히게 됩니다. 

저는 "9002"로 출력이 되었네요.

location.host : host: "local.project1.test1.com:9002"

현재 주소의 host명이 찍히게 됩니다.

https://를 제외한 주소 앞쪽의 host명이 찍히게 되네요.

location.hostname : hostname: "local.project1.test1.com"

현재 주소의 host명에서 포트번호가 제외되고 출력됩니다.

location.host에서 ":9002"가 제외되고 찍혔네요.

location.origin : origin: "https://local.project1.test1.com:9002"

현재 주소의 https + host명까지 찍히게 됩니다.

protocol + host라고 보시면 되겠네요..

location.href : href: "https://local.project1.test1.com:9002/project1/ko/sign-up/login?returnUrl=%2Fproject1%2Fko%2Fcustomer-engagement%2Fevent%2Fdetail%2Fsocial-cia...

많이 보셨듯이 현재 주소가 찍히게 됩니다.

location.pathname : pathname: "/project1/ko/sign-up/login"

location.host 이후 부분이 모두 찍히게 됩니다.

만약, get 방식으로 '?' 뒤에 데이터를 보내주게 된다면 그 이전까지 찍히게 됩니다.

location.search :  search: "?returnUrl=%2Fproject1%2Fko%2Fcustomer-engagement%2Fevent%2Fdetail%2Fsocial-comment%3FeventCode%3D8796191411744"

데이터를 get방식으로 보내주는 주소가 찍히게 됩니다.

"?(key): (value)............." 형식으로 출력되게 됩니다.

그럼 QUIZ 입니다~~ 

현재 주소가 http://local.one.two.com:9001?returnUrl=%!@#K@N@# 라면 다음 코드에 어떤 결과값이 나올까요?

console.log(location.origin);

http://local.one.two.com:9001  <----드래그 해서 정답을 확인하세요!

잘 맞추셨나요 ~?

여태까지 substr을 이용해서 하드하게 코딩한것을 location 객체 하나만 가지고 표현할 수 있었습니다.

그럼 포스팅을 마치겠습니다~~~ 안녕~~