window.location.href는 웹 개발에서 아주 자주 사용되는 프로퍼티 중 하나예요. 이 프로퍼티를 활용하면 현재 웹 페이지의 URL을 가져오거나 변경할 수 있답니다. 예를 들어, 특정 페이지로 이동하거나, 현재 페이지의 URL을 가져와서 다른 용도로 사용할 때 유용하죠.
지금부터 번호순으로 쉽게 설명해드릴게요!
1. window.location.href란?
window.location.href는 현재 웹 페이지의 주소(URL)를 나타내는 문자열이에요. 이 문자열을 사용하면 브라우저가 어떤 페이지를 보고 있는지 알 수 있어요.
console.log(window.location.href); // 현재 페이지의 URL을 출력합니다.예를 들어, 사용자가 보고 있는 페이지가 https://www.example.com이라면, 위 코드를 실행했을 때 이 URL이 출력될 거예요.
2. 페이지 이동하기
window.location.href를 사용하면 사용자를 다른 페이지로 이동시킬 수 있어요. URL을 새로 설정하면 브라우저가 그 주소로 즉시 이동한답니다.
window.location.href = 'https://www.example.com/newpage.html';
// 해당 URL로 브라우저가 이동합니다.이 코드는 사용자를 https://www.example.com/newpage.html로 이동시켜요. 페이지 리디렉션이 필요할 때 매우 유용하죠! 😊
3. 현재 페이지 리로드(새로고침)하기
때때로 페이지를 새로고침하고 싶을 때가 있죠? window.location.href를 활용하면 간단하게 할 수 있어요.
window.location.href = window.location.href;
// 현재 페이지를 다시 로드합니다.이렇게 하면 현재 페이지가 다시 로드되면서 새롭게 콘텐츠를 받아올 수 있어요. 👍
4. 다른 활용 방법들
window.location.href는 단순한 페이지 이동 외에도 여러 가지 방법으로 활용할 수 있어요. 예를 들어, 현재 페이지의 URL을 다른 스크립트에 전달하거나, 특정 조건에 따라 페이지를 이동시키는 등, 무궁무진한 활용 방법이 있답니다.
if (window.location.href.includes('dashboard')) {
console.log('현재 대시보드 페이지에 있습니다.');
}이 코드는 현재 URL에 'dashboard'라는 단어가 포함되어 있는지 확인하고, 해당 단어가 있을 경우 콘솔에 메시지를 출력해요.
정리 ✍️
window.location.href는 웹 개발에서 매우 유용한 도구로, 현재 페이지의 URL을 가져오거나 다른 페이지로 이동할 때 사용돼요. 웹 개발자가 URL을 관리하고, 사용자의 탐색 경험을 제어하는 데 필수적인 역할을 하죠. 💡
이제 window.location.href에 대해 더 잘 이해하셨죠? 다양한 상황에서 어떻게 사용할 수 있을지 꼭 실습해보세요! 💪
궁금한 점이 있거나, 더 알고 싶은 내용이 있다면 언제든지 질문해 주세요! 😊
