수정하기 - 자바스크립트에서 location 객체란 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

`location` 객체는 <a href='https://sangseek.com/sangseeks/자바/ko'>자바</a>스크립트에서 웹 브라우저의 현재 URL에 대한 정보를 제공하는 객체입니다. 이 객체는 `window` 객체의 속성으로 존재하며, 현재 문서의 URL을 조작하거나 정보를 얻는 데 사용됩니다. `location` 객체를 통해 웹 페이지의 주소를 읽고, 변경하고, 페이지를 새로 고침하거나 다른 페이지로 리<a href='https://sangseek.com/sangseeks/디렉션/ko'>디렉션</a>할 수 있습니다.           `location` 객체의 주요 속성    1.   `href`  : 현재 문서의 전체 URL을 반환하거나 설정합니다. 이 속성을 통해 페이지를 다른 URL로 리디렉션할 수 있습니다.     ```javascript     console.log(location.href); // 현재 URL 출력     location.href = "https://www.example.com"; // 다른 URL로 리디렉션     ```    2.   `protocol`  : URL의 프로토콜 부분을 반환합니다. 예를 들어, `http:` 또는 `https:`와 같은 값을 가집니다.     ```javascript     console.log(location.protocol); // "https:"     ```    3.   `host`  : 호스트 이름과 포트 번호를 포함한 URL의 호스트 부분을 반환합니다. 예를 들어, `www.example.com:80`과 같은 형식입니다.     ```javascript     console.log(location.host); // "www.example.com:80"     ```    4.   `hostname`  : 호스트 이름만 반환합니다. 포트 번호는 포함되지 않습니다.     ```javascript     console.log(location.hostname); // "www.example.com"     ```    5.   `port`  : URL의 포트 번호를 반환합니다. 포트 번호가 없으면 빈 문자열을 반환합니다.     ```javascript     console.log(location.port); // "80" 또는 ""     ```    6.   `pathname`  : URL의 경로 부분을 반환합니다. 예를 들어, `/path/to/resource`와 같은 형식입니다.     ```javascript     console.log(location.pathname); // "/path/to/resource"     ```    7.   `search`  : URL의 쿼리 문자열 부분을 반환합니다. 예를 들어, `?key=value`와 같은 형식입니다.     ```javascript     console.log(location.search); // "?key=value"     ```    8.   `hash`  : URL의 해시 부분을 반환합니다. 예를 들어, `  section1`과 같은 형식입니다.     ```javascript     console.log(location.hash); // "  section1"     ```           `location` 객체의 주요 메서드    1.   `assign(url)`  : 지정한 URL로 이동합니다. 현재 페이지의 기록을 남기므로 사용자가 "뒤로 가기" 버튼을 클릭할 수 있습니다.     ```javascript     location.assign("https://www.example.com");     ```    2.   `replace(url)`  : 지정한 URL로 이동하지만, 현재 페이지의 기록을 남기지 않습니다. 즉, 사용자가 "뒤로 가기" 버튼을 클릭해도 이전 페이지로 돌아갈 수 없습니다.     ```javascript     location.replace("https://www.example.com");     ```    3.   `reload()`  : 현재 페이지를 새로 고침합니다. `true` 인자를 전달하면 서버에서 페이지를 강제로 새로 고침합니다.     ```javascript     location.reload(); // 페이지 새로 고침     location.reload(true); // 서버에서 강제 새로 고침     ```           `location` 객체의 활용 예제    1.   URL 파라미터 읽기  : URL의 쿼리 문자열을 읽어 특정 값을 추출할 수 있습니다.     ```javascript     const params = new URLSearchParams(location.search);     const value = params.get('key'); // "value"를 반환     ```    2.   페이지 리디렉션  : 특정 조건에 따라 사용자를 다른 페이지로 리디렉션할 수 있습니다.     ```javascript     if (!userLoggedIn) {         location.href = "/login";     }     ```    3.   해시 변경  : SPA(Single Page Application)에서 해시를 변경하여 페이지 상태를 관리할 수 있습니다.     ```javascript     location.hash = "section2"; // 해시를 변경하여 스크롤 이동     ```           결론    `location` 객체는 웹 애플리케이션에서 URL을 관리하는 데 필수적인 도구입니다. 이를 통해 개발자는 페이지 간의 탐색을 제어하고, URL 정보를 쉽게 읽고 수정할 수 있습니다. 이러한 기능은 사용자 경험을 향상시키고, 동적인 웹 애플리케이션을 구축하는 데 매우 유용합니다.