JSP 수업 #06 MVC 패턴 (1) MVC 패턴 계산기 구현

sookyoung.k·2022년 12월 20일

JSP

목록 보기

7/8

하... 사실 앞부분도 어려운데... 여기가 진짜 레알 미쳐버리는 곳임... 진짜 너무 어렵다... 아직도 이해를 제대로 한 건지 뭔지 잘 모르겠다. 사실 JSP응용도... 다 내 지식이 아님... 정리만 해둔거지... 머리 속에 체계적인 정리따위 되어있지 않음... 요새 공부가 좀 힘든 것 같다. 아니 사실 매번 이 말을 반복하는군. 걍 조용히 해야겠다.

😕 MVC 패턴?

Model - view - controller 의 약자

음... 그렇군요... 데이터와 뷰(보여지는 곳), 컨트롤러(Servlet, JSP)를 나눠서 코드를 분리한 것!

화면과 데이터 처리를 분리하기 때문에 코드 간의 종속성을 줄인다!
코드를 쉽게 분리하고 협업이 쉬워진다!

하지만 어렵습니다. 잘 다룰 줄 알게되면... 많은 도움을 주겠지만...

모델(model)

데이터를 처리하는 영역
DAO, DO, 엔티티 클래스 등으로 구성된다.

~~엔티티 클래스... 자꾸... 르세라핌의 안티프레즐이 생각나는...~~

뷰(view)

화면 담당!
뷰에서 데이터를 직접 가져오는 방식은 권장하지 x
데이터는 출력만 하는 것이 바람직하다. (그것이 mvc패턴의 의의일테니까...)
JSP, HTML 등

컨트롤러

MVC의 핵심! 모든 사용자 요청의 중심에 있다.
뷰에서 사용자의 요청이 발생하면 컨트롤러가 요청에 따라 모델을 통해 DB와 연동
뷰로 데이터를 전달할 때는 데이터가 들어있는 DO 형태의 객체를 request에 저장한 후 포워딩한다!

용어 정리(DAO, DTO, DO)

DAO: Data Access Object - 데이터베이스의 data에 접근하기 위한 객체

DTO: Data Transfer Object - 계층 간 데이터 교환을 하기 위해 사용하는 객체, 로직을 가지지 않는 순수한 데이터 객체 (getter/setter만 가진 클래스)

DO: Data Object - 데이터 베이스 테이블 구조와 연동되어 데이터를 표현하기 위한 클래스(엔티티 클래스, DTO) → 자바빈 클래스

🧮 MVC 패턴으로 계산기 구현

clacForm.html (view)
→요청→ Calculator.java(controller)
→포워딩→ calc.jsp (view)
(*model은 현재 구현 x)

calcForm.html

calcForm 구현

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>계산기 JSP</h2>
	<hr>
	<form method="post" action="calc.jsp">
		<input type="text" name="n1" size="10" /> 
		<select name="op">
			<option>+</option>
			<option>-</option>
			<option>*</option>
			<option>/</option>
		</select> 
		<input type="text" name="n2" size="10" /> 
		<input type="submit" value="실행" />
	</form>
</body>
</html>

계산기 입력 창을 만들어준다.

실행하면 계산기 창이 뜬다.

Calculator.java

Calculator 구현

package ch07;

// JavaBean!!! (JSP에서 객체를 가져오기 위한 기법)
public class Calculator {
	// 필드
	private int n1;
	private int n2;
	private String op;
	
	// 메소드
	public long calc() {
		long result = 0;
		
		switch (op) {
		case "+": result = n1 + n2; break;
		case "-": result = n1 - n2; break;
		case "*": result = n1 * n2; break;
		case "/": result = n1 / n2; break;
	 	}
		
		return result;
	}

	public int getN1() {
		return n1;
	}

	public void setN1(int n1) {
		this.n1 = n1;
	}

	public int getN2() {
		return n2;
	}

	public void setN2(int n2) {
		this.n2 = n2;
	}

	public String getOp() {
		return op;
	}

	public void setOp(String op) {
		this.op = op;
	}
	
	
}

이 클래스가 자바빈이 되어서 객체를 가져올 수 있게 해준다.
(복습 - 자바빈: JSP에서 객체를 가져오기 위한 기법)

calc.jsp

calc 구현

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%--id: calc라는 객체를 calc라는 이름으로 쓰겠다! class: 그 객체가 어디 클래스에 있는지 알려줌 --%>
<%-- Calculator calc = new Calculator(); 랑 거의 비슷한 거임... ㅠㅠ 싀발 어려워 --%>    
<jsp:useBean id="calc" class="ch07.Calculator"/>
<%-- calc.setN1(request.getParameter("n1")); --%>
<%-- calc.setN2(request.getParameter("n2")); --%>
<%-- calc.setOp(request.getParameter("op")); --%>
<jsp:setProperty name="calc" property="*" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	결과: <%=calc.calc() %>
</body>
</html>

useBean!!! 자바빈 객체를 생성하거나 참조하기 위한 액션!!! 이라고 배웠다. 기억이 안 나거나 응용하기 어렵겠지만... 그렇습니다...

<jsp:useBean id="calc" class="ch07.Calculator"/>

이 부분을 뜯어봅시다. id는 자바빈을 scope에 저장하거나 가져올 때 사용하는 이름이다. 우리는 calc라는 객체를 "calc" 라는 이름으로 쓰겠다는 의미!
class는 그 객체가 어떤 클래스에 있는지 알려준다. ch07 패키지안의 Calculator라는 클래스에 있다고 알려주네요? (자바빈 - 자바로 작성된 컴포넌트)

따라서 이 부분은 Calculator calc = new Calcultor(); 와 같은 의미인 것!!! 자바빈이 jsp에서 객체를 가져오기 위한 기법이라고 말을 했죠? Calculator의 객체를 가져오기 위해서 useBean 액션 태그를 이용해 만들어준 것임...!!! 후 먼지 알겠습니까?... (스스로에게 하는 말)

<jsp:setProperty name="calc" property="*" />

setProperty... 놀랍게도 이것도 배웠었다 그죠? 자바빈즈의 속성에 값을 할당해주는 액션태그라고 배웠습니다... 왜 맨날 처음보는 것 같지?

자바빈즈 객체는 위에서 만들어줬습니다. name에는 빈 이름을 써주면 됩니다. 아까 만들어둔 이름인 calc를 넣어줍니다. property에는 필드명을 입력해주면 되는데, 여기에 *를 사용하면 프로퍼티와 동일한 이름의 파라미터를 이용해서 setter 메소드를 생성한 모든 프로퍼티(필드)에 대해 값을 설정한다는 의미입니다.
즉 자바빈의 필드 n1, n2, op에 모두 값을 할당해주겠다는 의미!
calc.setN1(request.getParameter("n1")); calc.setN2(request.getParameter("n2")); calc.setOp(request.getParameter("op"));
이것과 같은 의미!

바디태그 안을 보면 결과: <%=calc.calc() %> 결과를 이렇게 출력해주겠다는... 표현태그를 사용해서 결과를 출력해준다. 자바빈 calc에서 calc()메소드를 호출해서 결과를 그대로 화면에 출력해준다.