(MVC 1부) 웹 페이지, Thymeleaf 구성

이 게시물은 위반입니다Spring MVC의 첫 강의를 듣고 작성한 강의노트를 정리하고 녹음하는 방법에 대한 글이다.

토크를 보면서 프로젝트에 적용할 수 있는 부분이나 궁금했던 기능들을 정리해서 올릴 생각입니다.

제 개인적인 의견이 추가되어 잘못된 정보가 포함된 경우, 의견이나 의견을 보내주시면 감사하겠습니다.

강의에 대한 자세한 내용은 다음을 참조하십시오. MVC의 봄 당신은 만날 수 있습니다

'추천 관련글,

Spring MVC Part 1 – 백엔드 웹 개발의 핵심 기술 – 인프라 | 강의

웹 애플리케이션 개발에 필요한 모든 웹 기술을 처음부터 이해하고 완성할 수 있습니다.

Spring MVC의 기본 원리와 구조를 이해하고 심도 있는 백엔드 개발자로 성장한다.

www.inflearn.com

쉬운 목차

템플릿 엔진

특정 템플릿 형식과 데이터를 결합하여 HTML 문서를 렌더링하는 소프트웨어

템플릿 엔진은 크게 서버 측 렌더링(SSR)과 클라이언트 측 렌더링(CSR)으로 나뉩니다.

여기서 Time Leap은 SSR에 속하며, 템플릿 엔진의 속성과 종류에 대해 간단히 정리해 보겠습니다.

특성

코드량 줄이기 : HTML에 비해 간단한 구문을 사용하기 때문에 코드의 양을 줄일 수 있습니다.
재사용성: 대부분의 경우 템플릿에 따라 데이터만 변경됩니다.
손쉬운 유지 관리: 전달된 데이터만 변경하면 됩니다.

Java의 템플릿 엔진 기능

JSP: 현재 Spring에서 더 이상 사용되지 않음
Freemarker: 템플릿 엔진으로서 너무 다재다능합니다.

낮은 수준의 기술에 대한 비즈니스 논리가 추가되었습니다.
Thymeleaf: 현재 Spring에서 권장
- 템플릿 기능을 HTML 태그의 속성으로 사용한다는 점에서 기존 템플릿 엔진과 다릅니다.
- JS 프레임워크에 익숙하다면 사용하기 좋습니다.
수염: 간단하고 서버 및 클라이언트에서 사용 가능

다음은 현재 Spring에서 권장하는 Thymeleaf에 대한 요약입니다.

백리향 잎

Time Leap은 컨트롤러에서 전달된 데이터를 사용하여 동적으로 화면을 생성하는 뷰 템플릿 엔진입니다.

Time Leap의 일반적인 속성은 다음과 같습니다.

HTML 파일을 서버에서 실행하지 않고 바로 내용을 확인할 수 있습니다.
순수한 HTML 구조 유지하다.

순수한 HTML 구조를 유지한다는 것은 무엇을 의미합니까?

타임스킵 순수 HTML 유지때문에 자연 템플릿라고도 함

서버가 실행되고 있지 않을 때 원시 HTML을 검사할 수 있으며 서버를 실행하면 보기 템플릿을 통해 동적으로 수정된 HTML을 검사할 수 있습니다.

.

JSP의 경우 서버를 실행하지 않고 파일을 열면 JSP 소스코드와 HTML이 혼재되어 정상적인 확인이 불가능했다.

즉, JSP 파일은 서버에서 JSP를 열어야만 확인할 수 있었습니다.

반면 타임리프는 서버를 실행하지 않고도 화면 구성을 쉽게 이해할 수 있어 개발을 위해 매번 서버를 재시작할 필요가 없기 때문에 개발이 쉬워진다.

또한 봄철에는 백리향 잎을 사용하는 것이 좋습니다.

봄부터 속성까지 손쉬운 유지 보수 및 확장 자동으로 처리하는 부분이 있었습니다.

MVC-2 및 추가 연구에 대한 내용을 게시할 예정입니다.

타임리프 사용

그래들 – build.gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

Maven-pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

위 설정을 추가하여 생성하면 application.properties다음 코드가 자동으로 추가됩니다.

spring.thymeleaf.prefix=classpath:/templates/ 
spring.thymeleaf.suffix=.html

다음과 같이 경로를 문자열로 반환하면

@GetMapping
public String items(Model model) {
    List<Item> items = itemRepository.findAll();
    model.addAttribute("items", items);
    return "basic/items";
}

/템플릿/베이스/요소.html로 기본 경로가 전환됩니다.

사용하려는 HTML 파일에 위의 코드를 추가하십시오.

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

Thymeleaf 웹 페이지의 예

다음 코드를 살펴보겠습니다.

(간단한 상품등록 버튼)

<div class="row">
        <div class="col">
            <button class="btn btn-primary float-end"
                    onclick="location.href="http://cobi-98.m/addForm.html""
                    th:onclick="|location.href="http://cobi-98.m/@{/basic/items/add}"|"
                    type="button">상품 등록</button>
        </div>
</div>

단순 onclick 태그의 HTML 코드에서 th 태그(th:onclick)가 있는 부분을 서버측에서 렌더링하고,

위치는 th 태그 속성의 값으로 대체됩니다.

이러한 방식으로 Time Leap을 사용하면 다음과 같은 이점이 있습니다.

코드 변경이 없기 때문에 서버 팀과 공개 팀 간의 협업이 더 쉬워집니다.
비즈니스 로직과 별도로 뷰에 집중할 수 있습니다.
서버에서 조작이 필요 없기 때문에 서버 조작 없이도 화면을 확인할 수 있습니다.

(서버가 실행되지 않을 때 정적 콘텐츠)

백리향 구문

eq ${item.price}

표현	의미	예
@{…}	URL 링크 표현	th:href=”http://cobi-98.m/@{/css/bootstrap.min.css}”
\|…\|	리터럴 대체	일:온클릭= “‘location.href=”http://cobi-98.m/ + “\” + @{/basic/items/add} + ‘\”” -> “\|location.href=”http://cobi-98.m/@{/basic/items/add}”\|”
일: 모두	반복되는 문제
100
${…}	변수 표현식	th:text=${상품.가격}
일: 텍스트	내용 변경	th:text=”\|${user.name} 님의 지원서에 오신 것을 환영합니다! \|”>
*{…}	선택 변수
100

Time Leap의 많은 문법과 기본 표현 등 많은 정보가 있지만,

mvc-2 타임워프와 스프링 통합에 대한 이야기를 듣고나서 타임워프 2부를 정리해서 올려보도록 하겠습니다.

감사해요