자바스크립트로 웹페이지 새로고침하기: location.reload() 완벽 가이드

웹 개발을 하다 보면 자바스크립트를 사용해 웹페이지를 새로고침해야 하는 경우가 종종 있습니다. 이럴 때 location 객체가 제공하는 reload() 메서드를 활용하면 아주 간단하게 처리할 수 있습니다.

새로고침 예제 코드

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body onload="handleLoad()">
  <button id="btn">Click Me!</button>
   <script>
     let arrayKittens = [ "https://placekitten.com/200/300", "https://placekitten.com/210/310", "https://placekitten.com/300/300", "https://placekitten.com/300/200", "https://placekitten.com/310/210", "https://placekitten.com/400/300"];
 
     let button = document.querySelector("#btn");
     button.style.display = "block";
     button.style.margin = '20px 0px'
 
     const handleClick = (e) => {
       console.log("click")
       location.reload(true);
     }
 
     button.addEventListener("click", handleClick);
 
 
     let body = document.querySelector("body");
     let image = document.createElement("img");
 
     const handleLoad = (e) => {
       console.log("loaded")
       let random = Math.floor(Math.random() * arrayKittens.length);
       let newImg = arrayKittens[random];
       image.setAttribute("src", newImg);
       image.setAttribute("width", "300");
       image.setAttribute("height", "300");
       image.setAttribute("alt", "  arrayKittens[" + random + "]");
       image.style.objectFit = "cover";
 
 
       body.appendChild(image);
     };
   </script>
 </body>
</html>

코드 동작 원리

위 예제에는 두 개의 이벤트 리스너가 등록되어 있습니다. 각각의 역할은 다음과 같습니다.

handleLoad(): 페이지가 처음 로드될 때 실행되어, 고양이 사진 배열(arrayKittens)에서 무작위로 하나를 골라 <img /> 요소를 생성한 뒤 DOM에 추가합니다.
handleClick(): 사용자가 "Click Me!" 버튼을 클릭하면 실행되어, reload() 메서드를 호출해 페이지를 새로고침합니다.

즉, 버튼을 클릭할 때마다 페이지가 다시 로드되면서 매번 다른 고양이 사진이 화면에 나타나게 됩니다. 이 페이지의 거의 모든 로직이 자바스크립트로 처리되는 것을 확인할 수 있습니다.

reload() 메서드의 매개변수 이해하기

reload() 메서드에 전달하는 true 또는 false 값은 페이지를 어디서 다시 불러올지 결정합니다.

false(기본값): 브라우저 캐시에 저장된 리소스를 사용해 페이지를 다시 로드합니다. 별도로 값을 전달하지 않으면 기본값이 적용됩니다.
true: 캐시를 우회하고 서버에서 직접 페이지를 다시 불러옵니다.

따라서 특별히 서버에서 최신 데이터를 강제로 받아와야 하는 상황이 아니라면 값을 생략해도 무방합니다.

다만 한 가지 유의할 점이 있습니다. 최신 브라우저 명세에서는 이 매개변수가 더 이상 공식적으로 지원되지 않으며, 대부분의 현대 브라우저에서 해당 인자는 무시됩니다. 캐시를 확실히 우회하고 싶다면 URL 뒤에 임의의 쿼리 문자열을 붙이는 방식(예: location.href = location.href + '?t=' + Date.now())을 함께 고려해 보세요.

마무리

정리하면, 자바스크립트로 페이지를 새로고침하는 것은 location.reload() 한 줄이면 충분합니다. 캐시와 서버 로딩의 차이만 잘 이해하고 있다면 다양한 상황에서 손쉽게 활용할 수 있습니다. 생각보다 간단하죠?