[Camel][Spring] 게시판 만들기 #2. BootStrap 템플릿 적용

본 게시판 만들기 프로젝트는 더블에스 Devlog Spring-MVC 를 참조하여 작성했음을 알려드립니다. 또한 개인적인 학습을 목적으로한 포스팅이기 때문에 완벽하지 않을 수 있음을 알려드립니다. 문제점이나 궁금한점은 댓글로 남겨주시면 감사하겠습니다. 프로젝트 생성에 앞서 이번 게시판 만들기 프로젝트는 이클립스를 사용하여 구현하였습니다. 

1. BootStrap 템플릿 다운로드

먼저 AdminLTE 3.0.5 다운로드 페이지에서 템플릿을 다운로드합니다. 다운 받은 파일을 압축해제 후 dist, plugins 폴더를 복사한 뒤 이전에 생성 및 세팅한 프로젝트의 /webapp/resources 디렉토리에 붙여넣습니다.

그림 1-1

그림 1-2

2. home.jsp 파일 수정

압축 해제한 AdminLTE-3.0.5 템플릿 폴더의 starter.html파일 전체 코드를 복사한 뒤 home.jsp 파일에 붙여넣습니다. 그리고 servlet-context.xml 파일에 아래와 같이 추가해줌으로써 정적자원 디렉토리를 등록해줍니다.

그림 2-1

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

	<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
	
	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven />

	<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
	<resources mapping="/resources/**" location="/resources/" />
	<resources mapping="/plugins/**" location="/resources/plugins/"/>
	<resources mapping="/dist/**" location="/resources/dist/"/>
	
	
	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<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>
	
	<context:component-scan base-package="com.cameldev.mypage" />
	
	
	
</beans:beans>

이제 다시 프로젝트를 빌드해보면 아래와 같은 페이지를 확인할 수 있습니다. 

그림 2-2

 

3. include 처리

앞서 작성한 home.jsp의 경우에는 반복적으로 수많은 페이지에서 사용되는 페이지이기 때문에 한가지를 수정하기 위해서는 수십번의 코드 수정이 필요할 수도 있습니다. 이러한 번거로움을 방지하기 위해서 우리는 include 처리를 하는 것입니다. 

 이를 위해서 views 디렉터리 하위에 include 디렉터리를 생성하거, home.jsp를 5개의 영역으로 나누어 아래와 같이 5개의 jsp 파일을 생성하도록 하겠습니다. 

그림 3-1

그림 3-1에서 페이지 상에 보여지는 3개의 영역을 제외한 나머지 파일인 head.jsp와 plugin_js.jsp의 경우에는 css와 js파일을 추가하는 용도로 사용되는 파일입니다. 

 

include 처리 전과 처리 후의 코드는 아래와 같습니다.

단, 처리 전을 보여주는 이미지는 코드의 양이 너무 길기 때문에 collaspe를 해준 결과이미지라는 점 인지하시길 바랍니다. 

home.jsp (Before)

home.jsp (After)

 

위와 같이 수정 한 후 프로젝트를 빌드해보면 이전과 동일한 페이지가 로딩되는 것을 확인할 수 있습니다. 이처럼 include 처리를 해줌으로써 우리는 이제 코드의 수정이 필요할 때 매 페이지마다 코드를 변경하는 대신 include 디렉터리의 jsp 파일에서만 코드를 수정해줌으로써 번거로움을 피할 수 있게 됬습니다. 

 

4. 포스팅을 마치며

이번 포스팅에서는 Bootstrap 템플릿을 적용해 보았습니다. 다음 포스팅에서는 지금까지한 기본적인 셋팅을 바탕으로 본격적으로 게시판을 구현하도록 하겠습니다.

 

 

다음포스팅

2020/06/25 - [Spring/게시판 만들기] - [Camel][Spring] 게시판 만들기 #3. 게시판 글 쓰기,수정 삭제

[Camel][Spring] 게시판 만들기 #3. 게시판 글 쓰기,수정 삭제

 

글을 읽으시면서 잘못된 부분이나 궁금하신 사항은 댓글 달아주시면 빠른 시일내에 수정 및 답변하도록 하겠습니다.