3-10 수정과 삭제 中

점프 투 스프링부트를 따라가다보니 3-10 부분에서 삭제를 할때 javascript를 넣는 것을 보고 궁금해서 찾아보게되었습니다.

---

 <a href="javascript:void(0);" th:data-uri="@{|/question/delete/${question.id}|}"
                class="delete btn btn-sm btn-outline-secondary" sec:authorize="isAuthenticated()"
                th:if="${question.author != null and #authentication.getPrincipal().getUsername() == question.author.username}"
                th:text="삭제"></a>

javascript: => 가상 URL

href 뒤에 javascript로 받을 경우 ":" 뒤의 값을 자바스크립트 코드로 해석한다.

• javascript:void(0)
  • 현재 페이지에 아무런 변화 없이 코드를 실행이 가능해진다.

th:data-uri => 삭제를 실행할 URL을 얻기위해 사용

class="delete "

• 삭제 버튼이 눌린 것을 체크하고 실행시키기위해서 넣어준다.

---

자바스크립트 블록은 /body 태그 바로 위에 삽입하는 이유

• 화면 렌더링이 완료된 후에 자바 스크립트가 실행되기 때문에 -> 렌더링이 안된상태에서 자바스크립트를 실행하면 오류가 발생할 수있으며, 화면이 지연되는 문제도 발생 가능하다.