[spring] 화면 처리 - 1

화면에는 JSP와 JavaScript(jQuery), CSS, HTML을 이용해서 작성한다.

예제 파일을 다운로드 받는다. 부트스트랩 홈페이지나 구멍가게코딩단에서 다운로드 받을 수 있다. 책에서 나와있는 것처럼 버전 문제 때문에 부트스트랩 홈페이지보다 카페에서 받는 것이 좋을 것 같다.

---

목록 페이지 작업과 includes

<!-- servlet-context.xml 중 -->
<beans:bean class="org.springframework.web.servlet.view.
    InternalResourceViewResolver">
    <beans:property name="prefix" value="/WEB-INF/views/" />
    <beans:property name="suffix" value=".jsp" />
</beans:bean>

스프링 MVC 설정에서 화면 설정은 ViewResolver라는 객체를 통해서 이루어진다. 위의 설정을 보면 /WEB-INF/views 폴더를 이용하는 걸 확인할 수 있다.

• list.jsp 파일 추가
  
• 실행 확인
  
• Tomcat 설정
  

절대 경로(/) 지정 후 Tomcat 재시작하고 다시 /board/list가 정상적으로 호출되는지 확인한다.

---

SB Admin2 페이지 적용하기

SB Admin2 압축 풀고 pages 내 tables.html의 내용을 list.jsp에 복붙한다. vs 코드가 깔려있다면 tables.html을 vs 코드로 열면 쉽게 복사할 수 있다.

붙여넣기 할 때 원래 list.jsp에 있던 상단 부분은 지우면 안된다.

<!-- 삭제 금지 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

붙여넣기 후에 서버를 다시 실행하거나, 브라우저에서 f5를 누르면 다음과 같이 텍스트들이 출력된다. CSS 등이 완전히 깨진 상태이므로 글자만 줄줄 출력된다.

브라우저에서 f12를 누르면 개발자 도구가 켜진다. 개발자 도구를 켜고 Network 탭을 누른 후 새로고침하면 잘못된 URL의 정보들을 확인할 수 있다.

SB Admin2의 압축을 풀어둔 모든 폴더를 프로젝트 내 webapp 밑 resources 폴더로 복사한다. 그냥 윈도우에서 폴더를 열어놓고 이클립스로 드래그하면 복사가 된다.

이제 list.jsp 파일에서 CSS나 JS 파일의 경로를 /resources로 시작하도록 수정한다. list.jsp에서 컨트롤+f를 누르면 밑의 창이 뜬다.

find에는 ‘../’, Replace with에는 ‘/resources/’를 적고 Replace All을 클릭한다.

저장 후 다시 브라우저에서 f5를 누르거나 서버를 재실행하면 CSS 등이 적용된 걸 확인할 수 있다.

---

includes 적용

JSP의 include 지시자를 활용해서 페이지 제작 시에 필요한 내용만을 작성할 수 있게 사전에 작업해야한다.

• header.jsp와 footer.jsp 생성
  

• header.jsp 적용
  

SB Admin2는 <div> 들 중에서 id 속성값이 ‘page-wrapper’ 부터가 핵심적인 페이지의 내용이므로 list.jsp 파일의 처음 부분에서 <div id='page-wrapper'> 라인까지 잘라서 header.jsp의 내용으로 처리한다.

list.jsp에서 컨트롤+f로 page-wrapper를 찾고, 거기서부터 위의 상단 <%%> 태그 밑까지 잘라 header.jsp에 붙여넣는다.
그리고 상단에 아래의 include 지시자를 작성한다.

<!-- list.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

	<%@include file="../includes/header.jsp" %>
	
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->

작성 후 화면이 깨지는지 확인한다.

• footer.jsp
  

핵심적인 div인 page-wrapper가 끝나는 태그부터 마지막까지는 footer.jsp의 내용으로 작성하고 list.jsp에 include 지시자를 작성하면 된다.

page-wrapper가 끝나는 태그는 아래처럼 주석처리 되어있다.

</div>
<!-- /#page-wrapper -->

---

jQuery 라이브러리 변경

jQuery를 header.jsp에 선언해 두면 작성하는 JSP에서 자유롭게 사용할 수 있으므로 수정해야 한다.

footer.jsp의 상단에 있는 jqeury.min.js 파일의 <script> 태그를 제거한다.

<!-- jQuery -->
<script src="/resources/vendor/jquery/jquery.min.js"></script>

jQuery는 인터넷을 통해 다운로드 받을 수 있게 검색해서 header.jsp 내에 추가해야한다.

사이트

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

• 반응형 웹 처리
  SB Admin2는 반응형으로 설계되어 있지만 jQuery의 최신 버전을 사용한 상태에서는 모바일 크기에서 ‘새로고침’ 시 메뉴가 펼쳐지는 문제가 발생한다.
  이 문제를 해결하기 위해 footer.jsp에 코드를 추가한다.
  

<!-- footer.jsp -->

<script>
$(document).ready(function() {
    $('#dataTables-example').DataTable({
        responsive: true
    });
    $(".sidebar-nav")
        .attr("class", "sidebar-nav navbar-collapse collapse")
        .attr("aria-expanded", 'false')
        .attr("style", "height:1px");
});
</script>

---

목록 화면 처리

• list.jsp 수정
  

최소한의 태그만 사용하기 위해 아래와 같이 코드를 삭제, 수정한다.
또, 상단에 JSTL 태그를 적용하기 위해 태그 라이브러리를 추가한다.

<!-- list.jsp -->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

	<%@include file="../includes/header.jsp" %>
	
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Board List Page</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <!-- end panel-body -->
                    </div>
                    <!-- end panel -->
                </div>
            </div>
            <!-- /.row -->
<%@ include file="../includes/footer.jsp" %>

위와 같이 수정 후 제대로 출력되는지 확인한다.

Model에 담긴 데이터 출력

BoardController에서 Model로 게시물의 목록을 list라는 이름으로 담아서 전달했으므로 list.jsp에서는 JSTL을 이용해서 처리한다.

<!-- list.jsp -->

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>#번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
            <th>수정일</th>
        </tr>
    </thead>
    <c:forEach items="${list}" var="board">
            <tr>
            <th><c:out value="${board.bno}" /></th>
            <th><c:out value="${board.title}" /></th>
            <th><c:out value="${board.writer}" /></th>
            <th><fmt:formatDate pattern="yyyy-MM-dd" 
            value="${board.regdate}" /></th>
            <th><fmt:formatDate pattern="yyyy-MM-dd" 
            value="${board.updateDate}" /></th>
        </tr>
    </c:forEach>
</table>

브라우저를 통해 결과를 확인한다.

---

• 참고 : 코드로 배우는 스프링 웹 프로젝트