JSP

[JSP] MVC 모델이란?

예요 2021. 5. 25. 09:38

무작정 만들게 된 JSP 페이지를 보면 java, html 코드가 뒤섞여있다.

 

아래 코드는 Youtube NewLecture 선생님의 웹페이지 중 공지사항의 목록을 출력하는 list.jsp 코드이다.

 

* 보기 편하게 header, footer 부분은 생략하였습니다.

<%@page import="java.sql.ResultSet"%>

<%@page import="java.sql.Statement"%>

<%@page import="java.sql.DriverManager"%>

<%@page import="java.sql.Connection"%>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

    

<%

String url = "jdbc:mysql://localhost:3306/study";

String sql = "SELECT * FROM NOTICE";

 

Class.forName("com.mysql.cj.jdbc.Driver");

Connection con = DriverManager.getConnection(url, "jspexam", "jsppasswd");

Statement st = con.createStatement();

ResultSet rs = st.executeQuery(sql);

%>

 

<!DOCTYPE html>

<html>

 

<head>

    <title>코딩 전문가를 만들기 위한 온라인 강의 시스템</title>

    <meta charset="UTF-8">

    <title>공지사항목록</title>

    

    <link href="/css/customer/layout.css" type="text/css" rel="stylesheet" />

    <style>

    

        #visual .content-container{

            height:inherit;

            display:flex; 

            align-items: center;

            

            background: url("../../images/customer/visual.png") no-repeat center;

        }

    </style>

</head>

 

<body>

 

<main class="main">

<h2 class="main title">공지사항</h2>

 

<div class="breadcrumb">

<h3 class="hidden">경로</h3>

<ul>

<li>home</li>

<li>고객센터</li>

<li>공지사항</li>

</ul>

</div>

 

<div class="search-form margin-top first align-right">

<h3 class="hidden">공지사항 검색폼</h3>

<form class="table-form">

<fieldset>

<legend class="hidden">공지사항 검색 필드</legend>

<label class="hidden">검색분류</label>

<select name="f">

<option  value="title">제목</option>

<option  value="writerId">작성자</option>

</select> 

<label class="hidden">검색어</label>

<input type="text" name="q" value=""/>

<input class="btn btn-search" type="submit" value="검색" />

</fieldset>

</form>

</div>

 

<div class="notice margin-top">

<h3 class="hidden">공지사항 목록</h3>

<table class="table">

<thead>

<tr>

<th class="w60">번호</th>

<th class="expand">제목</th>

<th class="w100">작성자</th>

<th class="w100">작성일</th>

<th class="w60">조회수</th>

</tr>

</thead>

<tbody>

 

<%

while(rs.next()) {

%>

 

<tr>

<td><%= rs.getInt("ID") %></td>

<td class="title indent text-align-left"><a href="detail.jsp?id=<%= rs.getInt("ID") %>"><%= rs.getString("TITLE") %></a></td>

<td><%= rs.getString("WRITER_ID") %></td>

<td>

<%= rs.getDate("REGDATE") %>

</td>

<td><%= rs.getInt("HIT") %></td>

</tr> 

 

<%

}

%>

 

</tbody>

</table>

</div>

 

<div class="indexer margin-top align-right">

<h3 class="hidden">현재 페이지</h3>

<div><span class="text-orange text-strong">1</span> / 1 pages</div>

</div>

 

<div class="margin-top align-center pager">

 

<div>

 

 

<span class="btn btn-prev" onclick="alert('이전 페이지가 없습니다.');">이전</span>

 

</div>

<ul class="-list- center">

<li><a class="-text- orange bold" href="?p=1&t=&q=" >1</a></li>

 

</ul>

<div>

 

 

<span class="btn btn-next" onclick="alert('다음 페이지가 없습니다.');">다음</span>

 

</div>

 

</div>

</main>

 

</div>

</div>

    </body>

    

    </html>

    

<%

    rs.close();

    st.close();

    con.close();

%>

 

코드블럭으로 둘러싸여 있는 파란색 코드는 java 코드에 해당이 되고,

나머지는 html 코드가 된다.

 

그런데 군데군데 코드블럭이 있는 걸 보니 좀 지저분한 느낌이 든다...

 

좀 깔끔하게 두 코드를 분리시키는 방법이 없나?

해서 나오게 된 것이 MVC 모델이다!

 

코드블럭으로 둘러쌓인 java 코드는 위쪽으로 몰아 넣고 html 코드는 아래 쪽에 몰아 넣어서

java 코드에서 실행하는 부분은 Controller 가 되고

Controller 가 결과적으로 돌려주는 Model 이 있고

이 Model 을 이용하여 View 를 보여주게 되는 것이다!

 

이 MVC 모델을 두가지로 또 나눌 수가 있는데

단순하게 하나의 jsp 파일 내에서 영역만 나누는 MVC Model 1 기법,

물리적으로 파일을 나누는 MVC Model 2 기법이 있다.

 

이것은 다음 글에서 호스팅하도록 하겠습니다:)

728x90