참고: https://www.freecodecamp.org/news/javascript-refresh-page-how-to-reload-a-page-in-js/
JavaScript는 동적 웹 사이트나 대화형 애플리케이션을 만들 수 있는 다목적 프로그래밍 언어입니다. 웹 개발 작업에는 콘텐츠를 업데이트하거나 웹 페이지를 새로 고치거나 다시 로드하는 것이 있습니다. 이 포스트에서는 JavaScript로 페이지를 새로 고치는 다양한 방법을 알아보고 각 접근 방법에 대해 장단점을 알아보겠습니다.
JavaScript로 페이지를 새로 고치는 이유는?
웹 페이지를 새로 고치는 작업은 다양한 시나리오에서 필요합니다. 예를 들어:
- Content Update: 웹 페이지의 콘텐츠가 동적이고 자주 변경되는 경우 최신 데이터나 정보를 표시하려면 페이지를 새로 고쳐야 할 수 있습니다. 이는 일반적으로 뉴스 사이트, 주식 사이트, 날씨 앱 등에서 볼 수 있습니다.
- Form Submission: 웹 페이지에서 양식을 제출한 후 페이지를 새로 고쳐 성공 메시지를 표시하거나 새로운 양식 제출을 위해 양식을 재설정 할 수 있습니다.
- State Reset: 경우에 따라 웹 페이지의 상태를 재설정하거나 특정 데이터를 지워 새로 시작해야 하는 경우가 있습니다. 이럴 때 페이지를 새로고침 하면 도움이 될 수 있습니다.
이제 JavaScript로 페이지를 새로 고치는 여러가지 방법을 알아보겠습니다.
방법 1: location.reload()로 페이지 새로 고침
JavaScript로 페이지를 새로 고치는 가장 간단한 방법은 location.reload() 메소드를 사용하는 것 입니다. 이 메소드는 서버에 현재 웹 페이지를 다시 요청하여 웹 페이지를 다시 로드함으로서 현재 콘텐츠를 버리고 최신 콘텐츠를 로드하게 합니다.
location.reload();location.reload() 장점
- 직관적이고 사용하기 쉽습니다.
- 서버에서 전체 페이지를 다시 로드하여 최신 콘텐츠를 얻을 수 있습니다.
location.reload() 단점
- 페이지의 현재 콘텐츠를 삭제하므로 사용자 입력이나 데이터가 손실될 수 있습니다.
- 페이지가 다시 로드될 때 깜빡임 효과가 발생하여 사용자 경험에 영향을 줄 수 있습니다.
방법 2: location.replace()로 페이지 새로 고침
JavaScript로 페이지를 고치는 또 다른 방법은 location.replace() 메소드를 사용하는 것 입니다. 이 방법은 웹 페이지의 현재 url을 새 url로 대체하여 새 콘텐츠로 페이지를 다시 로드합니다. 아래 코드를 콘솔에서 실행하면 현재 url이 표시됩니다:
console.log(location.href)즉, location.replace() 메소드를 사용하여 웹 페이지의 현재 url을 새 url(동일한 url)로 바꾸면 페이지가 새로 고쳐집니다.
location.replace(location.href);location.replace() 장점
- 새로운 콘텐츠로 페이지를 리로드 하는 빠른 방법입니다.
- 페이지의 현재 콘텐츠를 보존하고 url만 교체하여 사용자 입력 또는 데이터 손실을 방지합니다.
location.replace() 단점
- 페이지의 전체 url을 바꾸므로 현재 브라우징 히스토리가 손실될 수 있습니다.
- 새 창이나 새 탭에서 웹 페이지를 열었을 때 같은 일부 시나리오에서는 작동하지 않을 수 있습니다.
방법 3: location.reload(true)로 페이지 새로 고침
location.reload() 메소드는 forceGet 이라는 불린 매개변수도 받습니다. 이를 true로 입력할 경우 캐시를 무시하고 서버에서 직접 페이지를 리로드합니다. 이는 페이지가 캐시된 경우에도 서버에서 최신 콘텐츠를 가져오려는 경우 사용할 수 있습니다:
location.reload(true);location.reload(true) 장점
- 캐시가 있더라도 서버의 최신 콘텐츠를 얻을 수 있습니다.
location.reload(true) 단점
- 현재 페이지의 콘텐츠를 날려버려 사용자의 입력이나 데이터를 잃을 수 있습니다.
- 페이지 리로드 시 화면이 깜빡거리는 것이 보여 사용자 경험에 영향을 줄 수 있습니다.
방법 4: location.href로 페이지 새로 고침
JavaScript로 페이지를 갱신하는 또 다른 방법은 location.href 속성을 사용하여 페이지의 url을 바꾸는 것 입니다. 이는 새 url로 페이지를 리로드하여 페이지를 갱신합니다:
location.href = location.href;location.href 장점
- 페이지를 갱신하는 간단하고 효과적인 방법입니다.
- 페이지의 현재 콘텐츠를 보존하고 url만 업데이트하여 사용자 입력 또는 데이터 손실을 방지합니다.
location.href 단점
- 페이지의 전체 url을 교체하므로 현재 브라우징 히스토리가 손실될 수 있습니다.
- 새 창이나 새 탭에서 웹 페이지를 연 경우 작동하지 않을 수 있습니다.
방법 5: 딜레이를 준 location.reload()로 페이지 새로 고침
페이지를 새로 고치기 전에 딜레이를 주려면 location.reload() 메소드와 함께 setTimeout()을 사용할 수 있습니다. 이를 통해 페이지를 다시 로드하기 전 시간 간격(밀리초)을 지정하여 새로 고침 타이밍을 제어할 수 있습니다:
setTimeout(function(){
location.reload();
}, 3000);딜레이된 location.reload() 장점
- 딜레이를 추가하여 페이지 새로 고침 타이밍을 제어할 수 있습니다.
- 특정 이벤트 또는 작업 후에 페이지를 새로 고쳐야하는 시나리오에 사용할 수 있습니다.
딜레이된 location.reload() 단점
- 페이지 갱신이 지연되어 사용자 경험에 영향을 미칠 수 있습니다.
- 네트워크 연결이 불안정 하거나 느린 환경에서는 예상대로 작동하지 않을 수 있습니다.
정리
이 포스트에서는 JavaScript로 페이지를 새로 고치는 다양한 방법을 알아봤습니다. 각각의 방법에는 장단점이 있으므로 웹 개발 프로젝트에 가장 적합한 방법을 선택하여 적용해야 합니다. 위에서 언급한 방법을 사용하여 페이지를 새로 고칠 때 사용자 경험, 데이터 손실, 브라우징 히스토리에 미치는 영향을 고려해야합니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] HTML 드롭다운 메뉴 만들기 (drop-down) (7) | 2023.05.26 |
|---|---|
| [javascript] 자바스크립트 화폐 단위(통화) 표시 (Intl.NumberFormat) (6) | 2023.05.26 |
| [javascript] 자바스크립트 배열 일부분 가져오기 (array slice) (9) | 2023.05.24 |
| [javascript] 자바스크립트 현재 url 가져오기 (window.location) (8) | 2023.05.24 |
| [javascript] 자바스크립트 배열 삽입 (array insert) (12) | 2023.05.23 |
댓글