2 분 소요

안녕하세요. Nerd-Lee입니다.
공부 내용은, 인프런 박매일님의 [NarP Series]MVC 프레임워크는 내 손에[나프1탄] 을 참고하였습니다.
MVC 1단계인, Servlet 환경으로만 만들어보고, MVC 2단계로 넘어가고
나중에는 Spring Framework를 사용하는 방식의 강의입니다.
MVC 1단계는, Controller + Model 만을 사용하는 방식입니다.

1. 테스트 html 파일 만들기

  • 두 숫자를 입력해서, 전송버튼을 누르면 서블릿으로 넘겨서 계산을 하고, 그 값이 html 파일로 응답하는 예제
  • 수1~수2까지의 합을 더하는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Insert title here</title>
</head>
<body>
	<table class="table">
		<tr>
			<td>수1</td>
			<td><input type="text" name="su1" /></td>
		</tr>

		<tr>
			<td>수2</td>
			<td><input type="text" name="su2" /></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" value="전송" class="btn btn-primary"/>
				<input type="button" value="취소" class="btn btn-warning"/>
			</td>
		</tr>
	</table>
</body>
</html>

2. 서블릿으로 넘기는 과정 공부

  • 일단, input 태그에 있는 name이 변수역할을 한다. 웹에서는 파라미터라고 부른다.
  • 전송과 취소를 눌러도 아무런 반응을 하지 않는다. 이건 당연한 것이다.
    아무런 기능을 제공하지 않고 있기 때문이다.
  • 데이터를 입력받기 위해서는 <form> 태그를 이용한다.
  • <table> 태그의 부모로 <form> 태그를 열고 닫아준다.
  • 그리고 취소 버튼의 type을 reset 으로 변경을 해본다.
  • 전송버튼의 type은 submit 으로 변경한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<form>
	<table class="table">
		<tr>
			<td>수1</td>
			<td><input type="text" name="su1" /></td>
		</tr>

		<tr>
			<td>수2</td>
			<td><input type="text" name="su2" /></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="전송" class="btn btn-primary"/>
				<input type="reset" value="취소" class="btn btn-warning"/>
			</td>
		</tr>
	</table>
</form>
</body>
</html>
  • 이대로 하면, 취소버튼을 누를 경우, input창에 있는 값이 reset이 되고
    전송버튼을 누르게 되면, url에 쿼리가 추가가 되는데, 쿼리는 input의 name 부분과 값으로 되어있다.
  • 이제 form 태그에 action 이란 속성을 이용해서, 서블릿에 전송을 해주는 역할을 만들어줘야 한다.
<form action="calc.do">

3. 서블릿 만들기

  • CalcController 라는, 서블릿을 하나 만들고, URL 맵핑을, /calc.do로 한다.
  • service 메서드에 있는 매개변수 중 request라는 변수로, 폼 파라미터가 넘어온다.
  • 서블릿에서 파라미터는 무조건 String만 받을 수 있기 때문에
    Integer.parseInt 함수를 이용해서, 문자열을 정수형으로 변환해야 한다.
  • response.getWriter()로 클라이언트의 정보를 PrintWriter로 얻어서 클라이언트에게 화면을 렌더링해준다.
package controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/calc.do")
public class CalcController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 1. 클라이언트에서 넘어오는 폼 파라미터 받기 ( 파라미터 수집, su1, su2 )

		/*
		 * 서블릿에서 파라미터는 무조건 String만 받을 수 있기 때문에 Integer.parseInt 함수를 사용해서 문자열을 정수형으로
		 * 변환한다.
		 */
		int su1 = Integer.parseInt(request.getParameter("su1"));
		int su2 = Integer.parseInt(request.getParameter("su2"));
		
		PrintWriter out = response.getWriter();
		
		if (su1 > su2) {
			out.println("수1의 값을 더 크게 입력하세요.");
		}

		else {
			// su1 ~ su2 = ?
			int sum = 0;

			for (int i = su1; i <= su2; i++) {
				sum += i;
			}

			out.println("total : " + sum);
		}
	}
}
  • 그리고 서버를 실행하면, 1과 100을 입력했을 때, calc.do로 url을 변경하면서 total : 5050 이란 값이 나오게 된다.


이 글이 도움이 되셨다면 댓글 부탁드립니다^^
다음 글로 찾아오겠습니다!

참고