JavaScript / 페이지 이동과 리디렉트, location.assign·replace 차이

JavaScript에서 다른 주소로 이동하려면 window.location.assign(url)이나 window.location.replace(url)를 사용합니다. assign()은 보통 현재 페이지를 방문 기록에 남기고, replace()는 현재 기록 항목을 새 주소로 바꿉니다. 단순한 링크 이동이라면 먼저 일반 <a> 링크가 충분한지 판단하세요.

assign(), replace(), href 중 선택하기

window.location.href는 현재 주소를 읽는 문자열 속성이기도 합니다. 값을 설정하면 이동합니다. assign()과 href 지정은 일반적인 이동에 사용하며, 현재 항목을 대체할 의도를 드러내고 싶으면 replace()를 사용하세요. 뒤로 가기의 최종 동작은 그 탭의 이전 방문 기록에 따라서도 달라집니다. MDN의 Location.assign() 문서와 Location.replace() 문서를 참고하세요.

const destination = 'https://example.com/guide';
window.location.assign(destination);  // 현재 페이지로 돌아올 수 있는 이동
// 현재 페이지를 방문 기록에서 대체해야 하는 흐름이라면:
// window.location.replace(destination);

현재 주소를 비교해 조건부 이동하기

특정 페이지에서만 자동으로 이동해야 한다면 주소 문자열 전체를 곧바로 비교하기보다 new URL(window.location.href)에서 필요한 부분을 비교하세요. 전체 주소에는 프로토콜, 끝 슬래시, 검색 매개변수, 해시가 포함되어 예상과 다를 수 있습니다. 비교할 조건을 명확히 정해야 다른 페이지까지 이동시키거나 반복 이동을 만들지 않습니다.

const current = new URL(window.location.href);
if (current.origin === 'https://old.example.com' &&
    current.pathname === '/guide/') {
  const destination = new URL('https://new.example.com/guide/');
  destination.search = current.search; // 필요한 경우 검색 조건 유지
  window.location.replace(destination.href);
}

위 예제의 도메인은 설명용입니다. 실제 배포에서는 출발 주소와 도착 주소를 확인해 바꾸고, 도착 페이지에는 같은 이동 코드가 적용되지 않도록 하세요. origin은 프로토콜·호스트·포트의 조합이므로 호스트 이름만 비교할 때보다 조건이 명확합니다. 검색 매개변수를 옮겨야 하는지, 해시도 필요한지는 서비스 동작에 맞춰 결정합니다.

전체 예제: 뒤로 가기 차이 확인하기

아래 코드를 UTF-8로 redirect-demo.html에 저장하고 브라우저에서 엽니다. 이 예제는 외부 사이트로 보내지 않고 같은 파일에 ?view=target을 붙여 다시 엽니다. 먼저 assign() 버튼을 누른 뒤 뒤로 가기를 시도하고, 출발 화면에서 다시 replace() 버튼을 눌러 비교하세요.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>브라우저 이동과 방문 기록 비교</title>
</head>
<body>
<p id="current"></p>
<div id="source">
  <p>출발 페이지입니다. 두 버튼 중 하나를 누르세요.</p>
  <button id="assign" type="button">assign()으로 이동</button>
  <button id="replace" type="button">replace()로 이동</button>
</div>
<div id="target" hidden>
  <p>도착 화면입니다. 주소에 view=target이 있습니다.</p>
  <p>브라우저의 뒤로 가기를 눌러 출발 화면이 나타나는지 확인하세요.</p>
</div>
<script>
const url = new URL(window.location.href);
const source = document.querySelector('#source');
const target = document.querySelector('#target');
const current = document.querySelector('#current');
const isTarget = url.searchParams.get('view') === 'target';

source.hidden = isTarget;
target.hidden = !isTarget;
current.textContent = url.href;

function destination() {
  const next = new URL(window.location.href);
  next.searchParams.set('view', 'target');
  return next.href;
}

document.querySelector('#assign').addEventListener('click', () => {
  window.location.assign(destination());
});
document.querySelector('#replace').addEventListener('click', () => {
  window.location.replace(destination());
});
</script>
</body>
</html>

assign()으로 이동한 경우 뒤로 가기를 누르면 이 파일의 출발 화면으로 돌아옵니다. replace()로 이동한 경우 출발 화면의 현재 기록 항목이 바뀌므로 뒤로 가기로 그 항목에 돌아가지 않습니다. 이전에 다른 페이지를 방문했다면 그 페이지로 갈 수 있습니다. 두 버튼은 눌렀을 때만 실행하므로 파일을 열자마자 이동하거나 반복 이동하지 않습니다.

영구 주소 변경이라면 서버 설정 검토하기

브라우저 스크립트 이동은 원래 페이지를 받은 뒤 스크립트가 실행되어야 작동합니다. 사이트 주소 자체가 옮겨졌다면 서버가 HTTP 리디렉션 응답을 반환하도록 설정할 수 있는지 먼저 확인하세요. 영구 이전인지 일시 이동인지에 따라 리디렉션 상태를 결정하고, 기존 링크와 검색 노출에 미칠 영향도 검토해야 합니다.

사용자가 누를 수 있는 이동 버튼만 필요한 경우에는 JavaScript 대신 목적지가 드러나는 일반 링크가 더 간단합니다. 스크립트를 적용할 때는 존재하지 않는 도착 주소, 보존해야 할 검색 매개변수, 돌아가기 동작을 실제 환경에서 점검하세요.