[HTML] form 태그는 언제 쓸까?
코드 리뷰를 받다가 html login form에는 form 태그를 사용해야한다는 리뷰를 받았다.
평소에 로그인 폼을 백엔드와 통신하도록 제대로 구현해 본 적이 없어 간과하고 있었다 ㅠㅠ
form 태그를 언제 써야하는지 조사해보자.
전통적인 서버사이드 웹에서는 GET 이외의 메소드 요청을 보내기 위한 필수적인 태그였다고 한다.
실제 mdn을 참고해봐도 form태그는 폼 생성시 필수적으로 사용해야한다고 설명하고 있다.
따라서 HTML을 이용해 페이지를 구성했다면 폼(제출) 요소에는 꼭 form 태그를 사용하는 것이 좋을 것 같다.
form 태그에 지정할 수 있는 많은 속성들이 있지만 기본적으로 action, method 는 지정해 주는 것이 좋다.
action = "폼 데이터를 처리할 백엔드의 url"
즉 action에는 백엔드의 endpoint가 들어가야 한다.
method = "post"
method에는 http request를 위한 메소드를 작성할 수있다.
대표적인 http request method에는 GET, POST, DELETE, PUT 이 있지만 폼 요소의 기능은 기본적으로 정보를 백엔드로 전송하는 것이기 때문에 PUT과 POST만 지원한다고 한다.
GET은 URL에 데이터를 넣어 전달한다.
즉 쿼리 스트링으로 포함4돼 전송되기 때문에 길이 제한이 있고 누구나 열람이 가능해 보안에 취약하다.
POST는 form 데이터를 별도 첨부해서 서버로 전달한다.
따로 브라우저에 의해 캐시되지 않고 데이터 길이 제한도 없다. 보통 개인의 정보는 이 post로 전송한다.
여기부터는 곁다리로 빠지는 내용이다. 이 문단은 생락해도 form의 사용에 대한 이해에 문제가 없다.
왜 form으로 DELETE나 PUT은 지원을 안할까?
그러면 만약 내가 버튼을 눌러 백엔드의 정보를 삭제해달라는 요청을(DELETE) 하고 싶으면
어떻게 해야할까??
궁금해져서 찾아보니 DELETE에서는 URI리소스를 정확하게 식별하고 요청을 보내기 때문에 form을 통해 값을 전달할 것이 없고,
PUT역시 전송해야 할 데이터가 대상을 대체할 데이터인데 이 데이터를 form으로 쪼개서 보낸 후 백엔드보고 처리하라고 할 수 없어서 지원하지 않는다고 한다.
개발자들이 사용하는 꼼수가 있긴 하다.
<form action = "타겟 url" method = "POST">
<input type = "hidden" value = "DELETE">
<form>
클라이언트 단에서 이렇게 hidden 속성을 사용해 서버로 데이터를 전송하면
스프링의 경우
spring.mvc.hiddenmethod.filter.enabled=true
이렇게 hidden타입의 속성들을 필터링 해준다고 한다.
노드의 경우는
<form action="~~~~~?_method=DELETE">
이렇게 _method=원하는 메소드 를 action 값 뒤에 붙여준다고 하는데 내가 백엔드를 다뤄보지 않아서 실제로 가능한지는 추후에 확인해보고 싶다.
어쨌든 쓰지 말라는 이유가 있으니 굳이 쓸 필요는 없을 것 같다..!
결론적으로 html에서 form을 사용할 때는 꼭꼭 form 태그를 써주자!!!!
나는 이렇게 form을 추가해 코드를 수정했다.