[Javascript] URL페이지를 Location, Redirect, Reload 통해 살펴보자.

Javascript를 통해 URL 페이지를 관리할 때 loaction.load, location.href 등을 많이 사용했다.

사용할 때마다, 자연스럽게 손에 익어 타자를 치고 실행을 했지만 정확하게 살펴본 적이 없었다.

운 좋게 미디엄 포스팅에서 관련 내용이 있어서 한번 의역 위주로 번역해보았다.

원문은 아래 링크를 참고

https://betterprogramming.pub/redirect-refresh-and-access-the-url-of-the-current-page-in-javascript-3d9160e8317e

Redirect, Refresh, and Access the URL of the Current Page in JavaScript

 

Location in Javascript

개요

window.location을 통해 현재 페이지 URL에 대해 접근할 수 있다.

a 태그를 사용하지 않고 javascript를 통해 페이지를 이동하기 위해서는 location 속성을 사용해야 한다.

 

location.href = "new url"

location.assign("new url")

location.replace("new url")

 

locaion.href, location.assign은 history 관리가 가능하다. 이 말은, 뒤로 가기, 앞으로 가기가 가능하다.

location.replace는 history 관리를 안 하기 때문에 뒤로 가기, 앞으로 가기는 할 수 없다.

 

페이지를 새로고침 할 때는

 

// from cache
window.location.reload()
window.location.reload(false) // default

// from server
window.location.reload(true)

true를 사용한 경우에는 서버에서부터 강제로 새로고침을 하게 하고,

default로 false인데 false를 사용하면 cache에서부터 페이지를 새로고침 한다.

Location 객체 프로퍼티

1. Href

현재 페이지 URL 전체

location.href

href를 사용해 페이지를 이동하려면 할당을 해야 한다.

http/https를 꼭 넣어줘야 한다. 안 넣어주면 해당 페이지에서 요청하게 된다.

location.href = "https://google.com"



현 페이지 : https://google.com
location.href  = "naver.com"

https://www.google.com/naver.com

2. Protocol

현재 페이지의 프로토콜(http, https)

location.protocol; // https:

3. Host

웹사이트 hostname, port

location.host // medium.com

const anchor = document.createElement('a');
anchor.href = 'https://medium.com:4098'
anchor.host // 'medium.com:4098'

4. Hostname

웹사이트 hostname

location.host // "medium.com"

5. Port

port를 보여준다.

만약 port가 URL에 명시되어 있지 않으면 빈 값으로 보인다.

const anchor = document.createElement("a");
anchor.href = "https://medium.com:4097"
anchor.port // "4097"

6. Pathname

hostname 뒤에 있는 path

location.href // "https://github.com/nuxt/nuxt.js/"
location.pathname // "/nuxt/nuxt.js/"

7. Search

URL의 search 부분을 반환한다. (querystring인 듯)

location.href // "https://www.google.com/search?q=javascript+strengths&sxsrf=ALeKk01ZfUXG2Jv8zhBYxOFFjLcUmKDySQ%3A1623745149537&source=hp&ei=fWLIYI3THsn7-QbxmLW4BA&iflsig=AINFCbYAAAAAYMhwjSr3rlV-0UdqHHW9MF-W07cqvK9V&oq=javascript+stren&gs_lcp=Cgdnd3Mtd2l6EAMYAzIECAAQDTIECAAQDTIECAAQHjIECAAQHjIICAAQDRAKEB4yBggAEA0QHjIECAAQHjIGCAAQCBAeMgYIABAIEB4yBggAEAgQHjoECCMQJzoECAAQQzoHCCMQ6gIQJzoKCAAQsQMQgwEQQzoHCAAQsQMQQzoFCAAQsQM6AggAOggIABCxAxCDAVCqBFinP2CUU2gEcAB4AIABvgGIAcwVkgEEMC4yMJgBAKABAaoBB2d3cy13aXqwAQo&sclient=gws-wiz"
location.search // "?q=javascript+strengths&sxsrf=ALeKk01ZfUXG2Jv8zhBYxOFFjLcUmKDySQ%3A1623745149537&source=hp&ei=fWLIYI3THsn7-QbxmLW4BA&iflsig=AINFCbYAAAAAYMhwjSr3rlV-0UdqHHW9MF-W07cqvK9V&oq=javascript+stren&gs_lcp=Cgdnd3Mtd2l6EAMYAzIECAAQDTIECAAQDTIECAAQHjIECAAQHjIICAAQDRAKEB4yBggAEA0QHjIECAAQHjIGCAAQCBAeMgYIABAIEB4yBggAEAgQHjoECCMQJzoECAAQQzoHCCMQ6gIQJzoKCAAQsQMQgwEQQzoHCAAQsQMQQzoFCAAQsQM6AggAOggIABCxAxCDAVCqBFinP2CUU2gEcAB4AIABvgGIAcwVkgEEMC4yMJgBAKABAaoBB2d3cy13aXqwAQo&sclient=gws-wiz"

8. Hash

URL에서 #(hash)를 포함한 부분

타깃이 될 페이지의 아이디이다.

location.href // "https://html.spec.whatwg.org/multipage/history.html#dom-location-hash-dev"
location.hash // "#dom-location-hash-dev"

#가 없으면 빈캆('')이다. 

9. Origin

URL에서 origin

location.href // "https://developer.mozilla.org/en-US/docs/Web/API/Location/origin"
location.origin // "https://developer.mozilla.org"

여기까지 location에 property을 살펴봤다.

살펴보는 도중에 URL에서 어디서부터 어디가 어떤 건지 궁금하면 맨 처음에 봤던 이미지를 참고하면 좀 더 쉽게 이해가 될 것 같다.

모르고 계속 잊어버리면 여기를 즐겨찾기 하면 됩니다.

 

Location 객체 메서드

1. assign

location.assign('https://medium.com');

파라미터로 적은 URL로 리다이렉트 시킨다.

history관리가 된다.(뒤로 가기, 앞으로 가기 가능)

2. reload

현재 페이지에서 새로고침(refresh)을 한다.

true 파라미터를 넘겨줄 때는 서버에서부터 새로고침 하고

파라미터를 넘기지 않거나, false로 넘길 때는 캐시에서부터 새로고침 한다.

// defaults - from cache
location.reload();
location.reload(false);

// from server
location.reload(true);

3. replace

assign 하고 하는 역할은 비슷하다.

하지만, history 세션 관리가 되지 않는다는 차이점이 있다.

뒤로 가기 기능을 사용할 수가 없다.

location.replace('https://medium.com');

 

4. toString

URL을 string으로 반환해준다.

// https://claude-e-e.medium.com/ways-to-use-svg-in-your-html-page-dd504660cb37

location.toString(); // "https://claude-e-e.medium.com/ways-to-use-svg-in-your-html-page-dd504660cb37"

 

결론

자주 쓰는 게 아니고 특별한 상황에서 사용하는 거라 그때그때 검색하면서 대충 되는 걸로 사용했었는데, 이번 포스팅을 통해 어떤 상황에서 프로퍼티, 메서드를 사용해야 될지 기준이 정해진 것 같다.

네이버 웹툰 광장에 기준