1. 스프링 타일즈(Tiles)
1) 페이징 모듈화(집중화) ?
- 페이지마다 공통적인 영역(부분)을 모듈화해서 공통적으로 참조할 수 있도록 하는 방법
2) JSP 프로젝트 - @include 지시자, <jsp:include> 액션 태그 사용
layout 폴더
ㄴ TOP
ㄴ BOTTOM
ㄴ ASIDE
3) 스프링에서 페이지 모듈화할 수 있는 방법 = 스프링 타일즈(Spring Tiles)
2. 스프링 타일즈(Tiles) 사용을 위한 다운로드 및 설정
1) http://tiles.apache.org 접속 후
Tiles 2.2.2 (GA) 클릭 -> Tiles 2.2.2 (zip) tiles-2.2.2-bin.zip 클릭 -> Downloads archive.apache.org/dist/tiles/ 클릭 -> v2.2.2/ 클릭 -> tiles-2.2.2-bin.zip 다운로드
2) 압축 받은 폴더를 푼 뒤에 경로에 맞는 위치를 찾아가서 해당 jar 파일을 lib 폴더에 추가하자
3. 스프링 타일즈(Tiles)를 사용하기 위한 작업
1) 폴더와 jsp 페이지 생성
2) 페이지 모듈화(집중화) 작업
notice.jsp 선택 후 각 영역을 잘라내기 하여 header.jsp, footer.jsp, aside.jsp, navi.jsp 붙여넣기
notice.jsp, noticeReg.jsp, noticeEdit.jsp, noticeDetail.jsp -> content만 남기고 삭제
join.jsp 선택 후 각 영역을 잘라내기 하여 aside.jps, navi.jsp, layout.jsp 붙여넣기
join.jsp, login.jsp도 content만 남기고 삭제
4. 스프링 타일즈(Tiles) 사용하기(예제)
1) https://tiles.apache.org/2.2/framework/index.html 접속하여
tutorial -> Basic Usage -> creating pages 메뉴를 확인해보면 아래와 같은 설명이 나와있다.
/WEB-INF/tiles-defs.xml 파일을 생성 후 아래 코드 복사 붙여넣기 후
<definition> 태그로 준 SAMPLE 코드는 주석처리
인코딩은 UTF-8을 사용하기 때문에 맨 위의 코드는 <?xml version="1.0" encoding="UTF-8"?> 수정
2) 스프링 타일즈를 이용하면 바로 jsp 페이지를 응답할 것이 아니기 때문에 코딩을 수정해야한다.
예시를 들자면 공지사항 목록을 뿌리는 스프링 타일즈의 ViewResolver를 사용해서 원하는 부분에 타일을 붙이고 보여주어야 한다. (return "notice.jsp"를 return "customer.notice"로 수정)
여기서 customer.notice는 View Name 이다.
추가로 return 해주는 View Name은 개발자가 아무 이름이나 정의해줘도 상관없다.(tiles-defs.xml 파일에서 정의를 해주기 때문에)리다이렉트 하는 return은 변경하지 않고 jsp를 뿌려주는 포워딩 방식만 수정한다.
왜 jsp 페이지를 바로 응답하지 않는가?
index.jsp / notice.jsp / join.jsp 모두 content(내용)만 있고 헤더나 푸터, 네비와 같은 영역들이 없는 상태이므로 바로 실행시켜서 웹 페이지를 보여주더라도 뼈대 밖에 보이지 않는 상황이다.
[CustomerController 클래스의 return 값을 View Name으로 수정]
3) 이제 본격적으로 스프링 타일즈를 사용하기 위해 설정을 해보자
dispatcher-servlet.xml에서 스프링 타일즈를 사용하겠다는 설정
ㄱ. 스프링 타일즈를 사용하기 위해 필요한 빈 객체 등록
ㄴ. ViewResolver 등록(명시적으로 ViewResolver 등록)
4) tiles-defs.xml에서 customer.notice 요청에 대한 스프링 타일즈에 대한 정의가 필요하므로 설정을 해준다.
<definition> 태그에서 name 속성에는 return 해주는 View Name을, template 속성에는 layout.jsp가 있는 경로를 설정해준다.
<definition> 태그 안에서 <put-attribute> 태그로 레이아웃을 채울 영역들을 지정해주는데
name 속성에는 layout.jsp에서 태그라이브러리로 추가할 때 사용할 이름을 지정해주고
value 속성에는 해당 영역의 jsp 페이지가 있는 경로를 설정해준다.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
<definition name="customer.notice" template="/customer/inc/layout.jsp">
<put-attribute name="header" value="/inc/header.jsp" />
<put-attribute name="footer" value="/inc/footer.jsp" />
<put-attribute name="visual" value="/customer/inc/visual.jsp" />
<put-attribute name="aside" value="/customer/inc/aside.jsp" />
<put-attribute name="content" value="/customer/notice.jsp" />
</definition>
<definition name="customer.noticeDetail" template="/customer/inc/layout.jsp">
<put-attribute name="header" value="/inc/header.jsp" />
<put-attribute name="footer" value="/inc/footer.jsp" />
<put-attribute name="visual" value="/customer/inc/visual.jsp" />
<put-attribute name="aside" value="/customer/inc/aside.jsp" />
<put-attribute name="content" value="/customer/noticeDetail.jsp" />
</definition>
<definition name="customer.noticeEdit" template="/customer/inc/layout.jsp">
<put-attribute name="header" value="/inc/header.jsp" />
<put-attribute name="footer" value="/inc/footer.jsp" />
<put-attribute name="visual" value="/customer/inc/visual.jsp" />
<put-attribute name="aside" value="/customer/inc/aside.jsp" />
<put-attribute name="content" value="/customer/noticeEdit.jsp" />
</definition>
<definition name="customer.noticeReg" template="/customer/inc/layout.jsp">
<put-attribute name="header" value="/inc/header.jsp" />
<put-attribute name="footer" value="/inc/footer.jsp" />
<put-attribute name="visual" value="/customer/inc/visual.jsp" />
<put-attribute name="aside" value="/customer/inc/aside.jsp" />
<put-attribute name="content" value="/customer/noticeReg.jsp" />
</definition>
</tiles-definitions>
5) layout.jsp에서 스프링 타일즈를 사용하기 위해 태그라이브러리를 추가한 뒤 JSTL로 스프링 타일즈를 insert 해준다.
[/customer/inc/layout.jsp]
각 영역에 <tiles:insertAttribute> 태그에서 name 속성에는 tiles-defs.xml 파일에서 정의했던 name을 입력해준다.
4-2) tiles-defs.xml에서 간편하게 설정하는 법
공통적인 부분이 있으면 *를 설정한 뒤 *의 순서대로 value에 {n}으로 설정해주면 정의해주는 태그의 양이 줄어든다.
위 4)에서 정의한 코드를 * 사용하면 아래와 같이 수정이 된다.
위의 코드도 살펴보면 customer와 joinus의 차이일 뿐 뒤의 경로는 같다.
이 부분도 *로 바꾼 뒤 정의해주면 아래와 같이 수정이 된다.
위와 같이 페이지 모듈화와 스프링 타일즈 설정을 다 한 뒤에 실행을 시켜보면 스프링 타일즈가 잘 적용되어져 응답 되어지는 것을 확인할 수 있다.
5. jsp 페이지를 바로 요청/응답하지 못하도록 처리(404 에러)
Point! WEBINF 폴더는 외부에서 접근할 수 없다.따라서 WEB-INF 폴더 안에 views 폴더를 생성하여 모든 jsp 파일을 옮기자
그 후에 스프링 타일즈 설정 파일인 tiles-defs.xml에서도 경로를 수정해주어야 한다.
6. 첫 번째 문제점 해결하기 : 로그인 클릭 후 고객센터를 누르면 404 에러 발생
notice.htm으로 실행시킨 후 로그인 버튼 클릭
고객센터 클릭을 하면 404 에러가 뜬다.
원인은 header의 고객센터로 가는 a 링크 태그의 href 속성에 notice.htm만 설정해 주었기 때문에 joinus/notice.htm에 요청에 해당하는 컨트롤러 메서드가 없어 발생하는 것이다.
근본적으로 문제를 해결하기 위해서는 contextPath/절대경로로 수정을 해주어야 한다.
고객센터로 가는 href만 수정하지말고 전체적으로 contextPath를 붙여주자!
WEB-INF/views 폴더에서 header.jsp를 열어서 수정해주자
herader.jsp 뿐만 아니라 footer.jsp와 customer/inc/aside.jsp와 joinus/inc/aside.jsp도 contextPath를 붙여서 수정해 주었다.
다시 실행을 시켜서 로그인, 고객센터, Home 어떤 버튼을 누르더라도 잘 응답되어지는 것을 확인할 수 있다.
7. 두 번째 문제점 해결하기 : 로그인 페이지의 CSS 깨짐
다른 페이지는 CSS가 잘 적용되어지는데 로그인 페이지만 CSS가 깨지는 현상을 발견하였다.
원인은 로그인 페이지 원래는 login.css가 적용되어져야 하는데 적용되는 header의 css가 join.css로 적용되어져 있기 때문이다.
이 문제를 해결하기 위해서 tiles-defs.xml에서 css를 해당 페이지의 css를 적용할 수 있도록
<put-attribute name="css" value="{2}.css" />
태그를 추가하고 layout.jsp에 css 적용하는 href 속성에 <tiles:getAsString name="css" /> 태그로 수정해주었다.
[tiles-defs.xml]
title도 설정해주는 태그도 추가하여 해당 페이지에 title도 value로 설정한 값이 나오도록 설정해주었다.
[inc와 joinus/inc의 layout.jsp]
customer의 layout.jsp는 수정하지 않아도 된다!
