자바스크립트에서 URL을 다루는 방법에 대해 알아봅니다.
|
현재 URL 가져오기 window.location 객체로 URL 정보 가져오기 |
현재 페이지의 URL 정보는 window.location 객체를 사용하여 가져올 수 있습니다. URL 전체 주소뿐만 아니라 프로토콜, 도메인, 경로, 쿼리 문자열 등 개별 URL 구성 요소도 문자열로 가져올 수 있습니다. |
|---|---|
|
프로토콜 가져오기 window.location.protocol로 프로토콜 가져오기 |
자바스크립트에서 현재 페이지의 URL 프로토콜(예: http: 또는 https:)을 가져오려면 window.location.protocol 속성을 사용합니다. |
|
도메인 가져오기 window.location.hostname으로 도메인 가져오기 |
자바스크립트에서 현재 페이지의 URL 도메인(hostname)을 가져오려면 window.location.hostname 속성을 사용합니다. |
|
오리진(Origin) 가져오기 window.location.origin으로 오리진 가져오기 |
자바스크립트에서 현재 페이지의 URL 오리진(Origin)을 가져오려면 window.location.origin 속성을 사용합니다. |
|
경로 가져오기 window.location.pathname으로 경로 가져오기 |
자바스크립트에서 현재 페이지의 URL 경로를 가져오려면 window.location.pathname 속성을 사용합니다. |
|
쿼리스트링 가져오기 window.location.search로 쿼리스트링 가져오기 |
자바스크립트에서 현재 페이지의 URL 쿼리스트링(파라미터)을 가져오려면 window.location.search 속성을 사용합니다. |
|
해시 가져오기 window.location.hash로 해시 가져오기 |
자바스크립트에서 현재 페이지의 URL 해시(프래그먼트)을 가져오려면 window.location.hash 속성을 사용합니다. |
|
참조 URL 가져오기 document.referrer로 참조 URL 가져오기 |
document.referrer 속성은 현재 문서(페이지)로 이동(navigated)하게 만든 이전 문서의 URL을 반환합니다. 어떤 경로(링크, 검색 엔진 등)를 통해 현재 페이지에 유입되었는지 확인할 때 주로 사용됩니다. |
|
URL 이동하기 다양한 방법으로 페이지 이동 및 탐색하기 |
자바스크립트를 이용하면 현재 브라우저의 URL을 바꾸어 새로운 페이지로 이동하는 것은 물론, 페이지를 새로고침하거나, 페이지 내 특정 위치로 이동하기, 이전/다음 페이지로 이동하기 등을 쉽게 구현할 수 있습니다. |
|
새 창/새 탭으로 페이지 이동하기 window.open()으로 새 창/새 탭으로 이동하기 |
자바스크립트에서 새 창이나 새 탭으로 페이지를 열려면 window.open() 메서드를 사용합니다. 현재 페이지를 유지한 채 다른 URL로 이동할 때 활용합니다. |
|
현재 페이지 새로고침하기 window.location.reload()로 새로고침하기 |
자바스크립트에서 현재 창을 새로고침하려면 window.location.reload() 메서드를 사용합니다. 이렇게 하면 새로고침 버튼처럼 현재 페이지의 리소스를 다시 불러와 새로고침합니다. |
|
해시 설정하기 window.location.hash로 해시 설정하기 |
자바스크립트에서 현재 페이지의 URL 해시(프래그먼트)을 설정하려면 window.location.hash 속성을 사용합니다. |
|
해시 변경 감지하기 hashchange 이벤트 |
브라우저는 현재 페이지의 URL 해시(프래그먼트)가 변경되면 hashchange 이벤트를 발생시킵니다. window 객체에서 발생하는 이벤트입니다. |
|
이전 페이지로 이동하기 window.history.back()으로 뒤로 가기 |
자바스크립트에서 이전 페이지로 이동하려면 window.history.back() 메서드를 사용합니다. 이렇게 하면 사용자가 브라우저의 '뒤로 가기' 버튼을 눌렀을 때처럼 이전 페이지로 이동합니다. |
|
다음 페이지로 이동하기 window.history.forward()로 앞으로 가기 |
자바스크립트에서 다음 페이지로 이동하려면 window.history.forward() 메서드를 사용합니다. 이렇게 하면 사용자가 브라우저의 '앞으로 가기' 버튼을 눌렀을 때처럼 다음 페이지로 이동합니다. |
|
URL 방문 기록 다루기 브라우저 방문 기록(Session History) 제어하기 |
자바스크립트를 이용하면 현재 페이지를 연 브라우저 방문 기록(Session history)을 읽고 이동하며 제어할 수 있습니다. 이때 window.history 객체를 사용합니다. |
|
history.state 현재 방문 기록의 상태(State) 값 가져오기 |
현재 창이나 탭의 브라우저 방문 기록에 저장된 상태(State) 데이터를 가져오려면 window.history.state 속성을 사용합니다. |
|
history.pushState() 페이지를 새로고침하지 않고 방문 기록 추가하기 |
window.history.pushState() 메서드를 사용하면 새로운 페이지를 서버에 요청하지 않고 브라우저의 현재 창이나 탭의 방문 기록(Session History)에 새로운 항목을 추가하면서 URL을 변경할 수 있습니다. |
|
history.replaceState() 방문 기록을 추가하지 않고 현재 URL 교체하기 |
window.history.replaceState() 메서드는 새로운 페이지를 서버에 요청하지 않고 브라우저의 현재 활성화된 방문 기록 항목(entry)의 상태(State) 데이터와 URL을 새로운 값으로 교체(변경)합니다. 이때, 브라우저는 방문 기록(Session History)에 새로운 항목(entry)을 추가하지 않습니다. |
|
방문 기록 뒤로 가기·앞으로 가기 변경 감지 popstate 이벤트 |
브라우저의 방문 기록(Session History)에서 '뒤로 가기' 또는 '앞으로 가기'로 이동할 때 popstate 이벤트가 발생합니다. |
|
URL 인코딩 함수 비교 인코딩 함수의 사용 목적과 차이점 비교하기 |
자바스크립트에서 URL 인코딩 함수는 encodeURI() 함수와 encodeURIComponent() 함수 두 개가 있습니다. 이 두 함수의 사용 목적 및 차이점에 대해 비교해 보겠습니다. |
|
encodeURI() 전체 URL을 인코딩할 때 |
encodeURI() 함수는 URL 구조를 정의하는 일부 특수 문자를 제외한 URL을 인코딩합니다. 이 함수는 주로 전체 URL 문자열을 인코딩할 때 사용합니다. |
|
encodeURIComponent() URI Component를 인코딩할 때 |
encodeURIComponent() 함수는 URL의 특정 부분(예: 검색어, 파일명, 파라미터 값 등)에 사용할 문자들을 안전하게 인코딩하기 위해 사용합니다. 전체 URL이 아닌 URI Component를 인코딩할 때 유용합니다. |
|
URL 디코딩 함수 비교 디코딩 함수의 사용 목적과 차이점 비교하기 |
자바스크립트에서 URL 디코딩 함수는 decodeURI() 함수와 decodeURIComponent() 함수 두 개가 있습니다. 이 두 함수의 사용 목적 및 차이점에 대해 비교해 보겠습니다. |
|
decodeURI() encodeURI()로 인코딩한 URL을 디코딩 |
decodeURI() 함수는 encodeURI()로 인코딩한 URL을 디코딩할 때 사용하는 함수입니다. 즉, encodeURI()로 인코딩한 특수 문자만을 디코딩합니다. |
|
decodeURIComponent() encodeURIComponent()로 인코딩한 URL 디코딩 |
decodeURIComponent() 함수는 encodeURIComponent()로 인코딩한 URL을 디코딩할 때 사용하는 함수입니다. 즉, encodeURIComponent()로 인코딩한 특수 문자만을 디코딩합니다. |