[SpringBoot] 경매사이트 만들기 - Apache Tiles 적용

• 전체적인 화면 레이아웃 
  화면 구성은 header, body, footer 부분으로 나눌 생각이기 때문에 ApachTiles를 적용시켰다.
  header와 footer는 모든 jsp 페이지에서 공통적으로 들어가는 부분이 구현될꺼고,
  body 부분은 각 페이지마다 다르게 구현될 예정이다. 결론적으로 간단하게 정리하면 아래와 같다.
  
  정리
  Header : 각종 메뉴, 사이트 로고, 로그인 및 회원가입, 검색을 구현할 예정.
  Body: 각 화면에 따라 다르게 구성해서 구현.
  footer: 문의 전화번호, 개인적인 프로필 등을 넣어줄 예정

 

타일즈 적용하기

1. 타일즈 적용을 위해 먼저 gradle에 의존성을 추가 시켜줘야한다.
https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp <-- 링크에 들어가서 원하는 버전의 의존성을 추가시켜준다. (Maven은 Maven태그에서 의존성 복사 후 pom.xml에 추가시켜주자~)

implementation group: 'org.apache.tiles', name: 'tiles-jsp', version: '3.0.5'
implementation 'javax.servlet:jstl'

복사한 코드(위의 코드)를 build.gradle 에 들어가서 dependencies 부분에 추가시켜주면 된다.

(Apache Tiles 사용시 JSTL은 필수라고 한다. 따라서 JSTL도 추가 시켜준다.)

 

 

2. Tiles 설정 클래스 만들기(Java)

package org.my.toyproject;
/*
 * @Configuration: 빈 설정을 담당하는 클래스가 된다.
 * 이 클래스 안에서 @Bean 어노테이션이 동봉된 메소드를 선언하면,
 * 그 메소드를 통해 스프링 빈을 정의하고 생명주기를 설정하게 된다.
 * 자바 기반의 config가 싫다면 XML 쓰면 된다.
 * (Boot에선 보통 어노테이션 기반으로 하게됨.)
 */
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.view.UrlBasedViewResolver;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;

@Configuration
public class TilesConfig {
	@Bean//소문자로 시작하는 메서드명이 bean id가 된다
	public UrlBasedViewResolver tilesViewResolver() {
		UrlBasedViewResolver tilesViewResolver = new UrlBasedViewResolver();
		tilesViewResolver.setViewClass(TilesView.class);
		return tilesViewResolver;
	}
	
	@Bean
	public TilesConfigurer tilesConfigurer() {
		TilesConfigurer tilesConfigurer = new TilesConfigurer();
		String[] defs = {"WEB-INF/tiles-config.xml"};
		tilesConfigurer.setDefinitions(defs);
		return tilesConfigurer;
	}
	
}

위와 같은 클래스를 만들어준다. 이때 클래스를 만들어주는 위치를 주의해야한다. 꼭 최상위 패키지에 만들기!!

그림을 보면 여기서 최상위 패키지는 org.my.toyproject 다.

springboot로 프로젝트를 하게 되면 기본적으로 패키지가 저렇게 계층구조를 이루지 않고 있다면 Tiles가 적용된 페이지를 찾을수없게된다.

예를들어 org.my.tttt 라는 패키지였다면 Whitelabel Error Page가 뜨게 되는걸 경험하게 될것이다. 그리니깐 주의하자!

 

 

 

 

3. 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="home.tiles" template="/WEB-INF/views/templates/layout.jsp">
		<put-attribute name="title" value="KDG_Web"/>
		<put-attribute name="header" value="/WEB-INF/views/templates/header.jsp"/>
		<put-attribute name="body" value="/WEB-INF/views/home.jsp"/>
		<put-attribute name="footer" value="/WEB-INF/views/templates/footer.jsp"/>
	</definition>
	
	<definition name="*.tiles" extends="home.tiles">
		<put-attribute name="title" value="{1}"/>
		<put-attribute name="body" value="/WEB-INF/views/{1}.jsp"/>
	</definition>
	<definition name="*/*.tiles" extends="home.tiles">
		<put-attribute name="title" value="{2}"/>
		<put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp"/>
	</definition>
	<definition name="*/*/*.tiles" extends="home.tiles">
		<put-attribute name="title" value="{3}"/>
		<put-attribute name="body" value="/WEB-INF/views/{1}/{2}/{3}.jsp"/>
	</definition>
