[js] URL 이동 및 히스토리 제어 메서드

✅ 1. location.assign(url)

• 지정한 URL로 이동합니다.
• 브라우저 히스토리에 현재 페이지가 남습니다 (뒤로가기 가능).
• location.href = url과 동일한 동작입니다.

location.assign("/login");  // 이동 + 뒤로가기 가능

 

---

✅ 2. location.replace(url)

• 지정한 URL로 이동합니다.
• 히스토리에 현재 페이지를 남기지 않습니다 (뒤로가기 불가).
• 로그인 후 리디렉션 등에 자주 사용됩니다.

location.replace("/login");  // 이동 + 현재 페이지를 히스토리에서 제거

---

✅ 3. location.reload()

• 현재 페이지를 새로고침합니다.
• 캐시 없이 새로고침하려면 location.reload(true) (일부 브라우저에서는 무시됨)

location.reload();  // 현재 페이지 새로고침

---

✅ 4. window.history.pushState(state, title, url)

• 브라우저 주소만 변경합니다. 페이지는 이동하지 않습니다.
• 주로 **SPA (Single Page Application)**에서 사용됩니다.
• 사용자가 뒤로가기를 눌렀을 때를 위해 popstate 이벤트로 상태를 처리해야 함

// 주소만 '/profile'로 바꿈, 실제 페이지 이동 없음
window.history.pushState({ userId: 123 }, 'Profile', '/profile');

// popstate 이벤트 핸들링 예시
window.addEventListener('popstate', function(event) {
  console.log('뒤로가기 발생', event.state);
});

---

✅ 요약 비교

 

메서드	페이지 이동	히스토리 남김	주 용도
location.assign()	O	O	일반 페이지 이동
location.replace()	O	❌	로그인 리디렉션
location.reload()	현재 페이지 새로고침	-	새로고침 버튼
history.pushState()	❌	O (주소만 바뀜)	SPA 라우팅