플레이데이터 - 34일차 Spring Framework 학습(6)

Kim Hyen Su·2023년 8월 18일
post-thumbnail

🌟Spring Framework

스프링 제공 기능

  • 객체 관리(IOC)
  • 👉 MVC(DI) - 느슨한 결합력과 인터페이스
  • 트랜잭션 처리(AOP)
  • 인증과 권한(Servlet Filter)

🌟페이지 공통분모 모듈화

  • 페이지에 header/footer 영역은 중복되어 코드가 작성된다.
  • 공통 부분을 분리하여 공통 부분을 참조하도록 작성한다.
  • 이처럼 분리해주면, 수정 시 한번에 여러 페이지의 내용을 수정할 수 있어 유지 보수에 용이하다.
  • 이전에는 index.jsp의 헤더와 푸터를 잘라서 액션태그를 이용하여 include로 참조하도록 코드를 작성하였다.
    • ※문제점
      • 공통부분을 참조하기 위해 여러 페이지마다 include 태그를 중복되어 작성해줘야 한다.

  • 이처럼 공통된 코드인 header/footer/aside과 main을 제외한 뼈대만 남아있는 jsp 페이지를 layout 이라고 한다.

Tiles Library

  • 모듈화된 공통 영역들을 다시 합치기 위해서 tiles 라이브러리를 사용한다.

  • Spring에서 Tiles로 요청 페이지를 반환해주기 위해서 우선순위가 지정해줘야 한다.
    - 요청 → Tiles → 없는경우, view(jsp) → 없는 경우, 에러발생.

tiles 사용법

  1. Tile 지정을 위한 지시서(tiles.xml)를 작성한다.
    • 사용될 jsp 페이지를 tile로 등록.(name : tile명, value : jsp 파일 위치)

  1. layout 페이지 내부에 각 tile 위치 지정하여 tiles 페이지를 생성한다.
    • tiles에서 제공하는 taglib을 사용함.
      - mvn repository → [tiles jsp support 3.0.8V] → dependency 추가
    • <tiles:insertAttribute name="tiles.xml에 지정한 name값" /> 추가하여 tile 위치 지정.

업로드중..

  1. 요청에 따라 Tiles 페이지를 응답하기 위해 ViewResolver로 설정해줘야 한다.
  • Tiles를 이용하기 위한 ViewResolver 설정 추가.
  • ViewResolver 설정에서 Tiles가 적용된 페이지가 우선적으로 출력될 수 있도록 우선순위 설정 추가.
[dispatcher-servlet.xml]

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        https://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        https://www.springframework.org/schema/mvc/spring-mvc.xsd">
        
	<bean id="/index" class="webProject.controller.IndexController"/>
	<bean id="/notice/list" class="webProject.controller.notice.ListController"/>
	<bean id="/notice/detail" class="webProject.controller.notice.DetailController"/>
	
    <!-- Tiles 전용 ViewResolver 빈으로 등록.-->
    <!-- property로 order를 설정해주어 요청 시 매핑되는 view로 tiles가 출력되도록 설정-->
	<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView"/>
		<property name="order" value="1"/>
	</bean>
	
	<bean class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions" value="/WEB-INF/tiles.xml"/>
	</bean>
	
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/"/>
		<property name="suffix" value=".jsp"/>
		<property name="order" value="2"/>
	</bean>
	
	<mvc:resources location="/static/" mapping="/**"></mvc:resources>
</beans>

Tiles 설정에 와일드카드 이용하기

  • tiles.xml 파일 내 tile 조립 시, 한 페이지마다 설정을 추가해줘야 한다.
  • 와일드 카드를 사용하게 되면 tiles.xml 파일 내 중복되는 설정 코드를 줄여줄 수 있다.

<와일드 카드 사용전>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
  <definition name="notice.list" template="/WEB-INF/views/customer/inc/layout.jsp">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="/WEB-INF/views/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/views/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/views/customer/inc/aside.jsp" />
    <put-attribute name="body" value="/WEB-INF/views/customer/notice/list.jsp" />
    <put-attribute name="footer" value="/WEB-INF/views/inc/footer.jsp" />
  </definition>
  <definition name="notice.detail" template="/WEB-INF/views/customer/inc/layout.jsp">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="/WEB-INF/views/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/views/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/views/customer/inc/aside.jsp" />
    <put-attribute name="body" value="/WEB-INF/views/customer/notice/detail.jsp" />
    <put-attribute name="footer" value="/WEB-INF/views/inc/footer.jsp" />
  </definition>
</tiles-definitions>

<와일드 카드 사용후>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
  <definition name="notice.*" template="/WEB-INF/views/customer/inc/layout.jsp">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="/WEB-INF/views/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/views/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/views/customer/inc/aside.jsp" />
    <put-attribute name="body" value="/WEB-INF/views/customer/notice/{1}.jsp" />
    <put-attribute name="footer" value="/WEB-INF/views/inc/footer.jsp" />
  </definition>
</tiles-definitions>

Root 페이지(index.jsp)를 위한 Layout 페이지 만들기

  • root에 위치한 index.jsp 페이지에 tiles를 적용하기.

1. Root 페이지 전용 layout의 tile 설정 추가

  <!-- root 전용 layout -->
  <definition name="root.*" template="/WEB-INF/views/inc/layout.jsp">
    <put-attribute name="title" value="공지사항" />
    <put-attribute name="header" value="/WEB-INF/views/inc/header.jsp" />
    <put-attribute name="body" value="/WEB-INF/views/{1}.jsp" />
    <put-attribute name="footer" value="/WEB-INF/views/inc/footer.jsp" />
  </definition>
  • tiles 명에 * 만 사용할 경우 모든 요청이 해당 layout이 적용된 tiles 파일이 호출되기 때문에 root.* 이라는 name으로 설정해준다.

2. layout.jsp 파일 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html>
<html>

<head>
    <title>코딩 전문가를 만들기 위한 온라인 강의 시스템</title>
    <meta charset="UTF-8">
    <title>공지사항목록</title>

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

<body>
    <!-- header 부분 -->
	<tiles:insertAttribute name="header" />
	
    <!-- --------------------------- <body> --------------------------------------- -->
	<tiles:insertAttribute name="body" />
	
    <!-- ------------------- <footer> --------------------------------------- -->
	<tiles:insertAttribute name="footer" />

</body>

</html>

3. IndexController 파일에 view 경로를 root.xml로 설정

public class IndexController implements Controller {

	@Override
	public ModelAndView handleRequest(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		ModelAndView mv = new ModelAndView("root.index");
		return mv;
	}
}
profile
백엔드 서버 엔지니어

0개의 댓글