이번에는 자바스크립트를 사용해 페이지를 새로 고침 하는 방법에 대해 알아보려고 합니다. 화면 개발을 하다 보면 페이지 전체를 다시 불러와야 하거나 특정 영역을 갱신해야 하는 경우가 발생하는데 이런 경우 일반적으로는 location을 사용합니다. 특정 부분을 갱신해야 할 필요가 있다면 iframe을 사용하거나 jQuery의 load를 사용해야 하는데 이번 글에서 다루기에는 내용이 많아 이 부분까지는 다루지 않고 전체 페이지 새로 고침에 대해서만 이야기해보도록 하겠습니다. Show location.reload()인터넷 자료를 찾아보면 자바스크립트를 통해 페이지를 새로 고침을 하는 방법은 일반적으로 location과 history를 사용합니다.
페이지 새로 고침을 하는 방법으로 권장하는 방식은 location을 사용하는 것이며, 이유는 location은 페이지의 위치를 나타내고 history는 페이지가 이동한 이력을 정의하고 있기 때문입니다. 예제 코드를 통해서 보여드린 location의 페이지 새로 고침 사용 방법은 총 3가지인데, 3가지 방법 모두 동작하는 원리가 다르니 요구사항 혹은 상황에 맞추어 사용하시는 것이 좋습니다.
reload() 함수는 옵션을 주어 실행할 수 있으며, 1개의 boolean 인자를 옵션 값으로 받습니다. 옵션 값이 설정되지 않은 경우에 기본값인 false로 실행되며 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의 사용에 문제가 있는 경우 아래와 같은 방법으로 페이지를 새로 고침 할 수 있습니다.
특정 주기로 페이지 새로 고침예를 들어 코로나 확진자 수를 보여준다거나, 주식 시황을 보여주는 화면이 있어 정해진 시간을 주기로 새로 고침을 해야 한다면 2가지의 방법을 통해 페이지를 새로 고침 할 수 있습니다. setInterval()을 이용해 페이지 새로 고침
setInterval()을 사용해 정해진 시간만큼 간격을 주어 동작을 반복할 수 있습니다. meta 태그를 이용해 페이지 새로 고침
meta 태그의 refresh를 이용하면 자바스크립트를 이용하지 않고도 페이지 새로 고침이 가능하지만 추천되지는 않는 방법입니다. 주의할 점 - 새로 고침이 안되는 경우location을 이용해 페이지를 새로 고침 하거나 이동하는 경우 동일 출처 정책에 따라 기능이 동작하지 않을 수도 있으니 위에서 제시된 코드를 사용해 페이지 새로 고침이 되지 않는 경우 해당 정책을 위반했는지 확인해보세요. 동일 출처 정책 - 웹 보안 | MDN 동일 출처 정책 동일 출처 정책(same-origin policy)은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 동일 출처 정 developer.mozilla.org 마침내 두 달 간의 조사 끝에 한 번 페이지를 다시로드하는 솔루션을 얻었습니다. 내 클라이언트 측 JS 프로젝트에서 잘 작동합니다. 한 번만 페이지를 다시로드하는 기능을 작성했습니다. 1) 먼저 브라우저 domloading 시간 확보 2) 현재 타임 스탬프 얻기 3) 브라우저 domloading 시간 + 10 초 4) 브라우저 domloading 시간 + 현재 타임 스탬프보다 10 초 더 큰 경우 “reloadPage ();”를 통해 페이지를 새로 고칠 수 있습니다. 하지만 10 초 이하이면 페이지가 새로 고침되어 반복적으로 다시로드되지 않음을 의미합니다. 5) 따라서 “reloadPage ();”를 호출하면 js 파일 페이지의 어딘가에있는 함수는 한 번만 다시로드됩니다. 누군가를 돕는 희망 |