삽질기록 #7 html form의 속성들(method, action)

(2022.03.03)

스프링 공부를 시작한 뒤로 반쯤은 신기하고 반쯤은 잘 이해가 안 되는 채로 우선은 큰 흐름들을 잡아가고 있다. 우선 아무리 기초적인 것이라도 내가 궁금한 것들, 내가 고민했던 것들을 정리해 본다.

 

POST가 안 돼

회원가입 기능을 간단하게 구현하다가 삽질을 좀 했다. 미리 주어진 회원가입 폼 페이지 파일인 form.html을 컨트롤러와 연결해서 폼에서 id, 이름 등의 정보를 받아서 POST해서 넘겨주는 작업이었는데, 그냥 간단하게 될 줄 알았는데 잘 안 됐다!

 

가장 먼저 갸우뚱했던 문제는, 분명히 id, 이메일, 비밀번호 같은 개인정보를 입력해서 가입하는 과정인데 주소창에 해당 정보들이 param이 되어서 뜬다는 점이었다. 

이렇게 입력하면 주소창에 내가 입력한 정보들이 다 떠버린다. 

당연히 이러면 안 되는 거 아니야?

그래서 찾아보니까 해당 html 파일에서 form의 method 속성이 get으로 되어있어서 그랬던 거였다. 이미 주어진 파일을 갖고 구현하는 거여서 이런 디테일에는 신경을 못 쓰고 있었던 것. GET은 페이지(서버)로부터 정보를 받아오는 것, POST는 정보를 서버에 넘겨주는 것 정도로 생각하고 form을 submit하는 건 당연히 POST일 거라고 잘못 이해하고 있어서 생겼던 일이기도 하다.

 

html form 태그의 속성(attribute)들

기본적으로 html form 태그는 이렇게 구성되어 있다.

<form name="gorgeous-form" method="get" action="/customer/new">

<!--form 내용-->

</form>

여기서 form의 name 속성은 백엔드에서는 별로 큰 의미는 없는 것 같고, method와 action 속성의 의미를 알아야 한다.

 

method

여기서 method 속성은 HTTP method 속성을 의미한다. 기본적으로 GET과 POST가 있다. GET은 말 그대로 정보를 서버로부터 요청해서 클라이언트(브라우저) 단으로 가져오는 것이라고 보면 되고, POST는 서버 단으로 엔티티(HTTP 리퀘스트/리스폰스의 바디에 적재되는 데이터)를 전송하는 메서드라고 이해하면 된다.

 

form을 submit할 때 GET 메서드를 사용하면 폼의 데이터를 url 끝에 '?userid=a&password=a' 같은 식으로 붙여서 보낸다. 이렇게 URL 끝에 ? 붙이고 정보를 덧붙이는 걸 query string이라고 한다. 대부분 특정 데이터로 필터링된 데이터(검색 결과 등)를 요청할 때 쓰인다. 이처럼 URL에 폼의 정보가 그대로 노출됨은 물론, GET 요청으로 돌아온 리스폰스는 브라우저 캐시에 저장되기 때문에 보안이 필요한 데이터에는 적합하지 않다.

 

POST 메서드로 전달된 대부분 서버 내부에서 등록 등을 위해 쓰인다. GET과는 달리 쿼리 스트링이 아니라, 별도의 메시지 바디에 데이터를 넣어서 전달하고 브라우저 캐시에도 내용이 남지 않는다.

 

그래서 만약에 검색 기능을 구현한다면 GET 메서드를 쓰면 되고, 지금 예시같은 회원가입처럼 보안이 필요하고 전송 후 서버 내부의 작업을 위해 보내는 데이터는 POST 메서드를 써서 보내면 된다.

 

action

간단하게 말해서, 해당 form을 submit했을 때 데이터가 서버의 어떤 URL로 전달될지를 정하는 속성이다. 위 예시처럼 action 속성을 "/customer/new"로 해 두고 스프링부트의 컨트롤러 메서드에 @PostMapping("/customer/new") 어노테이션을 추가해 주면 POST 메서드를 통해 /customer/new로 폼의 데이터가 전달되면서 해당 컨트롤러 메서드가 실행되게 된다.

---

네트워크는 물론이고 HTML이나 프론트엔드에 대해서도 기본적인 지식이 필요하다는 걸 느꼈다. 아직 생소한 것들 투성이지만, 뭔가 이제 진짜 백엔드 개발자로서 뭔가를 만드는 기분이 들어서 신기하다. 차근차근 열심히 해 보기!

 

참고자료

- HTTP 메서드

- <form> 태그의 method 속성

- HTML <form> method attribute​

- 인프런 <모든 개발자를 위한 HTTP 웹 기본 지식> 강의