[TIL] #DAY - 037 - onclick? = location.href & location.replace! (내일배움캠프AI 3기)

---

---

onclick!? onclick!

온클릭은 어디에서 사용하는걸까 싶죠?

어떻게 사용하면 좋을지 한번 배워보았습니다.

과연 onclick 은 무엇일까?

 

---

---

---

 

checkin.html / login.html & signup.html / home.html

체크인에서 가입된 회원인지 확인 후 로그인 또는 회원가입 페이지로 보내주는 코드를 구현하였다.

아래 3가지 방법을 통해서 보낸다고 하였을때 어떻게 다른지 알아보자.

# 1번 a 태그 방법
<a href="home.html">home으로 이동</a>
# 2번 location.href 방법
<button onclick="location.href='home.html';">home으로 이동</button>
# 3번 location.replace 방법
<button onclick="location.replace('home.html');">home으로 이동</button>

 

세 방법의 차이는 뒤로가기(backspace)를 눌렀을때 생깁니다.

checkin -> login&signup -> home

위와 같이 이동하는 코드를 구성하고 home 에서 뒤로가기를 한다면
1, 2번 방법은 뒤로가기를 눌렀을때 login&signup 로 가게되고,
3번은 checkin 으로 가게 됩니다.

이를 활용해 결재 나 글쓰기 같은 쿼리를 전달해야 할때는 2번 replace를 쓰며
쿼리가 중복 발송이 되는 에러를 미연에 방지 할 수 있는 이점이 있습니다.

해당 방법을 이용해 중요한 글쓰기, 주문 및 결재, 같은 형식을 전달해야할때
loaction.replace 방법을 사용하여 중복 발송이되는 에러를 방지 할 수 있는 코드를 작성 할 수 있다.