[Javascript] location 객체 모음집

웹 개발 시 js에서 적권 사용되는 location 객체에 대해 정리해보았다

---

location 객체는 웹 애플리케이션에서 다양한 상황에서 유용하게 사용된다. 주로 페이지 이동, URL 정보 추출, 리다이렉션 등의 작업에 사용되며, 다음과 같은 경우에 많이 사용된다.

1. location.href (페이지 리다이렉션)

location.href는 페이지를 다른 URL로 리다이렉트할 때 사용된다. 예를 들어, 사용자가 로그인해야 하는 페이지에서 로그인하지 않은 상태로 접근했을 때 로그인 페이지로 리다이렉트할 수 있다.

• 예시: 로그인하지 않은 사용자를 로그인 페이지로 리다이렉트하기

  if (!isLoggedIn) {
      window.location.href = 'https://www.example.com/login';
  }
  

2. location.reload() (현재 페이지 새로 고침)

location.reload()는 사용자가 페이지를 새로 고쳐야 할 때 사용된다. 예를 들어, 사용자가 폼을 제출한 후 데이터를 업데이트하거나 페이지를 새로 로드하고 싶을 때 사용된다.

• 예시: 사용자가 버튼을 클릭하여 페이지를 새로 고침하기

  function refreshPage() {
      window.location.reload();
  }
  

3. location.search (쿼리 문자열 다루기)

location.search는 URL의 쿼리 파라미터를 읽거나 변경할 때 사용된다. 예를 들어, 검색 결과 페이지에서 사용자가 선택한 필터를 URL의 쿼리로 추가하고 싶을 때 유용하다.

• 예시: 검색 필터를 URL에 쿼리 파라미터로 추가하기

  function updateSearchQuery(query) {
      window.location.search = `?search=${query}`;
  }
  

4. location.href (조건에 따른 페이지 이동)

location.href는 사용자의 역할이나 특정 조건에 따라 다른 페이지로 리다이렉트할 때 사용된다. 예를 들어, 사용자가 특정 권한을 가지고 있지 않으면 접근이 제한된 페이지로 이동하도록 할 수 있다.

• 예시: 관리자 페이지에 접근하려면 관리자 권한이 필요

  if (!user.isAdmin) {
      window.location.href = '/no-access';
  }
  

5. location.hash (서브페이지 또는 특정 섹션으로 이동)

location.hash는 웹 페이지 내에서 특정 섹션으로 이동할 때 사용된다. URL의 해시값을 변경하여 특정 위치로 이동할 수 있다.

• 예시: 특정 섹션으로 스크롤 이동

  function goToSection(sectionId) {
      window.location.hash = `#${sectionId}`;
  }
  

6. location.replace() (URL 변경 후 페이지 새로 로드하거나 히스토리 대체)

location.replace()는 사용자가 특정 페이지를 방문했을 때 브라우저 히스토리를 추가하거나 대체할 수 있다. 이 메서드를 사용하면 URL을 변경하면서 페이지를 새로 로드하거나 히스토리를 대체할 수 있다.

• 예시: 사용자가 어떤 작업을 수행한 후 새 페이지를 로드하면서 브라우저의 히스토리를 대체

  window.location.replace('https://www.example.com/dashboard');
  

7. location 객체 (사용자의 URL 정보를 확인하기 위해 사용)

location 객체는 현재 페이지의 URL을 다양한 부분으로 나누어 확인할 수 있도록 돕는다. 예를 들어, 페이지가 어느 경로에 있는지, 어떤 파라미터가 있는지 등을 확인할 수 있다.

• 예시: 페이지의 URL 정보를 분해하여 처리하기

  console.log(window.location.protocol); // "https:"
  console.log(window.location.hostname); // "www.example.com"
  console.log(window.location.pathname); // "/about"
  console.log(window.location.search); // "?id=123"
  console.log(window.location.hash); // "#section1"
  

8. location.href (외부 페이지로 리다이렉트)

location.href는 특정 페이지에서 외부 웹사이트로 이동할 때 사용된다. 예를 들어, 광고나 제휴 링크를 클릭한 후 외부 사이트로 이동할 때 사용된다.

• 예시: 외부 사이트로 리다이렉트

  window.location.href = 'https://www.external-site.com';
  

9. location.replace() (URL 변경 없이 페이지 이동)

location.replace()는 브라우저의 히스토리 항목을 대체하면서 페이지를 변경할 수 있다. 이 방법은 URL을 변경하지만 사용자가 뒤로 가기 버튼을 통해 이전 상태로 돌아갈 수 없게 만들고 싶을 때 유용하다.

• 예시: 히스토리 항목을 대체하면서 페이지 이동

  window.location.replace('https://www.new-page.com');