이번 글에서는 HTML + Servlet을 이용해 간단한 계산기 웹 애플리케이션을 만들어보고, 이 과정에서 자주 등장하는 parameter, mime-type, request, PrintWriter, this.form 같은 개념들을 정리해보겠습니다.
프로젝트 개요
- 기능: 두 숫자를 입력받아 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지를 계산
- 구성 파일
- calc.html – 사용자 입력 폼
- CalcAction.java – 입력값을 받아 계산하고 결과를 HTML로 응답하는 Servlet
1. HTML 입력 폼 (calc.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>간단 계산기</title>
<script type="text/javascript">
const regular_number = /^[0-9]{1,4}$/;
function send(f){
// 숫자 검증
if(!regular_number.test(f.su1.value)){
alert("0~9999 사이 숫자만 입력하세요.");
f.su1.value="";
f.su1.focus();
return;
}
if(!regular_number.test(f.su2.value)){
alert("0~9999 사이 숫자만 입력하세요.");
f.su2.value="";
f.su2.focus();
return;
}
f.submit();
}
</script>
</head>
<body>
<form action="calc.do" method="POST">
수1: <input name="su1"><br>
수2: <input name="su2"><br><br>
<input type="button" value="계산해줘" onclick="send(this.form)">
</form>
</body>
</html>
주요 포인트
- this.form : 클릭한 버튼이 속한 <form> 요소를 참조합니다.
- JavaScript로 숫자 검증 후 f.submit() 호출 → 서버의 /calc.do로 POST 요청 전송.
2. 서블릿 코드 (CalcAction.java)
@WebServlet("/calc.do")
public class CalcAction extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String su1String = request.getParameter("su1");
String su2String = request.getParameter("su2");
int su1 = Integer.parseInt(su1String);
int su2 = Integer.parseInt(su2String);
response.setContentType("text/html; charset=utf-8;");
PrintWriter out = response.getWriter();
out.print("<html><body>");
out.print("<h1>:::계산결과:::</h1>");
out.print(String.format("<h4>[%d] + [%d] = [%d]</h4>", su1, su2, su1 + su2));
out.print(String.format("<h4>[%d] - [%d] = [%d]</h4>", su1, su2, su1 - su2));
out.print(String.format("<h4>[%d] * [%d] = [%d]</h4>", su1, su2, su1 * su2));
out.print(String.format("<h4>[%d] / [%d] = [%d]</h4>", su1, su2, su1 / su2));
out.print(String.format("<h4>[%d] %% [%d] = [%d]</h4>", su1, su2, su1 % su2));
out.print("<a href='calc.html'>다시하기</a>");
out.print("</body></html>");
}
}
3. 주요 개념 정리
1) Parameter
- 클라이언트 → 서버로 전달되는 데이터
- 형식: name=value
- 예: /calc.do?su1=10&su2=5
- 가져오기: request.getParameter("su1")
2) MIME-Type
- 응답 데이터의 형식 지정
- 예:
- text/html : HTML 문서
- application/json : JSON 데이터
- image/png : PNG 이미지
- 여기서는 response.setContentType("text/html; charset=utf-8;")로 HTML 응답 + 한글 인코딩 지정
3) Servlet 역할
- 웹 요청을 받고 적절한 처리를 거쳐 응답을 생성하는 컨트롤러
- 직접 비즈니스 로직을 처리하기보다, 필요한 경우 Service 객체에 위임
- 흐름:
- 요청 수신
- 요청 데이터 파싱
- 비즈니스 로직 호출
- 응답 생성 및 전송
4) Service 객체 역할
- 순수한 비즈니스 로직 수행
- DB 접근이 필요한 경우 DAO와 협력
- Servlet과 달리 HTTP 요청/응답 처리보다 **“무엇을 할 것인가”**에 집중
5) request 객체
- 클라이언트 요청에 대한 모든 정보 포함
- 파라미터, 헤더, 쿠키, 요청 메서드 등 접근 가능
6) PrintWriter
- 서버에서 클라이언트로 텍스트 데이터 전송
- 함수명(예제에서는 out).print()를 사용해 HTML 태그와 내용 작성
7) this.form
- 클릭된 버튼이 포함된 <form> 요소를 참조
- JavaScript에서 해당 form을 제어할 때 사용 (submit(), reset() 등)
4. 동작 흐름도
[사용자] calc.html에서 숫자 입력 → "계산해줘" 클릭
↓ (JS 유효성 검사 통과 시)
[웹 브라우저] POST 요청 /calc.do (su1, su2 포함)
↓
[서블릿 CalcAction] request.getParameter()로 값 수신
↓
사칙연산 수행
↓
HTML 결과 생성
↓
[브라우저] 결과 페이지 표시
'Servlet, JSP' 카테고리의 다른 글
| JSP EL(Expression Language)에 대해 (2) | 2025.08.26 |
|---|---|
| Model 1 예제 : JSP와 Servlet이 Parameter를 주고 받는 방법 (0) | 2025.08.20 |
| JSP란? 그리고 JSP와 Servlet의 차이는? (0) | 2025.08.19 |
| Servlet 생명주기(Lifecycle) 이해하기 (2) | 2025.08.19 |