스프링 프레임워크 6장: 템플릿 엔진 (ft. Thymeleaf)

SR Lee·2023년 6월 30일
0

1. 템플릿 엔진과 타임리프란

  1. 템플릿 엔진: 데이터를 (미리 지정된)템플릿과 바인딩해서 뷰의 표시를 도와준다
  2. 타임리프: HTML기반 템플릿 엔진으로, 페이지의 동적으로 조립해주고 웹 브라우저에서 파일 내용을 확인하며 뷰를 만들 수 있다 (그래서 디자이너와 분업이 쉽다)

2. Model 인터페이스(스프링 MVC에서 관리)의 사용법

역할: 처리한 데이터를 뷰에 표시하고 싶은 경우 데이터를 전달한다

제공하는 기능: 객체 저장과 관리

이용법: 요청 핸들러 메서드의 인수에 Model 타입을 전달 (그러면 스프링MVC가 자동으로 타입 인스턴스 설정)

위치: src/main.resources/templates 폴더 아래에 ‘요청 핸들러 메서드의 반환값 + .html 파일이

메서드: addAttribute (ex) Model addAttribute (String name, Object value)

3. 타임리프 사용법

  1. Spring Initializer
  2. Controller 생성
  3. 뷰 생성
    1. (타임리프 기능 예시) th:text= 속성값에 지정된 값을 Sanatize후 출력 (Sanatize 안하면 th:utext)
  4. 실행과 확인
    1. pc에서 요청 → 컨트롤러 (GET) → model.addAttribute(”msg”, “타임리프!”); + 템플릿 → 템플릿엔진 → 타임리프 → pc에게 응답

4. 타임리프 사용해서 프로그램 만들기

  1. 타임리프 사용법

    1. 직접 문자 삽입
    2. 인라인 처리: [[${name}]]고정값과 변수 조합하고 싶을 때
    3. 값 결합: +
    4. 값 결합 (리터럴 치환)
    5. 지역 변수
    6. 비교와 등가
    7. 조건 연산자
    8. 조건 분기 (true)
    9. 조건 분기 (false)
    10. switch
    11. 참조 (데이터를 결합한 객체)
    12. 참조 (th:object): 자식 요소에서 *{필드명}으로 사용
    13. 참조 (List)
    14. 참조(Map)
    15. 반복: th:each = “요소 저장용 변수: ${반복 처리하는 객체}”, 요소저장용 변수는 반족 처리 중에만 유용
    16. 반복 상태: th:each = “member, s:membersth:object={members}” th:object=”{member}”
      1. 반복 상태 변수: index, count, size, current, even, odd, first, last
    17. 유틸리티 객체: #strings, #numbers, #bools, #dates, etc.
      1. #numbers.firnatInteger (정수값 변환 형식)
      2. #dates.createNow()
    18. 다른 템플릿 삽입하기: th:fragment=”one”, th:insert=”fragment: : one”, th:replace=”frangment: :three”
      1. fragment.html에 공통 내용 작성, useThymeleaf.html에 공통 내용 가져와 출력
    19. 레이아웃: 여러 템플릿에 같은 디자인 레이아웃 사용할 때 , thymeleaf-layout-dialect

    5. 타임리프로 프로그램 만들기

    1. 프로젝트 생성, thymeleaf-layout-dialect설정, build.gradle 수정
    2. 컨트롤러에서 값을 뷰로 보내, 뷰의 요청대로 브라우저에 표시된다
    3. 전 내용 실천해보기 (컨트롤러, 뷰에 추가 등을 통해)
      1. 직접 문자를 삽입해서 값 결합 만들기
      2. 값 결합(리터럴 치환)에서의 비교와 등가
      3. 조건 연산자를 이용한 조건 분기 (false)
      4. switch에서 th:object만들기
      5. 리스트 반복하기
      6. 반복 상태에서 유틸리티 객체 만들기
      7. 다른 템플릿 포함시키기
      8. 레이아웃 생성 (decorater, fragment)
profile
studying backend

0개의 댓글