반응형
기존 Spring MVC + JSP + MyBatis 기반 레거시 프로젝트를 Spring Boot + Thymeleaf + JPA로 마이그레이션하는 과정을 상세히 기록한 가이드입니다.
진행 요약
- JSP → Thymeleaf 마이그레이션 구조 설계 및 navigation, recipeForm 전환 시작
- Thymeleaf Layout Dialect 적용 및 레이아웃 구성 완료
- 공통 CSS/JS 폴더 구조 및 위치 지정 완료
공통 폴더 구조 및 위치
src/
└── main/
└── resources/
├── static/
│ ├── css/
│ │ ├── reset.css
│ │ ├── style.css
│ │ ├── nav_style.css
│ │ └── recipe_write.css
│ ├── js/
│ │ ├── jquery.min.js
│ │ └── variable_func.js
│ └── images/
│ └── ico_lnb_small.svg
├── templates/
│ ├── layout.html
│ ├── fragments/
│ │ ├── head.html
│ │ └── navigation.html
│ └── recipe/
│ └── recipeForm.html
└── application.yml
예제 JSP 소스 (기존 navigation.jsp)
<nav class="menu_lst">
<h1><a href="/">ALAN 레시피</a></h1>
<dl>
<dt>레시피 관리</dt>
<dd>
<ul>
<li><a href="/">레시피 목록</a></li>
<li><a href="${contextPath}/recipe/recipeBoardWrite.do">레시피 등록</a></li>
</ul>
</dd>
</dl>
</nav>
<script>
$(function(){
$('.menubar_toggle').click(function(){
$('.menu_lst').toggleClass('collapsed');
});
});
</script>
Thymeleaf 변환 (navigation.html)
<nav th:fragment="navigation">
<h1><a th:href="@{/}">ALAN 레시피</a></h1>
<dl>
<dt>레시피 관리</dt>
<dd>
<ul>
<li><a th:href="@{/}">레시피 목록</a></li>
<li><a th:href="@{/recipe/recipeBoardWrite}">레시피 등록</a></li>
</ul>
</dd>
</dl>
</nav>
<script th:inline="javascript">
$(function(){
$('.menubar_toggle').click(function(){
$('.menu_lst').toggleClass('collapsed');
});
});
</script>
Layout Dialect 적용 예제 (layout.html)
<title layout:title-pattern="$DECORATOR_TITLE - ALAN 레시피">ALAN 레시피</title>
<th:block th:replace="fragments/head :: commonHead"></th:block>
<header th:replace="fragments/navigation :: navigation"></header>
<main layout:fragment="content"></main>
Thymeleaf 개별 페이지 예제 (recipeForm.html)
<html layout:decorate="~{layout}">
<head>
<title layout:title="레시피 등록">레시피 등록</title>
</head>
<body layout:fragment="content">
<form th:action="@{/recipe/recipeBoardWrite}" method="post">...</form>
</body>
</html>
spring boot 에서의 공통 레이아웃 구성은 하단의 링크를 참고 부탁드립니다.
Layout Dialect로 공통 레이아웃 쉽게 구성하기 (Spring Boot + Thymeleaf)
이 글은 JSP 기반 레거시 프로젝트를 Spring Boot + Thymeleaf로 전환하면서 Layout Dialect를 활용해 레이아웃과 공통 템플릿을 구성하는 방법을 단계별로 설명합니다.1️⃣ pom.xml 의존성 추가Spring Boot 3.5.0
qkqtodn1.tistory.com
반응형
'1인개발자에서 살아남는법! > 시리즈' 카테고리의 다른 글
| [#5 spring boot] 기능 구현 예제 적용 – 레시피 게시판 CRUD 및 Thymeleaf 연동 (0) | 2025.06.01 |
|---|---|
| [#4 spring boot] MyBatis 기반 프로젝트, JPA + Thymeleaf로 전환하는 모든 방법 (Spring Boot) (0) | 2025.05.31 |
| [#2 spring boot] application.yml 구성 및 MariaDB 연동 – Spring Boot 설정 완벽 가이드 (0) | 2025.05.24 |
| [#1 Spring Boot] 프로젝트 생성 및 WAR 설정 (0) | 2025.05.24 |
| [#0 Spring boot] 레거시 프로젝트 개요 및 분석 (1) | 2025.05.23 |
