준비중..
08 JSP를 만나다: form 데이터 주고 받기
# JSP를 만나다: form 데이터 주고 받기
우리는 앞서 웹 서비스는 클라이언트와 서버로 구성되어있고, 이들은 요청과 응답이라는 방식을 통해 통신한다고 배웠다. 이를 실제로 연습해보자.
## 학습목표
+ form 태그의 이해 및 활용
+ request 객체의 이해 및 활용
## form 태그
데이터를 서버에 전달하기 위해서는 form 태그를 알아야 한다. form 태그의 예로 로그인창을 떠올리면 쉽다.
form 태그에서 주요한 속성은 두 가지가 있다. 바로 action과 method이다. `action`은 데이터를 전달할 대상을 지정하고, `method`는 전달 방식을 정한다.
+ action: 수신 대상
+ method: 전송 방식
수신대상이 `target.jsp`이고, `post`방식으로 전송하는 코드는 아래와 같다.
```
<form action="target.jsp" method="post">
...
</form>
```
## 전송방식: GET / POST
전송 방식이란 데이터를 보내는 방법으로 총 5가지의 전송방식이 있다.
+ GET
+ POST
+ PUT
+ PATCH
+ DELETE
이들 중 가장 자주 사용하는 방법 2가지 GET과 POST를 비교해보자.
| 방식 | 속도 | 보안 | 전송량 |
|------|-----|-------|--------|
| GET | 빠름 | X | 제한적 |
| POST | 느림 | O | 제한 없음 |
`GET` 방식은 `쿼리스트링`이라는 형식으로 전송된다. 쿼리스트링은 요청 페이지주소의 뒷편에 변수와 값을 연결하여 아래와 같이 전달한다.
```
// 쿼리 스트링 예
// name과 age
cloudstudying.kr/hello.jsp?name=elena&age=23
```
이러한 쿼리스트링 전송은 속도가 빠른 반면, 보안에 취약하고 전송량이 한정적이다. 반면, `POST` 방식은 전송이 느리지만 보안처리가 되어있고 전송량의 제한이 없다.
따라서, 간단한 데이터 전송은 GET으로, 비밀번호 또는 양이 많은 게시물의 경우 POST를 사용하자.
## form 만들기
이제 본격적으로 `form`을 작성해보자.
앞서 연습했던 부트스트랩을 통해서 만들면 된다. 혹시 레퍼런스가 필요하다면 아래를 참고한다.
+ 점보트론: https://getbootstrap.com/docs/4.1/components/jumbotron/
+ 폼: https://getbootstrap.com/docs/4.1/components/forms/
+ 버튼: https://getbootstrap.com/docs/4.1/components/buttons/
+ 컨테이너: https://getbootstrap.com/docs/4.1/layout/overview/#containers
뼈대코드는 아래와 같다.
`form.jsp`
```
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Hello JSP</title>
</head>
<body>
<div>
<h1>Form</h1>
<p>폼을 통해 데이터 전송해봅시다.</p>
</div>
<form>
<div>
<label>이메일</label>
<input name="a" type="email" />
</div>
<div>
<label>비밀번호</label>
<input name="b" type="password" />
</div>
<button type="submit">전송</button>
</form>
<!-- Optional JavaScript -->
<Script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<Script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
```
다 만들었다면 아래 링크를 참조하여 확인해본다.
(피들: https://jsfiddle.net/sehongpark/zm6owge4/)
## form 데이터 받기
정말 폼 데이터가 잘 전송 되었을까? 이를 확인하기위해 아래 페이지를 작성하자.
`result.jsp`
```
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// request 객체로부터 파라미터를 가져옴.
String email = request.getParameter("a");
String password = request.getParameter("b");
System.out.println(email);
System.out.println(password);
%>
```
그럼 데이터를 던져보자. 어떻게 던져야할까? 위에서 배운 폼의 속성 `action`과 `method`를 설정함으로써 가능하다.
`form.jsp`
```
...
<form action="result.jsp" method="get">
...
```
아래와 같은 결과가 나왔다면 성공!
서버 콘솔 출력결과
