window의 location에 대해 알아보자

0. 들어가기 전

 최근 회사에서 업무를 보면서 History에 대한 부분에 이슈가 있었다. 브라우저에서 이동을 하는 과정에서 기록을 남기지 않고 가야하는 이슈가 있었는 데, 이에 대해 window.location.href를 이용하여 이동하는 것이 아니라 window.location.replace를 이용하여 해결을 했지만 해당 객체에 대한 정리가 필요할 거 같아서 작성을 한다.

 

 

1. Location 객체

window.location은 Location 객체를 가르킨다. 우리는 Location 객체를 이용하여 현재 웹 페이지의 URL 정보를 얻거나, 변경할 수 있다. Location 객체에는 데이터에 대한 정보를 받아올 수 있는 인스턴스의 속성과 메서드로 구성되어있다.

 

 

Location은 읽기 전용의 프로퍼티지만 주소 문자열을 할당하면 해당 주소로 이동하는 기능도 존재한다.

 

2. Location 객체의 Properties

오늘은 아래의 도메인을 기준으로 호스팅을 할 것이다.

http://localhost:8080/hello?name=김인후

(1) window.location.protocol

브라우저를 보면 https://google.com과 같은 도메인을 사용하는 것이 일반 적인데 여기서 https: 부분은 프로토콜의 종류이다. 보통은 웹에서는 Https 프로토콜을 사용한다.

 

window.location.protocol은 현재 브라우저의 protocol을 의미한다.

console.log(window.location.protocol) // http:

 

(2) window.location.host

window.location.host를 이용하면 현재 브라우저의 호스트가 무엇인지 알 수 있다.

console.log(window.location.host) // localhost:8080

 

(3) window.location.hostname

URL의 도메인을 포함하는 문자열을 의미한다.

console.log(window.location.hostname) // localhost

 

(4) window.location.pathname

URL에서 호스트와 쿼리 파라메터를 제외한 URL 경로가 들어간 문자열이다.

console.log(window.location.pathname) // /hello

 

(5) window.location.search

쿼리 파라메터를 식별할 수 있는 문자열이다.

console.log(window.location.search) // ?name=123

 

이외에도 origin, hash 등의 속성이 존재하지만 중요한 것들 위주로만 정리한다.

 

 

(3) Location 객체의 메서드

(1) window.location.reload()

 

새로고침 버튼과 같이 현재 URL을 다시 로드한다.

 

(2) window.location.replace()

현재 경로에서 매개변수로 넘긴 경로로 이동을 하는 데, history가 남지 않기에 뒤로 가기를 눌러도 기존 페이지로 이동을 할 수가 없다.

 

(3) window.location.toString()

전체 URL이 포함된 문자열을 리턴한다.

 

(4) window.location.href

window.location.href는 메서드가 아니라 속성이지만 해당 속성에 값을 주입함으로 현재 경로를 변경할 수 있다. window.location.replace()와 다른 것은 histotry를 남긴다는 것이다.

 

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