</tiles-definitions>

이젠 xml을 통해 Tiles를 어떻게 구성할껀지 정의해주는 단계이다. 기본적으로 나는 controller에서 return값에 뷰를
jsp명.tiles로 줄꺼라서 뒤에 전부 tiles를 붙여줬는데 이건 본인이 맘대로 만들기 나름이다.
나는 기본적으로 home.tiles를 만들고 그후엔 tiles가 붙은 jsp명이 올때마다 해당 jsp에 맞게 body부분을 동적으로 변화 시킬수 있도록 했다. ( *->들어올 jsp이름, { } ->*로 들어온이름을 차례대로 매칭시켜줌)

 

여기서도 주의해야할게 있다.

    <!DOCTYPE tiles-definitions PUBLIC 
        "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" 
        "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">

이부분을 꼭써줘야한다. 그래야 tiles를 정의할수 있다. 그리고 코드를 보면 3.0 과 3_0 이 있는데 이건 tiles 버전을 나타낸다. 나는 3.0.5 버전을 썼기때문에 3.0 , 3_0 이 맞는데 만약, 2.0 , 2_1 로 하면 버전이 맞지 않기 때문에 에러가 난다.

 

 

4. SpringBoot - ViewResolver 설정

Boot는 실행이 되면 디폴트로 resources - templates 라는 폴더에 있는 index.html을 찾게 돼고 해당 폴더에 html이 없으면 마찬가지로 에러가 뜬다. 이부분을 내가 원하는 View로 바꿔주기 위해선 application.properties 에서 ViewResolver를 아래처럼 설정해주면된다.

#view resolver
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

application.properties: SpringBoot가 실행될때 자동으로 로딩되는 규약들을 정의하는 파일.

spring.mvc.view.prefix: jsp 페이지 처리를 위해 경로 앞부분을 설정

spring.mvc.view.suffix: jsp 페이지 처리를 위해 경로 뒷부분을 설정.

 

 

5. jsp만들기

이제 제일처음에 말했던대로 jsp를 만들어주는데 xml 파일에서 설정했던 경로로 만들어준다.

왼쪽처럼 jsp파일을 해당 경로에 만들어줬다.

 

 

 

 

 

 

 

 

 

6. 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>
<meta charset="UTF-8">
	<title><tiles:insertAttribute name="title" ignore="true" /></title>
</head>
<body>
	<div id="header">
		<tiles:insertAttribute name="header" />
	</div>
	<div id="body">
		<tiles:insertAttribute name="body" />
	</div>
	<div id="footer">
		<tiles:insertAttribute name="footer" />
	</div>
</body>
</html>

정확히 이해한건지는 확실하지 않지만 헤더,바디,풋터 부분에 jsp를 할당해 주기위해 xml에서 설정한 디폴트값인 layout.jsp를 통해 각 jsp로 페이지를 할당해준다.

 

 

7. Controller 만들기.

앞서 tiles의 설정파일에서 jsp명.tiles 로 페이지를 처리하도록 했기때문에 return에 뷰값을 넘겨줄땐 tiles를 붙여주면서 처리하면된다.

이후에는 요청에 맞는 컨트롤러 로직과 jsp를 이용해 뷰를 반환 해주면된다.

 

 

 

 

 

---

★ 이슈사항
1. 패키지를 통일하지 않아서 부트 실행시 페이지를 찾는부분에서 whitelabel 에러가 남.
해결: 패키지명을 통일했음. 즉, 최상위 패키지는 org.my.toyproject 로 설정.

2.tiles 를 정의하는 xml 부분에서 에러.
해결:  <!DOCTYPE tiles-definitions PUBLIC 
        "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" 
        "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">  

부분을 추가하고 버전을 3버전으로 맞춰줌.

 

★ 다음에 할꺼.

1. DB 테이블 생성(DDL)

2. 부트스트랩 적용