URL과 히스토리 제어 기초

URL 가져오기

현재 페이지의 URL 을 가져오는 방법은 2가지입니다.

전역 객체인 location 에서 URL 얻기

location 객체의 href 속성에 현재 페이지의 URL이 들어있습니다.

window.location.href

또는 전역객체 windows 를 생략해

location.href

로 얻을 수 있습니다.

또는, document 객체의 URL 속성에서 현재 페이지의 경로 URL 을 얻을 수 있습니다.

document.URL

두가지 방법으로 얻는 값은 동일합니다.

그밖에 알아두면 좋은 location 객체의 현재 경로에 대한 상세 정보를 얻을 수 있는 속성은 다음과 같습니다.

URL 파싱

앵커 태그를 동적으로 생성해서 URL을 할당하는 방법으로 문자열로 된 URL의 속성들을 읽을 수 있습니다.

URL 정보를 담은 앵커 태그를 반환하는 프로토 타입 메서드로 간단하게 구현해 보겠습니다.

Location.prototype.getURLInfo = function(url) {    let info = document.createElement(a);    info.href = url;    return info;}
let info = location.getURLInfo('https://apost.dev:8080/api/?key=1234&cmd=url#info');
console.log(info.protocol);console.log(info.host);console.log(info.hostname);console.log(info.port);console.log(info.pathname);console.log(info.hash);console.log(info.search);console.log(info.origin);

QueryString 정보 얻기

Location 객체에 프로토타입 메서드를 정의해서 전역으로 가져다 쓸 수 있도록 간단한 메서드를 만들 수 있습니다.

Location.prototype.getParams = function() {    let params = {};    window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, (str, key, value)=>{ params[key] = value; });    return params;}

이렇게 전역으로 사용할 수 있도록 정의한 후

let info = location.getParams();console.log(Object.entries(info));

를 호출하면 QueryString 파라메터 키와 값이 JSON 객체로 반환됩니다.

URL 변경과 페이지 이동

페이지를 이동하는 가장 기초적인 방법은

location.href = '이동할 URL';

을 사용합니다.

이동하려는 URL로 즉시 이동할 수 있습니다.

도메인이 같은 경우 "/" 로 시작하는 하위 경로만 입력해도 됩니다.

"/"로 시작하지 않는 하위 경로는 현재 URL 위치를 기준으로 상대 하위 경로를 접근합니다.

location.assign() 는 location.href 의 메서드 구현체이며 파라메터로 URL 을 사용합니다. location.assign(URL) 과 location.href = URL 은 같습니다. 어떤걸 사용해도 무방하지만 "location.href" 가 압도적으로 많이 사용됩니다.

location.reload() 은 현재 페이지를 다시 로딩(화면 리프레시)합니다. "history.go()", "history.go(0)" 와 같습니다.

히스토리 이동

방문 기록을 담는 히스토리(History) 겍체는 전역 객체로 window.history 로 접근할 수 있습니다.

전역객체이므로 window 는 생략 가능하며, history 키워드로 접근해 사용합니다.

히스토리 객체는 과거 방문했던 페이지를 이동하는 여러가지 메서드를 제공합니다.

히스토리 메서드는 방문한 이전 페이지 목록을 기초로 페이지를 이동합니다.

히스토리 목록에 없는 페이지는 이동할 수 없습니다

리다이렉트로 페이지를 이동한 경우, 리다이렉트한 페이지 또한 히스토리 기록에 남게 됩니다. 히스토리 뒤로 가기로 리다이렉트한 페이지로 이동하는 경우, 무한 리다이렉트에 빠질 수 있으므로 리다이렉트 하는 경우 히스토리 관리에 신경을 써야 합니다.

히스토리 남기지 않기

웹서비스를 구현하다 보면 뒤로 가기로 접근할 수 없도록 막을 필요가 있는 페이지 들이 있습니다.

주문 결과 페이지에서 다른 페이지로 이동하거나, 리다이렉트로 페이지를 이동하거나 하는 경우, 뒤로가기를 눌러 접근하면 안되기 때문에 히스토리에 기록이 남지 않도록 해서 사용자가 최대한 접근할 수 없게 막을 필요가 있습니다.

히스토리 자체는 개별적으로 삭제할 수 있는 방법이 없으며, 히스토리가 남지 않도록 하는 방법이 유일합니다.

이런 경우, "location.href" 가 아닌 "location.replace()" 로 페이지를 이동하면 됩니다.

둘은 다음과 같은 차이가 있습니다.