[프로젝트/JAVA] 6일차 - 템플릿엔진(Thymeleaf)

2021. 6. 14. 10:34
728x90
반응형

2021.06.15

39번째 포스팅

 

입사 99일차.

이제 모든 준비가 끝났다. View에서 사용자의 요청을 받아 DB의 데이터에 변형을 주는 작업만이 남아있다.

오늘은 이미 입력된 데이터를 가져와서 View에 표시하기 위해 템플릿엔진에 대한 설명을 진행해보려고 한다.

 

아래에 작성하는 내용들은 5일차까지 똑같이 작성했다는 전제가 깔려있다.

 

 

1. Spring MVC모델 데이터의 흐름

  ① Spring Framework안의 데이터는 정해진 흐름대로 흘러가야한다.

  ② View(화면) > Controller > Service > Repository > MyBatis(Mapper) > DB(MySQL) 의 순서대로 데이터는 이동한다.

  ③ 반대로 SELECT 쿼리를 작성해서 DB의 데이터를 View로 가져오는 경우,

        DB > MyBatis(Mapper) > Repository > Service > Controller > View(동적페이지) 의 역순으로 진행된다.

  ④ SELECT를 이용해서 가져오는 데이터를 View에 표시하려면 View는 동적페이지가 되어야 한다.

 

 

2. Thymeleaf

  ① 템플릿엔진의 한 종류. JSP, mustache 등이 있다.

  ② DB에서 가져오는 데이터, API등은 페이지를 이용하는 사람, 날짜, 장소 등에 따라 변하는 데이터다.

        변화가 있는 데이터들을 화면에 표시하기 위해 사용되는 것이 템플릿엔진이다.

  ③ Thymeleaf는 기존에 작성해놓은 html파일을 동적페이지로 사용할 수 있도록 만들어준다.

        application.properties에 Thymeleaf 설정하기(링크)

 

[프로젝트/JAVA] 2일차 - 개발환경구성 (템플릿엔진, DB)

2021.05.05 28번째 포스팅 입사 58일차. 오늘은 템플릿엔진의 종류 중 하나인 타임리프(Thymeleaf) 설정 및 DB(Oracle) 설치를 진행해보려고 한다. 아래의 내용들은 블로그에 작성한 1일차를 그대로 진행했

limreus.tistory.com

 

 

  ④ 아래의 코드를 2번째 줄에 입력하면 이 HTML은 Thymeleaf라는 템플릿엔진을 이용해서 동적페이지로 변경되었다.

<html xmlns:th="http://www.thymeleaf.org">

 

  ⑤ ②으로 표시한 코드를 입력하면 DB에서 받아온 데이터를 name이라는 프로퍼티에 값을 저장하고, ${name}으로 표시한다.

<input type="text" data-th-value="${name}" >

 

 

3. 환경설정 (추가내용 수정) - build.gradle, application.properties

  ① Oracle > MySQL로 DB를 변경했기 때문에 코드의 수정이 필요하다.

  ② Livereload(자동 서버재시작)기능 추가

        백엔드의 내용이 변경되면 자동으로 서버가 재시작 된다.

// ① DB를 MySQL JDBC드라이버로 변경
runtimeOnly 'mysql:mysql-connector-java'

// ② 백엔드의 코드가 수정되면 자동으로 서버가 재기동
developmentOnly 'org.springframework.boot:spring-boot-devtools'

// ① DB를 MySQL연결로 변경
#DataSource
spring.datasource.url=jdbc:mysql://localhost:3306/ccs?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8&useSSL=false
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=root

// ② 자동 서버재기동
#BasicSettings
spring.devtools.livereload.enabled = true

 

 

다음포스팅의 주제

 

[프로젝트/JAVA] 6일차 - MyBatis(Mapper.xml)

2021.06.16 40번째 포스팅 입사 100일 차. 이제 모든 준비가 끝났다. View에서 사용자의 요청을 받아 DB의 데이터에 변형을 주는 작업만이 남아있다. 오늘은 Service, Repository를 만들어서 DB와 Spring을 연결

limreus.tistory.com

 

728x90
반응형

BELATED ARTICLES

more