이전에 있는 Front Controller 글을 읽고 오시는 것을 추천드립니다!
https://pabeba.tistory.com/164
이런 식으로 웹페이지를 생성한다고 생각했을 때 모든 페이지에 JSTL을 이용하여
<c:import> Header, Footer, Left Navigation을 해야 한다고 생각하니 너무나도 두렵지 않습니까?
페이지가 20개면 20번을 3번씩 import 해와야합니다.
60번의 막일을 해야 하는데, 다 고쳐놨더니 제목을 바꾸거나 파일이 저장된 디렉터리를 변경하게 된다면 또! 또! 또! 고쳐야 합니다.
그래서 선조들은 이러한 귀찮음을 해결하기 위해 Layout을 제작하게 됩니다.
Spring에서는 Thymeleaf?를 이용한다고 합니다. (아직 사용 전입니다.)
아무튼 Content의 내용만 변경되게 만들어 볼까요?
이번에 제가 만들 것은 header 고정에 , Content 변화를 주어서 제작해 보겠습니다.
예시 (Layout 제작)
Header 고정, Content 변경 jsp 제작
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layout</title>
<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>
<link rel="stylesheet" href="css/myhome.css">
</head>
<body>
<div class="container-fluid pt-3">
<%-- header 영역 --%>
<div class="row header">
<div class="col-sm-8 offset-sm-2" align="right">
<c:import url="header.jsp"></c:import>
</div>
</div>
<%-- main 영역 --%>
<div class="row">
<div class="col-sm-8 offset-sm-2">
<!-- 메인영역을 동적으로 import 해옴 ( ex : list.jsp , post-detail.jsp ... -->
<c:import url="${requestScope.url}"></c:import>
</div>
</div>
</div>
</body>
</html>위에는 w3s의 bootstrap 4 Grid를 이용한 것입니다. 링크드릴게요~
https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
<c:import url="header.jsp"></c:import>이 문장을 이용해서 header를 작성한 jsp 파일을 import 해옵니다.
header.jsp 파일을 봐볼까요?
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:choose>
<c:when test="${sessionScope.mvo==null}">
<form action="${pageContext.request.contextPath}/Login.do" method="post">
<input type="text" name="id" placeholder="아이디" required="required" size="12">
<input type="password" name="password" placeholder="패스워드" required="required" size="12">
<button type="submit">로그인</button>
</form>
</c:when>
<c:otherwise>
<a href="${pageContext.request.contextPath}/FindPostList.do">홈</a>
<!-- <a href="WritePostFormController.do">글쓰기</a> -->
<a href="${pageContext.request.contextPath}/WritePostForm.do">글쓰기</a>
${sessionScope.mvo.name}님
<a href="javascript:logout()">로그아웃</a>
<form method="post" action="${pageContext.request.contextPath}/Logout.do" id="logoutForm"></form>
<script>
function logout() {
if(confirm("로그아웃 하시겠습니까?")){
document.getElementById("logoutForm").submit();
}
}
</script>
</c:otherwise>
</c:choose>솔직히 내용이 중요하지는 않고 중요한 것은 body, head 태그를 사용하지 않았다는 것이 중요합니다.
import 해오는 파일에 이미 작성되어 있기 때문에 필요하지 않습니다.
그리고 다음으로
<c:import url="${requestScope.url}"></c:import>request에 url을 setAttribute 하여 보내주는 jsp 파일을 import 해옵니다.
이 문장을 보고는 어떻게 가져오는지 당연히 모를 수 있습니다.
java Class 파일을 확인해 볼까요?
가볍게 글의 목록을 보는 페이지를 가져와보겠습니다.
FindPostListController
public class FindPostListController implements Controller {
@Override
public String handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setAttribute("list", BoardDAO.getInstance().findPostList());
request.setAttribute("url", "board/list.jsp");
return "layout.jsp";
}
}1. 게시물 list를 요청에 저장합니다.
2. url 도 저장합니다. (board 디렉터리에 있는 list.jsp)
3. 응답받을 페이지 layout.jsp 에 연결합니다.
그러면 layout.jsp로 forward 요청이 가게 되고
요청에 저장된 url을 JSTL로 import 해오면 Content 부분에 list가 나오게 됩니다.
서버를 시작하면 다음과 같이 잘 나오게 됩니다!
소감
개발자가 되기 위해서 가져야 할 소양은 반복에 대한 귀찮음을 가져야 한다고 생각합니다.
하지만 일상생활에서는 반복적인 루틴을 가져가면서 인생을 업사이드 해야 한다고 생각합니다. 처음에는 당연히 어렵겠지만 반복적인 루틴을 통해 꾸준히 어떠한 업무를 해나간다면 언젠가는 멋진 인간이 되지 않을까 생각합니다.
저의 동료가 매일 저녁 늦게까지 공부를 하는 모습을 보고 이러한 생각을 하게 되었습니다.
'코딩 개발 > Java' 카테고리의 다른 글
| 게시판 만들기 1 (게시글 리스트 보기, 로그인, 로그아웃) (0) | 2023.06.26 |
|---|---|
| Pagination (페이지 매기기) (0) | 2023.06.21 |
| 게시판 만들기 (프로젝트 맛보기) (6) | 2023.06.17 |
| JSP EL - 디렉토리 변경 시 path 관리 (0) | 2023.06.13 |
| Java - DBCP (Database Connection Pool) (0) | 2023.06.12 |
