스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 2

Spring 정리 2022. 5. 31. 21:52

인프런 강의 41일차.

 - 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 1 (김영한 강사님)

 - 1편에서 배운 MVC를 활용할 수 있는 기술 습득

 - 타입 컨버터, 파일 업로드, 활용, 쿠키, 세션, 필터, 인터셉터, 예외 처리, 타임리프, 메시지, 국제화, 검증 등등

 

1.7 URL 링크

  - 타임리프에서 URL을 생성할 때는 @{...} 문법을 사용하면 된다.

@GetMapping("/link")
public String link(Model model) {
    model.addAttribute("param1", "data1");
    model.addAttribute("param2", "data2");
    return "basic/link";
}

  - hello.thymeleaf.basic.BasicController.java

  - 타임리프 링크 처리 메소드

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>URL 링크</h1>
<ul>
    <li><a th:href="@{/hello}">basic url</a></li>
    <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>
    <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
    <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>
</ul>
</body>
</html>

  - resources.templates.basic.link.html

  - 타임리프 link 사용 html

 

  * 단순한 URL : @{/hello} /hello

 

  * 쿼리 파라미터 : @{/hello(param1=${param1}, param2=${param2})}

   - /hello?param1=data1&param2=data2

   - () 에 있는 부분은 쿼리 파라미터 &로 처리된다.

 

  * 경로 변수 : @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}

   - /hello/data1/data2

   - URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리된다

 

  * 경로 변수 + 쿼리 파라미터 : @{/hello/{param1}(param1=${param1}, param2=${param2})}

   - /hello/data1?param2=data2

   - 경로 변수와 쿼리 파라미터를 함께 사용할 수 있다

 

1.8 리터럴

  - 리터럴은 소스 코드상에 고정된 값을 말하는 용어이다. 예를 들어서 "Hello" 는 문자 리터럴, 10, 20 는 숫자 리터럴이다.

 

  * 타임리프가 제공하는 리터럴

   - 문자 : 'hello'

   - 숫자 : 10

   - 불린 : true , false

   - null : null

 

  * 타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야 한다.

<span th:text="'hello'">

//그런데 문자를 항상 ' 로 감싸는 것은 너무 귀찮은 일이다. 
//공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 작은 따옴표를 생략할 수 있다.
//룰: A-Z, a-z, 0-9, [], ., -, _
<span th:text="hello">

 

<span th:text="hello world!"></span>	//오류 코드
<span th:text="'hello world!'"></span>	//정상 코드

  - 문자 리터럴은 원칙상 ' 로 감싸야 한다. 중간에 공백이 있으면 하나의 의미있는 토큰으로도 인식되지 않는다.

  -  ' 로 감싸면 정상 동작한다.

 

@GetMapping("/literal")
public String literal(Model model) {
    model.addAttribute("data", "Spring!");
    return "basic/literal";
}

  - hello.thymeleaf.basic.BasicController.java

  - 타임리프 리터럴 처리 메소드

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>리터럴</h1>
<ul>
    <!--주의! 다음 주석을 풀면 예외가 발생함-->
    <!-- <li>"hello world!" = <span th:text="hello world!"></span></li>-->
    <li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>
    <li>'hello world!' = <span th:text="'hello world!'"></span></li>
    <li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>
    <li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>
</ul>
</body>
</html>

  - resources.templates.basic.literal.html

  - 타임리프 literal 사용 html

 

리터럴

  • 'hello' + ' world!' = hello world!
  • 'hello world!' = hello world!
  • 'hello ' + ${data} = hello Spring!
  • 리터럴 대체 |hello ${data}| = hello Spring!

 

1.9 연산

  - 타임리프 연산은 자바와 크게 다르지 않다. HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하자.

@GetMapping("/operation")
public String operation(Model model) {
    model.addAttribute("nullData", null);
    model.addAttribute("data", "Spring!");
    return "basic/operation";
}

  - hello.thymeleaf.basic.BasicController.java

  - 타임리프 연산 처리 메소드

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>산술 연산
        <ul>
            <li>10 + 2 = <span th:text="10 + 2"></span></li>
            <li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
        </ul>
    </li>
    <li>비교 연산
        <ul>
            <li>1 > 10 = <span th:text="1 &gt; 10"></span></li>
            <li>1 gt 10 = <span th:text="1 gt 10"></span></li>
            <li>1 >= 10 = <span th:text="1 >= 10"></span></li>
            <li>1 ge 10 = <span th:text="1 ge 10"></span></li>
            <li>1 == 10 = <span th:text="1 == 10"></span></li>
            <li>1 != 10 = <span th:text="1 != 10"></span></li>
        </ul>
    </li>
    <li>조건식
        <ul>
            <li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)?'짝수':'홀수'"></span></li>
        </ul>
    </li>
    <li>Elvis 연산자
        <ul>
            <li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가 없습니다.'"></span></li>
            <li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?:'데이터가 없습니다.'"></span></li>
        </ul>
    </li>
    <li>No-Operation
        <ul>
            <li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></li>
            <li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가 없습니다.</span></li>
        </ul>
    </li>
</ul>

</body>
</html>

  - resources.templates.basic.operation.html

  - 타임리프 operation사용 html

 

  * 비교연산 : HTML 엔티티를 사용해야 하는 부분을 주의하자,

   - == (eq), != (neq, ne), > (gt), < (lt), >= (ge), <= (le), ! (not)

  * 조건식 : 자바의 조건식과 유사하다.

  * Elvis 연산자 : 조건식의 편의 버전 ($data가 있으면 $data를 그대로 출력, 없으면 false 조건 출력)

  * No-Operation : _ 인 경우 마치 타임리프가 실행되지 않는 것 처럼 동작한다. 이것을 잘 사용하면 HTML 의 내용 그대로 활용할 수 있다. 마지막 예를 보면 '데이터가 없습니다.' 부분이 그대로 출력된다.

 

  • 산술 연산
    • 10 + 2 = 12
    • 10 % 2 == 0 = true
  • 비교 연산
    • 1 > 10 = false
    • 1 gt 10 = false
    • 1 >= 10 = false
    • 1 ge 10 = false
    • 1 == 10 = false
    • 1 != 10 = true
  • 조건식
    • (10 % 2 == 0)? '짝수':'홀수' = 짝수
  • Elvis 연산자
    • ${data}?: '데이터가 없습니다.' = Spring!
    • ${nullData}?: '데이터가 없습니다.' = 데이터가 없습니다.
  • No-Operation
    • ${data}?: _ = Spring!
    • ${nullData}?: _ = 데이터가 없습니다.

 

'Spring 정리' 카테고리의 다른 글

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 4  (0) 2022.06.03
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 3  (0) 2022.06.03
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 1  (0) 2022.05.30
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 28  (1) 2022.05.29
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 27  (0) 2022.05.29
,

티스토리툴바