• 들어가기 전에 회원가입이나 사용자 정보를 입력 후 서버로 보내야 하는 일은 자주 있습니다. 로그인, 설문조사, 회원가입, 주문정보 입력 등 우리가 웹을 통해서 서버로 데이터를 보내야 하는 경우는 많이 있습니다. HTML은 form태그를 통해서 이를 지원합니다. 값 체크와 서버로 보내는 부분까지 실무에서 많이 사용되는 방법이므로 이를 알아보겠습니다.

---

1. Form태그를 사용해서 서버에 클라이언트 데이터를 보낼 수 있다.

• form input
• form validation

form 태그를 사용해서 사용자 입력을 받을 수 있습니다. 브라우저는 form 태그를 사용해서 사용자 입력을 받으면 이를 쉽게 전송해줍니다. `

` form전송을 위한 html태그는 딱 정해진 건 없습니다. 이를 찾아보면 여러 가지 형태로 form을 구성할 수가 있습니다. 위 예제코드처럼 input태그를 사용해서 값을 입력받을 수 있으며, input태그의 type에 따라서 다양한 입력을 받을 수가 있습니다.

• input type이 submit(혹은 button type이 submit)인 엘리먼트가 있을 경우, 해당 엘리먼트를 클릭하거나 다른 폼엘리먼트 요소에서 엔터를 치면 form에 입력한 정보가 자동으로 서버로 넘어갑니다.

• form태그의 action속성에 적어주면 됩니다.

• input 데이터가 합쳐져서 서버로 전송이 됩니다. POST방식과 GET방식을 우리가 이해해야 합니다.

form으로 전송하는 데이터는 POST방식으로 전송하는 게 일반적인 방법입니다. GET은 우리가 브라우저 주소창에 입력하는 정보처럼 서버로 무언가를 요청하는 경우 default로 GET요청입니다. 하지만 POST를 서버로 어떤 데이터를 보내줄 때 사용하는 HTTP Method입니다. 이 두 개의 차이점을 좀 더 알아보면 좋습니다. 이 상태에서 submit 버튼을 누르면 /join으로 데이터를 보낼 수 있습니다.물론 서버에서 이요청을 받아서 처리하도록 routing 처리를 해야 할 겁니다. 이 부분은 여기서는 생략하겠지만, 백엔드 경험이 있다면 이 부분을 이해하고 있을 것으로 생각합니다. 참고로 서버에서 하는 일을 짧게 요약하면 다음과 같습니다.,'/join'으로 request url이 탐지되면, 이제 클라이언트에서 보낸 데이터를 획득하고(request 객체에 담겨서 온 값) 그 값이 올바른지 확인하거나 아니면 DB에 그 값을 추가하는 증의 작업을 할 겁니다. 이후에는 다시 클라이언트에 어떤 결과 페이지(html)를 만들어서 응답해야겠죠. 예를 들어 '회원가입이다!'라고 하면 회원가입 정보를 받은 후에 회원가입 완료가 잘 됐다는 메시지 화면을 보내주거나,아니면 서비스페이지의 메인화면으로 이동시켜줘야 할 겁니다. 그런식으로 요청을 받은 후 응답(response)을 주는 행동을 서버가 해야 합니다. 그러면 브라우저에서는 그 응답을 받아서 다시 화면을 새롭게 노출하게 되는 것이죠.

1. form데이터를 Ajax로 처리할 수도 있습니다. 즉 form에 값을 입력하고 전송버튼을 누르면 화면이 새로고침 되지 않고 서버로 데이터가 전송되고, 응답을 받아서 후속처리를 하는 것이죠. 서버에서는 Ajax를 통해서 데이터를 받은 후 처리결과만 응답을 주고, 클라이언트가 이후에 화면을 전환하거나, UI를 변경시키는 등의 작업을 할 수 있을 겁니다.