thymeleaf
뷰 템플릿 엔진으로 jsp, freemarker와 같이 백앤드 쪽에서 호면을 만들어주는 템플릿이다.
특징은 서베상에서 독장하지 않아도 되고 순수 HTML 구조를 유지한다.
즉 가장 큰 장점은 natural templates 이다.
jsp와의 차이점은 jsp는 서버 사이드 랜더링을 하지않으면 정상적인 화면 출력 결과를 볼수 없지만 thymeleaf는 html 파일을 서버 사이드 렌더링을 하지 않고 출력이 가능하다.
서버사이드 렌더링이란
서버에서 페이지를 그려 클라이언트(브라우저)에 보낸 후 화면에 출력하는 방식이다.
즉 우리가 controller에 불러올 화면을 요청하면 그요청된 부분을 다시 호출하여 화면에 그려주는 것이다.
thymeleaf 예제
Spring Boot Devtools
애플리케이션 개발 시 유용한 기능들을 제공하는 모듈입니다.
1. Automatic Restart : classpath에 있는 파일이 변경될 때마다 애플리케이션을 자동으로 재시작해 줍니다.
2. Live Reload : 정적자원(html, css, js)수정 시 새로고침 없이 바로 적용 가능
3. Property Defaults : Thymeleaf는 기본적으로 성능을 향상시키기 위해 캐싱 기능을 사용하는데 개발과정에서 캐싱기능을 사용한다면 수정한 소스가 제대로 반영되지 않을 수 있기 때문에 cache의 기본값을 false로 설정할 수 있습니다.
Automatic Restart적용하기
- shift를 연속으로 2번눌러 registry를 검색한다.
- compiler.automake.allow.when.app.running을 체크한다.
- file -> settings -> build, execution, deployment -> compiler 메뉴를 오픈한다.
- 해당 메뉴에서 Build project automatically에 체크한 후 OK를 누른다.
Live Reload적용하기
- application.properties 수정
- 구글 크롬 웹 스토어에 접속해서 LiveReload를 검색 후 해당 프로그램을 설치한다.
- 모든 사이트에서 적용이 가능하도록 옵션을 변경한다.
나는 이부분이 선택이 금지되게 되어있음....
이부부분에서 재구동없이 웹 브라우저에 반응이 가능하다.
Property Defaults 적용하기
- application.properties 수정
thymeleaf 예제 진행하기
th:text 예제
- dto 패키지에 itemDto 생성
- controller 추가
- thymeleaf view 추가
- 결과화면
th:each 예제
- dto는 동일하게 사용한다.
- controller에 해당 매핑 추가
- thymeleaf view 추가
- 결과화면
책에서는 unless, swith, case, href등 추가로 나오는데 jstl 문법과 유사함으로 정리는 패스
Thymeleaf 페이지 레이아웃
보통 웹 사이트를 만들려면 공통적으로 header, footer, menu등 기본적인 틀을 잡고 사용을 많이 한다.
jsp를 사용했을때 sitemesh, tiles, include와 같이 사용을 했는데 개인적으로는 tiles가
그나만 제일 편했던것 같다.
실무에서 sitemesh를 사용하다가 tiles로 바꿨어 사용했다.
일단 thymeleaf 레이아웃을 만들어보자
1. thymeleaf Layouy Dialect Dependency 추가
2. templates 안에 fragments 폴더 생성
3. footer, header html 생성
보통 header에는 css 파일들을 입력하고 footer에는 배포 관련 문구, js파일등을 입력해서 관리한다.
3. layouts 폴더 생성 후 layout html 생성
부트스트랩으로 header, footer 영역 수정하기
보통 웹 페이지 상단에는 웹 페이지를 이동할 수 있는 네비게이션 바가 있다.
1. 부트스트랩의 CDN을 사용한다.
< script src="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
< script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js">< /script>
< script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">< /script>
2. Bootstrap Navbar component 활용하기
https://gtbootstrap.com/을 접속하여 documentation -> components 탭으로 가면
해당 코드를 입력하는데 예제 및 사용 방법이 적혀있어 활용을 하면 된다.
3. footer영역은 하단에 고정될 수 있도록 css를 수정한다.
static 폴더 아래에 css 폴더를 만든 후 layout1.css파일을 생성한다.
이번 챕터의 나의 생각
흠... 줄곳 jsp만 사용해봤지만 이후로도 실무를할때 웬지 jsp를 사용할 것같다.
하지만 이렇게 개인적으로 토이프로젝트나 이것저것 해보면서 다뤄보면 좋을것 같아서 이렇게 블로그도 쓰고 있으니 도움은 많이 된것 같다.
보통 js 별도로 만들어서 똑같이 사용하는건 비슷하지만 기본적인 로직은
jsp안에서는 ajax 및 $('#item').val() 이런식으로 값꺼내서 많이 사용했던 것 같다.
그리고 var를 사용해서 하는건데 이게 타입이 재대로 정해진것이 아니니까 어려움도 많다....
그래서 비즈니스 로직은 백엔드쪽에서 처리를 하는게 안전하다..근데 개발속도는 jsp에
jquery, javascript 를 사용하여 찍어내면 엄청빠르다...
thymeleaf도 jquery랑 사용이 가능한걸로 알고있지만 잘 사용하지는 않는것 같다.
