▶ JavaScript Browser BOM

JavaScript Location

JavaScript Location: 브라우저 URL 정보 다루기

JavaScript Location 객체는 현재 문서의 URL에 대한 정보를 제공하며, URL을 조작하는 데 필요한 다양한 메서드와 속성을 포함하고 있습니다. 이 객체를 사용하여 페이지를 이동하거나 URL 정보를 읽고 수정할 수 있습니다. 이 가이드는 Location 객체의 주요 기능과 사용법에 대해 설명합니다.

1. Location 객체란?

Location 객체는 브라우저에서 현재 페이지의 URL 정보를 담고 있는 객체입니다. 이 객체는 Window 객체의 일부로, 현재 문서의 주소를 포함하여 여러 URL 관련 정보를 제공합니다.

1.1. 주요 속성

location.href: 현재 문서의 전체 URL을 반환합니다.
location.protocol: URL의 프로토콜 부분을 반환합니다 (예: http:, https:).
location.host: 호스트 이름과 포트 번호를 반환합니다 (예: www.example.com:80).
location.hostname: 호스트 이름만 반환합니다 (예: www.example.com).
location.pathname: URL의 경로 부분을 반환합니다 (예: /path/to/page).
location.search: 쿼리 문자열을 반환합니다 (예: ?query=string).
location.hash: URL의 해시 부분을 반환합니다 (예: #section).

2. Location 객체 사용 예시

Location 객체를 사용하여 현재 URL 정보를 출력하고, 페이지를 이동하는 방법에 대해 살펴보겠습니다.

2.1. 현재 URL 정보 출력

<script>
  console.log('Current URL:', location.href);              // 전체 URL 출력
  console.log('Protocol:', location.protocol);              // 프로토콜 출력
  console.log('Host:', location.host);                      // 호스트 출력
  console.log('Hostname:', location.hostname);              // 호스트 이름 출력
  console.log('Pathname:', location.pathname);              // 경로 출력
  console.log('Search:', location.search);                  // 쿼리 문자열 출력
  console.log('Hash:', location.hash);                      // 해시 출력
</script>

위 코드는 현재 페이지의 다양한 URL 정보를 콘솔에 출력합니다.

2.2. URL 변경하기

Location 객체를 사용하여 페이지를 이동하거나 URL을 변경할 수 있습니다.

2.2.1. 페이지 이동

<script>
  // 사용자가 클릭할 때 다른 페이지로 이동
  function navigateToExample() {
      location.href = '<https://www.example.com>';  // 다른 URL로 이동
  }
</script>

<button onclick="navigateToExample()">Go to Example</button>

버튼을 클릭하면 example.com으로 페이지가 이동합니다.

2.2.2. URL의 해시 변경

<script>
  // 해시 변경
  function changeHash() {
      location.hash = 'newSection';  // URL의 해시 부분을 변경
  }
</script>

<button onclick="changeHash()">Change Hash</button>

버튼 클릭 시 URL의 해시가 #newSection으로 변경됩니다.

3. Location 객체의 메서드

Location 객체는 URL을 조작하기 위한 다양한 메서드를 제공합니다.

3.1. `assign()`

특정 URL로 이동하고, 현재 페이지의 URL을 변경합니다.

location.assign('<https://www.example.com>');  // 새로운 URL로 이동

3.2. `replace()`

현재 페이지의 URL을 새 URL로 교체합니다. 브라우저의 히스토리에 새 항목을 추가하지 않으므로 뒤로 가기 버튼으로 이전 페이지로 돌아갈 수 없습니다.

location.replace('<https://www.example.com>');  // 현재 URL을 대체

3.3. `reload()`

현재 페이지를 다시 로드합니다.

location.reload();  // 페이지 다시 로드

reload(true)를 인자로 주면 캐시를 무시하고 새로 고침할 수 있습니다.

location.reload(true);  // 캐시를 무시하고 페이지 다시 로드

4. Location 객체와 브라우저의 관계

Location 객체는 브라우저의 주소 표시줄과 밀접한 관계가 있습니다. 사용자는 주소 표시줄에 URL을 입력하여 페이지를 이동하거나, 브라우저의 탐색 기능(뒤로, 앞으로)을 통해 이전 페이지로 돌아갈 수 있습니다.

4.1. 브라우저의 탐색 기능 사용

Location 객체를 사용하여 URL을 변경하면, 사용자는 브라우저의 뒤로 가기 버튼을 사용하여 이전 페이지로 돌아갈 수 있습니다.

4.2. URL 쿼리 문자열 처리

Location 객체의 search 속성을 사용하여 URL의 쿼리 문자열을 처리할 수 있습니다.

const queryString = location.search;  // 쿼리 문자열 가져오기
console.log('Query String:', queryString);

URL 쿼리 문자열을 활용하여 동적인 페이지를 생성할 수 있습니다.

5. URL 파라미터 처리

URL의 쿼리 문자열에서 파라미터를 추출하여 사용할 수 있습니다. 다음은 URL 파라미터를 처리하는 간단한 예시입니다.

5.1. URL 파라미터 추출

<script>
  function getQueryParams() {
      const params = new URLSearchParams(location.search);
      const paramValue = params.get('query');  // 'query'라는 이름의 파라미터 값 가져오기
      console.log('Query Parameter Value:', paramValue);
  }

  // 페이지가 로드되면 파라미터를 추출
  window.onload = getQueryParams;
</script>

이 코드는 URL에서 query 파라미터의 값을 추출하여 출력합니다.

요약

JavaScript Location 객체는 브라우저의 현재 URL을 다루고, 페이지를 이동하는 데 필요한 다양한 기능을 제공합니다. 이를 통해 URL 정보를 읽고, 변경하며, 쿼리 문자열을 처리하는 등의 작업을 수행할 수 있습니다.

주요 속성: location.href, location.protocol, location.host, location.pathname, location.search, location.hash.
주요 메서드: assign(), replace(), reload().
URL 쿼리 문자열 처리: URLSearchParams를 사용하여 쿼리 파라미터를 쉽게 추출하고 사용할 수 있습니다.

JavaScript의 Location 객체를 활용하여 더 나은 사용자 경험과 동적인 웹 애플리케이션을 개발할 수 있습니다.

코딩 스쿨 JavaScript