3. form 데이터 보내기 - FE (1)

1) form 데이터 보내기

form 태그를 사용한 html

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

<form action="/join" method="post">     <div class="inputWrap">         <div class="email">             <span> Email </span> <input type="text" name="email"><br/>         </div>         <div class="password">             <span> Password </span> <input type="password" name="password"><br/>         </div>     </div>     <input class="sendbtn" type="submit"> </form>

 

• form태그에서 input 태그를 사용해서 값을 입력받을 수 있으며, input 태그의 type에 따라서 다양한 입력을 받을 수가 있습니다. 실제로 input의 name을 기준으로 서버에 날아갈 때 name이 어떤 키값이 되는 거예요. name은 굉장히 중요한 키값입니다. 이름을 아무거나 적으면 안 되고 서버와 클라이언트 간의 어떤 규칙에 의해서 서로 약속된 이름으로 주어져야 되는 것입니다. 타입은 사용자에게 어떻게 UI로 브라우저가 그려서 보여줄 거냐라는 건데 input 타입이 여러 개 있습니다.
• 어떻게 서버로 전송될까요?
  • input type이 submit (혹은 button type이 submit) 인 엘리먼트가 있을 경우, 해당 엘리먼트를 클릭하거나 다른 폼 엘리먼트 요소에서 엔터를 치면 form에 입력한 정보가 자동으로 서버로 넘어갑니다.
• 그럼 어디로 전송될까요?
  • form태그의 action속성에 적어주면 됩니다.
• 어떤 값이 전송될까요?
  • Input 데이터가 합쳐져서 서버로 전송이 됩니다. POST방식과 GET방식을 우리가 이해해야 합니다.

 

• HTTP Method 중 form으로 전송하는 데이터는 POST 방식으로 전송하는 게 일반적인 방법입니다.
• GET은 브라우저 주소창을 통해 서버로 요청하는 경우 해당하는 방식입니다. GET은 URL에 붙어서 서버로 날아가기 때문에 데이터가 다 보여지고 길이에 제약도 있습니다.
• 위 코드에서 submit버튼을 누르면 action인 /join으로 데이터를 보낼 수 있습니다. 물론 서버에서 이 요청을 받아서 처리하도록 routing 처리를 해야 할 겁니다.
• 참고로 서버에서 하는 일을 짧게 요약하면 다음과 같습니다.
  action인 '/join' 으로 request url이 탐지되면, 클라이언트에서 보낸 데이터를 획득하고(request 객체에 담겨서 온 값) 그 값이 올바른지 확인하거나 아니면 DB에 그 값을 추가하는 등의 작업을 할 겁니다. 그리고 다시 클라이언트에 어떤 결과 페이지(html)를 만들어서 응답을 합니다.
• 예를 들어 '회원가입이다!'라고 하면 회원가입 정보를 받은 후에 회원가입 완료가 잘 됐다는 메시지 화면을 보내주거나, 아니면 서비스페이지의 메인화면으로 이동시켜줘야 할 겁니다. 그런식으로 요청을 받은 후 응답(response)을 주는 행동을 서버가 해야 합니다. 그러면 클라이언트인 브라우저에서는 그 응답을 받아서 다시 화면을 새롭게 노출하게 되는 것이죠.
• 요청 정보를 header에 담아서 보낸다고 생각하면 됩니다.
• 라우팅(영어: routing)은 어떤 네트워크 안에서 통신 데이터를 보낼 경로를 선택하는 과정이다.
• form 데이터를 Ajax로 처리할 수도 있어요. 예를 들어서 이런 겁니다. 화면이 안 바뀐 상태에서 응답이 성공인지 실패인지 이런 게 나올 수도 있어요. 그런 경우에는 이 화면에서 화면 refresh 없이 바로 어떤 메시지가 나오는 겁니다. 빠르게 결과를 보여주는 것이죠. 화면의 새로 고침도 없고. 그런 것은 Ajax를 통해서 보내면 됩니다. 해당 방법을 사용하면 되게 좋은 UX라고 할 수 있습니다.
• 왜냐하면 더 빨리 화면에 결과를 보여주는 것이기 때문에 보통 싱글 페이지를 만들 때는 그런 방법을 많이 씁니다.

생각해보기

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

참고 자료

form과 input태그를 어떻게 사용하는지 알 수 있습니다.

[참고링크] HTML Forms            https://www.w3schools.com/html/html_forms.asp