2022.10.20

Jimin·2022년 10월 20일

비트 스프링 스프링부트 자바

비트캠프

목록 보기

59/60

스프링 프레임워크
- Spring Boot 사용법(계속)
board-app 프로젝트 수행
- 1. SpringBoot 적용하기(계속)
- 1. JSP를 Thymeleaf로 교체하기

Monolithic vs. Microservices

SpringBoot와 라이브러리, 그리고 설정

088. SpringBoot 적용하기

SpringBoot 사용법

1단계 - spring.io 사이트에서 SpringBoot 프로젝트 템플릿을 생성한다.

SpringBoot 기본 프로젝트를 생성한다.

2단계 - SpringBoot 설정을 프로젝트에 반영한다.

build.gradle 변경
application.properties 파일 생성 및 편집

3단계 - Mybatis SQL 매퍼 파일을 DAO 인터페이스에 맞춘다.

src/main/resources/com/bitcamp/board/dao 패키지로 변경
- BoardDaoMapper.xml 파일을 BoardDao.xml 파일로 변경
- MemberDaoMapper.xml 파일을 MemberDao.xml 파일로 변경

089. JSP를 Thymeleaf로 교체하기

Thymeleaf를 설정하고 사용하는 방법

1단계 - Thymeleaf 라이브러를 프로젝트에 적용한다.

build.gradle 변경

2단계 - JSP를 Thymeleaf 로 변경한다.

src/main/resources/templates 디렉토리 생성
- 기존 JSP 파일을 가져와서 Thymeleaf로 바꾼다.
member.list.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bitcamp</title>
<style>
tr:hover {
  background-color: navy;
  color: white;
}
</style>
</head>
<body>
<h1>회원</h1>

<a href='form'>새 회원</a>
<table border='1'>
  <tr>
    <th>번호</th>
    <th>이름</th>
    <th>이메일</th>
  </tr>

  <tr data-th-each="member : ${members}">
    <td data-th-text="${member.no}">1</td>
    <td><a href='detail?no=1'
           data-th-href="@{detail(no=${member.no})}"
           data-th-text="${member.name}">홍길동</a></td>
    <td data-th-text="${member.email}">hong@test.com</td>
  </tr>

</table>
<p><a href='../'>메인</a></p>
</body>
</html>

member.detail.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bitcamp</title>
</head>
<body>
<h1>회원 상세 정보(JSP + Servlet + EL)</h1>
<form action='update' method="post">
<table border='1'>
  <tr>
    <th>번호</th><td><input name='no' type='number' 
     value='1' 
    data-th-value='${member.no}' 
    readonly></td>
  </tr>
  <tr>
    <th>이름</th><td><input name='name' type='text' 
        value='홍길동'
        data-th-value='${member.name}' 
        size='60'></td>
  </tr>
  <tr>
    <th>이메일</th><td><input name='email' type='email' 
    value='hong@test.com'
    data-th-value='${member.email}' 
    size='60'>이메일</td>
  </tr>
  <tr>
    <th>암호</th><td><input name='password' type='password' size='10'></td>
  </tr>
  <tr>
    <th>등록일</th><td data-th-text="${member.createdDate}">2022-10-20</td>
  </tr>
</table>
<p>
  <button type='submit'>변경</button>
  <a href='delete?no=1'
  data-th-href="@{delete(no=${member.no})}">삭제</a>
</p>
</form>

</body>
</html>