Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발자되기 프로젝트

[TypeConverter] View Template에 적용 본문

인프런/[인프런] 스프링 MVC 2

[TypeConverter] View Template에 적용

Seung__ 2021. 10. 2. 13:10
  • Thymeleaf에 Converter를 적용해보자.

1. Controller

@Controller
public class ConverterController {


    @GetMapping("/converter-view")
    public String converterView(Model model){
        model.addAttribute("number", 10000);
        model.addAttribute("ipPort", new IpPort("127.0.0.1", 8080));
        return "converter-view";
    }
}

 

2. converter-view.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>${number}: <span th:text="${number}" ></span></li>
    <li>${{number}}: <span th:text="${{number}}" ></span></li>
    <li>${ipPort}: <span th:text="${ipPort}" ></span></li>
    <li>${{ipPort}}: <span th:text="${{ipPort}}" ></span></li>
</ul>
</body>
</html>
  • 기존과는 다르게 ${{...}}가 있다.
    <li>${number}: <span th:text="${number}" ></span></li>
    <li>${{number}}: <span th:text="${{number}}" ></span></li>
    <li>${ipPort}: <span th:text="${ipPort}" ></span></li>
    <li>${{ipPort}}: <span th:text="${{ipPort}}" ></span></li>
  • 타임리프는 ${{...}} 를 사용하면 자동으로 컨버전 서비스를 사용해서 변환된 결과를 출력해준다. 
  • 변수 표현식 : ${...}
  • 컨버전 서비스 적용 : ${{...}}

 

 

3. 결과

1. ${number}: 10000
2. ${{number}}: 10000
3. ${ipPort}: hello.typeconverter.type.IpPort@59cb0946
4. ${{ipPort}}: 127.0.0.1:8080
  • 1번 -> ${숫자}의 경우 알아서 문자로 변경된다..??? View에는 어쨌든 text를 뿌려야 하니, Conversion알아서 해줌.
  • 2번 -> ${{숫자}} 의 경우 ConversionService가 실행되어 IntegerToStringConveter가 실행되었다.
  • 3번 -> ${객체} 의 경우 object.toString()을 호출한다.(3번)
  • 4번 -> ${{객체}} 의 경우 ConversionService가 실행되어 IpPortToStringConverter 가 실행되었다.

 

 

4. form에 적용

4.1 Controller

    @GetMapping("/converter/edit")
    public String converterForm(Model model){
        IpPort ipPort = new IpPort("127.0.0.1", 8080);
        Form form = new Form(ipPort);
        model.addAttribute("form", form);
        return "converter-form";
    }

    @PostMapping("/converter/edit")
    public String converterEdit(@ModelAttribute Form form, Model model){
        IpPort ipPort = form.getIpPort();
        model.addAttribute("ipPort", ipPort);
        return "converter-view";
    }

 

 

4.2 converter-form.html

  • th:field는 id , name 를 출력하는 기능 등 +  converter 적용을 알아서 해줌.
  • th:value는 converter 적용 안됨.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form th:object="${form}" th:method="post">
    th:field <input type="text" th:field="*{ipPort}"><br/>
    th:value <input type="text" th:value="*{ipPort}">(보여주기 용도)<br/>
    <input type="submit"/>
</form>
</body>
</html>

 

 

4.3 결과

  • GET /converter/edit
    • th:field 가 자동으로 컨버전 서비스를 적용해주어서 ${{ipPort}} 처럼 적용이 되었다. 따라서
    • IpPort String 으로 변환된다.
  • POST /converter/edit
    • @ModelAttribute 를 사용해서 String IpPort 로 변환된다.
    • ConversionService 사용함.

 

5. GitHub : 211002 ConversionService, View

 

GitHub - bsh6463/TypeConverter

Contribute to bsh6463/TypeConverter development by creating an account on GitHub.

github.com

 

'인프런 > [인프런] 스프링 MVC 2' 카테고리의 다른 글

[TypeConverter] Formatter, ConversionService  (0) 2021.10.02
[TypeConverter] Formatter  (0) 2021.10.02
[TypeConverter] Spring에Converter 적용  (0) 2021.10.01
[TypeConverter] conversionService  (0) 2021.10.01
[TypeConverter] Type Converter  (0) 2021.10.01
'인프런/[인프런] 스프링 MVC 2' Related Articles more
Comments