자바스크립트 현재 URL 오리진(Origin) 가져오기

올바른 이해와 사용 방법

현재 페이지의 URL 오리진(Origin)은 window.location.origin 속성으로 가져올 수 있습니다.

window.location.origin 속성은 현재 URL의 오리진 정보를 문자열로 반환합니다.

참고하세요!
window.location.origin 속성은 줄여서 location.origin라고만 작성하는 경우도 많습니다.
브라우저에서는 window 객체가 전역 객체이므로, window.location는 줄여서 location만으로도 동일하게 사용할 수 있습니다.

문자열로 반환되는 URL의 오리진 정보

URL에서 오리진(Origin)이란 https://www.example.com 또는 http://localhost:3000처럼, 우리가 흔히 'URL 출처'라고 하는 현재 사이트의 기준 주소를 말합니다.

특징

URL에서 프로토콜(Protocol), 호스트(Hostname, 흔히 도메인이라고 부르는 주소), 포트(Port) 세 가지 요소를 합친 것을 말합니다.
포트(Port)가 없는 URL에서는 프로토콜(Protocol), 호스트(Hostname, 흔히 도메인이라고 부르는 주소)까지를 오리진이라고 합니다.
오리진은 URL의 출처 정보를 나타내며, 현재 사이트의 기준 주소 역할을 합니다. 주로 이를 이용해 다른 URL을 생성하거나, 현재 사이트의 주소를 다른 곳에 전달할 때 사용합니다.

window.location.origin 속성은 현재 URL에서 사용되는 오리진, 즉 URL의 출처를 문자열로 반환합니다.

기본 예제

현재 웹 페이지가 어떤 오리진에서 사용되는지 확인하고 콘솔에 출력하는 가장 단순한 코드입니다.

window 객체는 생략할 수 있으며, 보통 location.origin을 사용합니다.

JavaScript

/* 전체 URL 예: https://www.example.com/products/list?page=1#review */
console.log(location.origin); // console.log(window.location.origin)과 동일
// 출력: "https://www.example.com"

/* 전체 URL 예: https://codingeverybody.kr/category/javascript/ */
console.log(location.origin); // console.log(window.location.origin)과 동일
// 출력: "https://codingeverybody.kr"

활용 예제

window.location.origin 속성은 현재 URL의 오리진, 즉 사이트의 기준 주소를 가져옵니다. 이 속성을 이용하면 다른 URL을 생성하거나, 현재 사이트의 주소를 외부로 전달하는 등의 간단한 작업을 손쉽게 수행할 수 있습니다. 아래 예제를 통해 실제 사용 방법을 확인해 보겠습니다.

다른 URL 생성하기 - 주소 조합

현재 오리진을 기준으로 다른 페이지(예: 로그인 완료 후 이동할 페이지)의 전체 주소를 동적으로 만들 때 사용합니다.

JavaScript

/* 현재 전체 URL 예: https://www.example.com/products/list?page=1#review */

// 현재 오리진 뒤에 이동할 경로를 붙여 새로운 URL 생성
const loginCallbackUrl = location.origin + "/login-callback.html";

console.log(loginCallbackUrl); 
// 출력: "https://codingeverybody.kr/login-callback.html"

현재 사이트 주소를 다른 곳에 전달하기 - SNS 공유 기능 등

페이스북 같은 외부 플랫폼에 현재 내가 보고 있는 사이트의 출처를 넘겨줄 때 활용할 수 있습니다.

JavaScript

/* 현재 전체 URL 예: https://www.example.com/products/list?page=1#review */
const facebookUrl = "https://www.facebook.com/sharer/sharer.php?u=";
const shareUrl = facebookUrl + encodeURIComponent(location.origin + "/products/list?page=1");

console.log(shareUrl);
// 출력: "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.example.com%2Fproducts%2Flist%3Fpage%3D1"

코드 부연설명
encodeURIComponent() 함수는 URL의 특정 부분(예: 검색어, 파일명, 파라미터 값 등)에 사용할 문자들을 안전하게 인코딩하기 위해 사용합니다.