Javascript - 새로 고침 [reload]

이번에는 자바스크립트를 사용해 페이지를 새로 고침 하는 방법에 대해 알아보려고 합니다. 화면 개발을 하다 보면 페이지 전체를 다시 불러와야 하거나 특정 영역을 갱신해야 하는 경우가 발생하는데 이런 경우 일반적으로는 location을 사용합니다. 특정 부분을 갱신해야 할 필요가 있다면 iframe을 사용하거나 jQuery의 load를 사용해야 하는데 이번 글에서 다루기에는 내용이 많아 이 부분까지는 다루지 않고 전체 페이지 새로 고침에 대해서만 이야기해보도록 하겠습니다.

location.reload()

인터넷 자료를 찾아보면 자바스크립트를 통해 페이지를 새로 고침을 하는 방법은 일반적으로 location과 history를 사용합니다.

// location을 사용하는 방법
location.reload();
location.replace(location.href);
location.href = location.href;

// history를 사용하는 방법
history.go(0);

페이지 새로 고침을 하는 방법으로 권장하는 방식은 location을 사용하는 것이며, 이유는 location은 페이지의 위치를 나타내고 history는 페이지가 이동한 이력을 정의하고 있기 때문입니다.

 

예제 코드를 통해서 보여드린 location의 페이지 새로 고침 사용 방법은 총 3가지인데, 3가지 방법 모두 동작하는 원리가 다르니 요구사항 혹은  상황에 맞추어 사용하시는 것이 좋습니다.

// Post 데이터를 포함해 페이지를 새로 고침 합니다.
location.reload();

// Post 데이터는 포함하지 않으며 페이지를 새로 고침 합니다.
// 이 때 현재 이력을 수정하여 페이지를 불러오기때문에 history에 새로은 이력은 추가되지 않습니다.
location.replace(location.href);

// 페이지를 이동합니다. 이동 할 페이지를 현재 페이지로 지정함으로써 새로 고침처럼 화면이 호출됩니다.
// 페이지를 이동하기 때문에 history에 이력이 추가되며 엄밀히 말하면 페이지 새로고침은 아닙니다.
location.href = location.href;

 

reload() 함수는 옵션을 주어 실행할 수 있으며, 1개의 boolean 인자를 옵션 값으로 받습니다. 옵션 값이 설정되지 않은 경우에 기본값인 false로 실행되며 true를 인자로 주어 실행하는 경우에는 브라우저가 가지고 있는 캐시를 무시하고 새로운 리소스를 화면에 불러옵니다.

// default: false
location.reload();

// 브라우저가 가지고 있는 기존의 리소스는 신경쓰지 않고 새로운 리소스를 받아 화면을 갱신합니다.
location.reload(true);

location의 reload() 함수를 통해 페이지를 새로 고침 하는 방법을 알아보았습니다. 그렇다면 여기서 location.reload()만 알아보는 것이 아니라 location에 대해 조금 더 알아보면 어떨까요?

location 간단히 알아보기

location은 현재 Document에 대한 위치를 가지고 있는 객체로 location이나 window.location 또는 document.location를 통해서 접근이 가능합니다.

location, window.location, document.location

location, window.location, document.location를 일치 연산자를 이용해 비교해보면 동일하다는 것을 알 수 있습니다.

location === window.location
// true

window.location === document.location
// true

location, window.location, document.location은 동일하기 때문에 브라우저간의 호환성 문제가 있어 location의 사용에 문제가 있는 경우 아래와 같은 방법으로 페이지를 새로 고침 할 수 있습니다.

function reload() {
    (location || window.location || document.location).reload();
}

 

 

특정 주기로 페이지 새로 고침

예를 들어 코로나 확진자 수를 보여준다거나, 주식 시황을 보여주는 화면이 있어 정해진 시간을 주기로 새로 고침을 해야 한다면 2가지의 방법을 통해 페이지를 새로 고침 할 수 있습니다.

setInterval()을 이용해 페이지 새로 고침

setTimeout(function () {
    location.reload();
}, 60 * 1000);

setInterval()을 사용해 정해진 시간만큼 간격을 주어 동작을 반복할 수 있습니다.

meta 태그를 이용해 페이지 새로 고침

// 사용 구문 설명
<meta http-equiv='refresh' content='초; url=페이지'>

// 현재 페이지를 기준으로 10초마다 현재 페이지로 이동한다.
<meta http-equiv='refresh' content='10;'>

// 현재 페이지를 기준으로 10초뒤에 https://www.daum.net/ 페이지로 이동한다.
<meta http-equiv='refresh' content='10; url=https://www.daum.net/'>

meta 태그의 refresh를 이용하면 자바스크립트를 이용하지 않고도 페이지 새로 고침이 가능하지만 추천되지는 않는 방법입니다.

주의할 점 - 새로 고침이 안되는 경우

location을 이용해 페이지를 새로 고침 하거나 이동하는 경우 동일 출처 정책에 따라 기능이 동작하지 않을 수도 있으니 위에서 제시된 코드를 사용해 페이지 새로 고침이 되지 않는 경우 해당 정책을 위반했는지 확인해보세요.

동일 출처 정책 - 웹 보안 | MDN