신기한 브라우저의 세계 : window 편 - location
자바스크립트를 공부하면서 window.어쩌구 의 형태로 이루어진 문법들을 가끔가다 한 번씩 보았다. 지금까지는 그 문법에 대해 깊게 생각하기 보다 그냥 window 객체 중 하나구나~ 정도로만 알고 지나갔다.
그러다 이번 주에 페이지네이션을 만들면서 window.location 이라는 것을 접하게 되었고, 이것을 정말 내 것으로 만들기 위해 정리하고자 한다.
window 객체
window 객체는 웹 브라우저의 창을 나타내는 객체이다. 자바스크립트에서 사용하는 모든 객체, 전역 함수, 전역 변수들은 window의 프로퍼티라고 할 수 있다.
🤔 그런데 왜 window.어쩌구 의 형태로 쓰인 문법을 자주 보지 못했을까?
그냥 window라는 접두사를 생략할 수 있기 때문이다. 그래서 우리는 자주 window.어쩌구 를 볼 수 없었던 것이다.
window 객체의 프로퍼티
console.log(window) 라고 입력해보면 정말 많은 window의 프로퍼티가 있음을 알 수 있다.
이렇게 수 많은 프로퍼티 중 오늘 내가 정리할 window 객체의 프로퍼티는 window.location 이다.
window.location
console.log(window.location)
window 객체의 location이라는 프로퍼티에 접근하면 Location 이라는 객체를 얻어올 수 있다.
Location 객체
Location 이라는 객체에는 url과 관련된 정보들이 들어있다.
window.location.href
현재 페이지의 url을 값으로 가지고 있다.
만약 이런 식으로 완전한 url을 값으로 할당하게 된다면
그 url을 가진 페이지로 이동한다.
window.location.protocol
url의 프로토콜 부분, : 까지를 값으로 가지고 있다.
window.location.host
url의 호스트 부분을 호스트명, :, 포트 번호를 값으로 가지고 있다.
window.location.hostname
url의 도메인 부분을 값으로 가지고 있다.
window.location.hostname
url의 포트 번호를 값으로 가지고 있다.
현재 url에 포트 번호가 없다면 빈 문자열을 값으로 가진다.
window.location.hostname
url의 / 뒤의 경로들을 값으로 가지고 있다.
window.location.search
? 뒤의 url의 쿼리스트링을 값으로 가지고 있다.
현재 url에 쿼리스트링이 없기 때문에 빈 문자열을 값으로 가진다.
window.location.hash
# 뒤의 프래그먼트 식별자를 값으로 가지고 있다.
현재 url에 프래그먼트 식별자가 없기 때문에 빈 문자열을 값으로 가진다.
window.location.username
window.location.password
도메인 이름 이전에 명시된 사용자명을 값으로, 도메인 이름 이전에 명시된 비밀번호를 값으로 가진다.
window.location.origin
url의 표준 형태를 값으로 가지고 있다.
window.location.assign()
assign 의 매개변수로 들어간 url의 리소스를 불러온다.
이동해요 ~!
window.location.reload()
현재 url의 리소스를 다시 불러온다. reload 의 매개변수에 true 를 넣으면 브라우저 캐시를 무시하고 서버에서 새로 불러올 수 있다.
window.location.replace()
현재 url의 리소스를 replace 매개변수 안에 있는 url로 변경한다.
assign 과 많이 비슷해보인다.
하지만 assign 의 파라미터인 url로 이동하고 나서 뒤로가기를 누르면 페이지로 이동하기 이전의 url 페이지를 볼 수 있지만, replace 의 파라미터인 url로 이동하고 나면 이전 페이지가 세션 기록에 남지 않아 뒤로 가기를 눌러도 이동하기 전의 url의 페이지로 돌아갈 수 없다.
window.location.toString()
전체 url을 값으로 가진다.
url을 다른 url로 재할당할 수 있는 window.location.href 과는 달리 값을 수정할 수 없다.
혹시나 잘못된 정보가 있다면 댓글로 알려주세요 ! 저의 성장의 큰 도움이 될 것 같습니다.🌱
