코딩왕 미룡

[spring boot(vscode)+thymeleaf]환경 세팅 본문

Spring

[spring boot(vscode)+thymeleaf]환경 세팅

허미룡 2023. 7. 31. 09:46

◦  확장 프로그램

   - Java Extension Pack

   - Spring Boot Extension Pack

   - Spring Boot Tools

 

◦  프로젝트 생성

Ctrl + Shift + P 를 눌러 커맨드 팔레트(Command palette) open

Spring initalizr 검색 후 Maven or Gradle 프로젝트 생성

  1. Spring Boot version 선택
  2. Project language 선택
  3. Group Id 등록: 보통 도메인 역순으로 입력 ex) example.app
  4. Artifact Id 등록: 이 id로 프로젝트가 생성
  5. Packaging type 선택: JAR/WAR
  6. Java Version 선택

❗ 주의

Thymeleaf 사용을 위한 경로 확인

Spring boot 에서는 템플릿용 파일의 기본 경로가 미리 지정되어있음

기본적으로 Thymeleaf는 resources/templates 경로에 html파일을 만들고

그 외에 css, javascript, img등의 리소스들은 static(정적 파일) 폴더에서 가져옴

 

- static(정적 파일) 폴더 내부 리소스들fontsJS

  • plugins
  • images
  • CSS

※ 꼭 src/main/resources/templates 안에 파일을 생성해야함

컨트롤러에서 Mapping URL을 지정해주지 않으면 static 에있는 정적파일을 찾음

 

  • prefix/suffix 설정

      프로젝트의 설정 파일(application.properties, application.yml 등)

      - prefix : 컨트롤러를 통한 페이지 이동 시 폴더 위치를 정할 수 있음

      - suffix : 파일의 확장자

 

ex)

spring.mvc.view.prefix='/templates/'
spring.mvc.view.suffix='.html'

→ controller에서 파일명만 리턴해도 templates이라는 폴더 안에서 [파일명].html을 찾아줌

 

🟨 사용 순서

의존성 추가 - spring-boot-starter-thymeleaf

dependencies {
    //thymeleaf 
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

html 파일 - 태그 추가

(빼도 잘 돌아가던뎅 ..)

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

컨트롤러에서 model.addAttribute(attributeName, attributeValue) 로 값을 담아 전송

attributeName으로 값을 꺼내 출력

→ th:text=${attributeName} 형식으로 사용

 

Thymeleaf는 다른 템플릿 엔진과 달리 확장자 명을 html파일 그대로 사용

따라서 Thymeleaf html파일 자체를 웹 브라우저로 열어도 동작할 수 있으며

이 때 Thymeleaf로 작성된 태그들은 무시하고 열림

 

Thymeleaf

서버 사이드 템플릿 엔진의 일종

 

  • 템플릿 엔진

데이터와 템플릿을 조합하여 동적인 콘텐츠를 생성하는 역할을 하는 도구나 라이브러리

템플릿 엔진의 주요 목적은 동적인 콘텐츠를 생성하기 위해 정적인 템플릿과 데이터를 결합하는 것이다.

 

  • 서버 사이드 템플릿 엔진(Server-side Template Engine)

서버 측에서 동적 웹 페이지를 생성하기 위해 사용되는 도구나 프레임워크이다.

이 엔진은 서버에서 실행되며, 템플릿 파일과 데이터를 조합하여 동적으로 웹 페이지를 생성한다.

서버에서 가져온 데이터를 미리 정의된 템플릿에 넣은 후 템플릿 파일을 처리하여 최종 HTML 페이지를 생성하고 클라이언트에 전달한다.

    Java : JSP, Thymeleaf, Velocity, Freemarker 등

 

  • 클라이언트 사이드 템플릿 엔진(Client-side Template Engine)

웹 애플리케이션에서 클라이언트 측에서 동적으로 HTML을 생성하기 위해 사용되는 도구나 라이브러리이다.

이 엔진은 브라우저에서 실행되며, 서버로부터 받은 데이터를 처리하여 동적인 콘텐츠를 생성하고 표시한다.

클라이언트 사이드 템플릿 엔진은 서버에서 전달받은 데이터와 HTML 템플릿을 조합하여 최종적인 HTML 코드를 생성한다. 이렇게 생성된 HTML은 브라우저에 의해 렌더링되어 사용자에게 동적인 콘텐츠를 제공한다.

  1. JavaScript: Mustache, Handlebars, Underscore.js
  2. AngularJS: 자체적으로 내장
  3. Vue.js: Vue.js는 자체적으로 내장, 가상 DOM 기반의 동적 렌더링을 지원
  4. React: React는 JSX라는 JavaScript 확장 문법을 사용하여 컴포넌트 기반의 동적 UI를 구성