HTML data-* 태그에 데이터를 저장하고 핸들링해보자

​

코드로 배우는 스프링 프로젝트 p260, 262에 보면 수정페이지에

버튼을 여러개 만들어놓고 버튼에 따라 다른 링크로 가도록 하는 부분이 있다.

​

뭐.. html에서 버튼 클릭시 동작을 다르게 하게 짤 수도 있지만

예제에서는 html의 data- 속성을 이용하여 자바스크립트에서 핸들링하는 식으로 구현하였다. 유용할 것같아 여기에 기록으로 남긴다.
일단 htmp data- 속성에 대한 설명은 아래 링크를 참고하자

• https://www.zerocho.com/category/HTML&DOM/post/5a76d1eaabd090001b981ba6

​


실제 사용된
html 버튼부분

				<button type="submit" data-oper='modify' class="btn btn-default">
					Modify
				</button>
				<button type="submit" data-oper='remove' class="btn btn-default">
					Remove
				</button>					
				<button type="submit" data-oper='list' class="btn btn-info">
					List
				</button>

modify일때는 수정, remove일떄는 삭제, list일때는 목록페이지로 이동이다

셋다 submit속성을 가지고 있다. 근데 여기서 말하는 submit속성이란게 정확히 무슨 의미인지 아직 잘 모르겠다.

근데 아무튼 수정 페이지니까 수정버튼을 클릭하면 바꾼 내용이 수정이 되어야 하는데

그냥 submit만 구현해도 알아서 디비내용까지 수정이 된다.

이걸 구현했던가..?

너무 추상화가 잘되어 있어서 헷갈린다..

컨트롤러에 /modify로 post통신을 할때 디비에 반영하는 부분이 구현되어 있었다.

데이터 파싱이 따로 필요 없어서 편하긴 하다.