html form 태그에서 PUT, DELETE 사용

Yoon·2023년 2월 17일
0

1. client - html form 태그

REST API를 설계하다 보면 필요에 따라 GET, POST 뿐만아니라 PUT과 DELETE 메서드를 사용해야 하는 경우가 있다.

그러나 form 태그에서는 기본적으로 GET, POST방식만 지원한다.

그렇기 때문에 PUT,DELETE 메서드를 사용하기 위해서는 다음과 같이 hidden input 라인을 추가해 주어야 한다.

<form action="/board/api" method="POST">
  	<input type="hidden" name="_method" value="DELETE"/>
</form>

이 방법은 꼼수인데, 위와 같이 hidden input 의 value에 사용하고자 하는 메서드를 입력하여 form 태그 내부에 숨겨서 전송을 하는 것이다.


thymeleaf 사용시

타임리프는 hidden input 태그를 추가하지 안도록 자동으로 추가해 주기 때문에 th:method에 put이나 delete와 같이 사용하고 싶은 메서드의 이름을 추가하면 된다.

<form action="#" th:action="/board/api" method="#" th:method="delete">
  ...
</form>

2. server - HiddenHttpMethodFilter

위와 같이 단순히 hidden input 태그를 추가한다고 바로 REST API 에서 PUT 과 DELETE 를 사용할 수는 없다.

앞서 설명에서 말한 것과 같이 이 방법은 꼼수이다. form 태그에서 지원해주지 않는 메서드 방식을 input 태그에 숨겨서 전송하기 때문에 이를 받아서 사용하는 서버에도 추가 작업이 필요하다. 만약 따로 추가 작업 없이 통신을 수행하면 해당 요청은 form 태그에서 선언한대로 GET 이나 POST 로 전송되어서 알맞은 API 를 찾지 못하게 된다.

서버에서는 HiddenHttpMethodFilter 를 사용하여 hidden 타입의 input 태그 속성들을 필터링해준다. 이때 각 요청의 HTTP 메서드를 읽어서 PUT, DELETE 등으로 변경을 해준다.

따로 HiddenHttpMethodFilter 를 Bean 으로 등록해주어 사용해도 되지만, Spring boot 를 사용하는 경우에는 appliaction.properties 에 다음 라인을 추가하여 hiddenmethod filter 를 true 로 설정해줄 수 있다.

spring.mvc.hiddenmethod.filter.enabled=true
profile
나의 공부 일기

0개의 댓글