ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ

๋ฐ˜์‘ํ˜•
Thymeleaf

์Šคํ”„๋ง ๋ถ€ํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ทฐํ…œํ”Œ๋ฆฟ์œผ๋กœ jsp๋ฅผ ๋Œ€์‹ ํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ค„ ํ™”๋ฉด ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ ํŒŒ์ผ

  • HTML, CSS, JS ๋กœ ์ž‘์„ฑ
  • .html ํ™•์žฅ์ž๋กœ ๋๋‚˜์„œ ๋‹ค๋ฅธ ์ž๋ฐ” ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๊ฐ–๋‹ค ๋ถ™์ด๊ธฐ๊ฐ€ ์ƒ๋‹นํžˆ ์šฉ์ดํ•˜๋‹ค.
  • ์Šคํ”„๋ง์—์„œ ๊ณต์‹ ์ง€์›ํ•˜๋ฏ€๋กœ ์ถ”๊ฐ€์ ์ธ ๋ทฐ์„ค์ •์„ ๋”ฐ๋กœ ํ•ด์ฃผ์ง€ ์•Š์•„๋„๋œ๋‹ค.
  • ์Šคํ”„๋ง์—์„œ ๋ฐ€๊ณ ์žˆ๋‹ค

 

์ƒˆ๋กœ์šด ํŒจํ‚ค์ง€ ์ƒ์„ฑ

 

context root

ํ•˜๋‚˜์˜ ํ†ฐ์บฃ์—์„œ ์—ฌ๋Ÿฌ๊ฐœ์˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ด€๋ฆฌํ•  ๊ฒฝ์šฐ์— ๊ฑ”๋„ค๋ฅผ ๊ตฌ๋ถ„ํ•ด์•ผ ํ•˜๋Š”๋ฐ

๋„๋ฉ”์ธ ๋’ค์— ๋ถ™์€ ์• ๊ฐ€ ์ปจํƒ์ŠคํŠธ ๋ฃจํŠธ์ด๋‹ค.

๋ถ€ํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ปจํ…์ŠคํŠธ๋ฃจํŠธ๊ฐ€ / (์Šฌ๋ž˜์‹œ)๋กœ ์„ค์ •๋˜์–ด์žˆ๋‹ค.

๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ปจํ…์ŠคํŠธ ๋ฃจํŠธ๋ฅผ ์žฌ์ง€์ • ํ•ด์ฃผ๊ณ ์‹ถ๋‹ค๋ฉด ์„ค์ •ํŒŒ์ผ์—์„œ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

 

application.properties

context root๋ฅผ ๋ฐ”๊พธ๋ ค๋ฉด server.servlet.context-path=/์ง€์ •ํ•˜๊ณ ์‹ถ์€์ปจํ…์ŠคํŠธ๋ฃจํŠธ  ์œผ๋กœ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค. 

1
2
3
4
# server port change
server.port=8000
# context root change
server.servlet.context-path=/boot

 

์ปจํŠธ๋กค๋Ÿฌ ์ƒ์„ฑ

SampleController.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.springboot.boot03.sample;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class SampleController {
 
    @GetMapping("/sample1")
    public String sample1(Model model) {
        model.addAttribute("greeting""Hello!!!");
        return "sample1";
    }
}
 
 

 

ํƒ€์ž„๋ฆฌํ”„ ํŒŒ์ผ ๋งŒ๋“ค๊ธฐ

ํƒ€์ž„๋ฆฌํ”„ ํŒŒ์ผ์€ ๋ฌด์กฐ๊ฑด src/main/resource/templates ์— ๋งŒ๋“ค์–ด์ค€๋‹ค.

ํŒŒ์ผ์„ ์ƒ์„ฑํ•  ๋•Œ html๋กœ ์ƒ์„ฑํ•˜๊ฒŒ ๋˜๋ฉด ์ดํด๋ฆฝ์Šค๊ฐ€ ์ž๋™์œผ๋กœ ์œ„์น˜๋ฅผ src/main/webapp์— ์„ค์ •ํ•ด๋ฒ„๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— new- file์„ ํ•œ ํ›„ ์ด๋ฆ„๊ณผ ํ™•์žฅ์ž๋ช…(html)๊นŒ์ง€ ์ „๋ถ€ ์ž‘์„ฑํ•ด์„œ ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด ์ฃผ๋„๋ก ํ•œ๋‹ค.

 

sample1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf3</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
</head>
<body>
    <h1>ํƒ€์ž„๋ฆฌํ”„ ํ…Œ์ŠคํŠธ ํŽ˜์ด์ง€!</h1>
    <p th:text="${greeting}"></p>
    <p>[[${greeting}]] World!!</p>
    <div></div>
</body>
</html>
 
 

ํƒ€์ž„๋ฆฌํ”„ ๋ช…๋ น์–ด๋Š” ๋ชจ๋ธ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด th:text="${ }"์™€ [[${ }]]๋กœ ์ด์šฉํ•ด์„œ ์‚ฌ์šฉํ•œ๋‹ค.

 

์„œ๋ฒ„์‹คํ–‰ ํ›„ ์ ‘์†ํ•ด์„œ ์ž˜ ์—ฐ๊ฒฐ์ด ๋˜๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.

๋ถ€ํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ทฐ๋ฆฌ์กธ๋ฒ„ ์„ค์ •์„ ํ•ด์ฃผ์ง€์•Š์•„๋„ ํ”Œ๋ฆฟํด๋” ์•ˆ์—์žˆ๋Š” htmlํŒŒ์ผ๋กœ ์ž๋™์œผ๋ทฐ ์—ฐ๊ฒฐ์„ ํ•ด์ค€๋‹ค.

html ํƒœ๊ทธ ๋’ค์— xmlns:th="http://thymeleaf.org" ๋ฅผ ์ž‘์„ฑํ•ด์ฃผ๋ฉด ํƒ€์ž„๋ฆฌํ”„์˜ ๋ช…๋ น์–ด๋“ค์ด ์ž‘๋™ํ•˜๋Š” htmlํŽ˜์ด์ง€๊ฐ€๋œ๋‹ค. 

๋ฐ˜์‘ํ˜•
๋Œ“๊ธ€