location.href / location.replace()

자바스크립트 언어에서 이 둘은 유사한 기능을 합니다.
자바스크립트를 이용해 지정한 URL로 동일하게 이동하지만,
이 둘은 상당히 다른 점이 많으며, 어떤 경우에는 주의해서 사용해야 하기도 합니다.

간단히 보기👁️

항목	location.href	location.replace()
타입	속성	메써드(함수)
웹브라우저 히스토리	저장됨	저장안됨
브라우저 뒤로가기	"location.href" 를 호출한 페이지로 이동	웹브라우저 히스토리에 있는가장 최근 이전 페이지로 이동. 뒤로가기로 "location.replace()" 를 호출한 페이지로 갈 수 없음.
사용방법	location.href = 'page.html';	location.replace('page.html');
용도	URL을 이동하는 대부분의 경우에 사용	뒤로가기로 이전 페이지로 가는 것을 차단하거나, 방문 히스토리를 남기지 않아야 하는 경우에만 사용.

사용자 클릭 등의 사용자 반응에 의해 URL을 이동하는 경우
location.href 를 사용하는 것이 원칙!!
웹 브라우저에 히스토리가 남기 때문에 사용자 선택에 의해 이전 방문 URL로 이동하거나 뒤로 가기를 할 수 있기 때문입니다.

이런 일반적인 URL 이동에 location.replace() 를 사용하면
사용자가 이전 URL 이동을 원할 경우 불편을 초래하게 됩니다.

---

반면, 쇼핑몰 결제 프로세스나, 중요 정보를 변경 후 다른 URL로 이동하게 되는 경우, 뒤로가기로 해당 URL로 다시 접근하게 되는 것을 막을 필요가 있을 수 있습니다.
이런 경우 location.replace()를 이용해 정보나 값을 변경하는 페이지를 뒤로가기로 접근할 수 없도록 막아야 합니다!!

이렇게 하지 않을 경우, 사용자가 뒤로가기를 눌러 이전 URL로 이동하면서 값이 재적용되거나 누적되는 문제가 생길 가능성이 높아집니다.

🔗이해를 도울만한 사이트!

---

💡다른 방법 (간단한!)

returnUrl

아래의 예시 링크에서 처럼 login.html? 다음에 returnUrl=http://~ 로 설정 가능
위와 같이 로그인페이지로 접속시 로그인 후 이동할 url을 returnUrl 파라미터에 실어보내면
로그인 폼의 hidden 값에 이동할 url 이 자동으로 반영되어, 로그인 후 지정된 페이지로 연결할수 있습니다.

http://neomart.cafe24.com/member/login.html?returnUrl=http://neomart.cafe24.com/product/list.html?cate_no=10&

로그인 버튼을 클릭하여 로그인 페이지 이동 후 로그인시 다시 상품분류 페이지로 이동하도록 수정하신다면 아래와 같이 로그인 버튼의 링크를 스크립트로 수정하여 사용가능!

<a href="/member/login.html">로그인</a>
해당 부분을 아래와 같이 변경 ↓

<a href="#none" onclick="location.href='/member/login.html?returnUrl=' + encodeURIComponent(window.location.href) ">로그인</a>

이 링크에서 returnUrl은 현재 페이지의 URL을 encodeURIComponent(location)를 통해 URL 인코딩하여 전달합니다. 즉, 로그인 후 사용자가 로그인 페이지를 방문하기 전의 페이지로 다시 돌아갈 수 있도록 유도하는 기능을 합니다. 이를 통해 사용자는 로그인 후 바로 원래 보던 페이지나 작업으로 돌아갈 수 있게 됩니다.

예시 )
로그인 후, 시스템은 returnUrl 값을 확인하여 사용자를 /product/123 페이지로 다시 리다이렉션

---

<a href="/member/login.html?noMemberOrder&returnUrl=%2Fmyshop%2Forder%2Flist.html">주문조회</a>

• noMemberOrder
  로그인하지 않은 사용자가 주문 조회를 시도할 때, 로그인 없이도 주문을 조회할 수 없다는 것을 알려주는 파라미터.

• returnUrl=%2Fmyshop%2Forder%2Flist.html
  로그인 후, 사용자가 다시 원래의 페이지(주문 목록 페이지)로 돌아가도록 지정한 URL입니다. URL 인코딩된 부분 %2Fmyshop%2Forder%2Flist.html은 /myshop/order/list.html을 의미