Spring MVC - 웹 페이지 만들기 with Thymeleaf

이번 포스팅에서는 이전 포스팅에서 공부한 MVC의 기본 기능과 뷰 템플릿 Thymeleaf을 이용해 간단하게 상품을 관리할 수 있는 서비스를 만들어 보겠습니다.

요구사항

상품 도메인 모델

상품 ID
상품명
가격

상품 관리 기능

상품 목록
상품 상세
상품 등록
상품 수정

상품 도메인 개발

Item - 상품 객체

@Getter @Setter
public class Item {

    private Long id;
    private String itemName;
    private Integer price;
    private Integer quantity;

    public Item(){}

    public Item(String itemName, Integer price, Integer quantity) {
        this.itemName = itemName;
        this.price = price;
        this.quantity = quantity;
    }
}

ItemRepository - 상품 저장소

package hello.itemservice.domain.item;

import org.springframework.stereotype.Repository;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Repository
public class ItemRepository {
    private static final Map<Long, Item> store = new HashMap<>();
    private static long sequence = 0L;

    public Item save(Item item)
    {
        item.setId(++sequence);
        store.put(item.getId(),item);
        return item;
    }

    public Item findById(Long id)
    {
        return store.get(id);
    }

    public List<Item> findAll()
    {
        return new ArrayList<>(store.values());
    }

    public void update(Long itemId, Item updateParam)
    {
        Item findItem = findById(itemId);
        findItem.setItemName(updateParam.getItemName());
        findItem.setPrice(updateParam.getPrice());
        findItem.setQuantity(updateParam.getQuantity());
    }

    public void clearStore()
    {
        sequence = 0L;
        store.clear();
    }
}

상품 서비스 HTML

부트스트랩

HTML을 편리하게 개발하기 위해 부트스트랩을 사용했습니다.

부트스트랩이란 ?

웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크로, 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동합니다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와줍니다.

부트스트랩 공식 사이트에서 부트스트랩을 다운받아 압축을 출고 bootstrap.min.css 를 복사해서 다음 폴더에 추가합니다.

참고로 /resources/static에 넣어두었기 때문에 스프링 부트가 정적 리소스를 제공합니다.

이렇게 정적 리소스가 공개되는 /resources/static 폴더에 HTML을 넣어두면, 실제 서비스에서도 공개됩니다. 서비스를 운영한다면 지금처럼 공개할 필요없는 HTML을 static폴더에 두는 것을 주의합시다.

서비스 HTML - static

상품 목록 - items.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="max-width: 600px">
  <div class="py-5 text-center">
    <h2>상품 목록</h2> </div>
  <div class="row">
    <div class="col">
      <button class="btn btn-primary float-end" onclick="location.href='addForm.html'" type="button">상품
        등록</button> </div>
  </div>
  <hr class="my-4">
  <div>
    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>상품명</th> <th>가격</th> <th>수량</th>

      </tr>
      </thead>
      <tbody>
      <tr>
        <td><a href="item.html">1</a></td>
        <td><a href="item.html">테스트 상품1</a></td>
        <td>10000</td>
        <td>10</td>
      </tr>
      <tr>
        <td><a href="item.html">2</a></td>
        <td><a href="item.html">테스트 상품2</a></td> <td>20000</td>
        <td>20</td>
      </tr>
      </tbody>
    </table>
  </div>
</div> <!-- /container -->
</body>
</html>

상품 상세 - item.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        } </style>
</head>
<body>
<div class="container">
    <div class="py-5 text-center">
        <h2>상품 상세</h2> </div>
    <div>
        <label for="itemId">상품 ID</label>
        <input type="text" id="itemId" name="itemId" class="form-control"
               value="1" readonly>
    </div> <div>
    <label for="itemName">상품명</label>
    <input type="text" id="itemName" name="itemName" class="form-control"
           value="상품A" readonly> </div>
    <div>
        <label for="price">가격</label>
        <input type="text" id="price" name="price" class="form-control"
               value="10000" readonly>
    </div> <div>
    <label for="quantity">수량</label>
    <input type="text" id="quantity" name="quantity" class="form-control"
           value="10" readonly>
</div>
    <hr class="my-4">
    <div class="row">
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg" onclick="location.href='editForm.html'" type="button">상품 수정</button>
        </div>
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    onclick="location.href='items.html'" type="button">목록으로</button> </div>
    </div>
</div> <!-- /container -->
</body>
</html>

상품 등록 - addForm.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        } </style>
</head>
<body>

<div class="container">

    <div class="py-5 text-center">
        <h2>상품 등록 폼</h2>
    </div>

    <h4 class="mb-3">상품 입력</h4>

    <form action="item.html" method="post">
        <div>
            <label for="itemName">상품명</label>
            <input type="text" id="itemName" name="itemName" class="form-control" placeholder="이름을 입력하세요"> </div>
        <div>
            <label for="price">가격</label>
            <input type="text" id="price" name="price" class="form-control" placeholder="가격을 입력하세요">
        </div> <div>
        <label for="quantity">수량</label>
        <input type="text" id="quantity" name="quantity" class="form-control" placeholder="수량을 입력하세요"> </div>
        <hr class="my-4">
        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button> </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='items.html'" type="button">취소</button> </div>
        </div>
    </form>
</div> <!-- /container -->
</body>
</html>

상품 편집 - editForm.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="py-5 text-center"> <h2>상품 수정 폼</h2>
    </div>
    <form action="item.html" method="post">
        <div>
            <label for="id">상품 ID</label>
            <input type="text" id="id" name="id" class="form-control" value="1" readonly>
        </div>

        <div>
            <label for="itemName">상품명</label>
            <input type="text" id="itemName" name="itemName" class="form-control" value="상품A">
        </div>

        <div>
            <label for="price">가격</label>
            <input type="text" id="price" name="price" class="form-control" value="10000">
        </div>

        <div>
            <label for="quantity">수량</label>
            <input type="text" id="quantity" name="quantity" class="form-control" value="10">
        </div>
        <hr class="my-4">
        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit">저장
                </button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='item.html'" type="button">취소</button> </div>
        </div>
    </form>
</div> <!-- /container -->
</body>
</html>

상품 전체 목록 조회 - 타임리프

이제 본격적으로 컨트롤러와 뷰 템플릿을 이용해 서비스를 개발해보겠습니다.

참고로 뷰 템플릿은 부트스트랩을 이용한 HTML 폼에 타임리프를 추가해 사용할 예정입니다.

우선 컨트롤러부터 만들어보겠습니다.

BasicItemController.java

@Slf4j
@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {
    private final ItemRepository itemRepository;

    @GetMapping
    public String items(Model model)
    {
        List<Item> items = itemRepository.findAll();
        model.addAttribute("items",items);
        return "basic/items";
    }
    
    /*
    테스트용 데이터 추가
     */

    @PostConstruct
    public void init()
    {
        itemRepository.save(new Item("ItemA",10000,10));
        itemRepository.save(new Item("ItemB",20000,20));
    }

컨트롤러 로직

@GetMapping
public String items(Model model)
{
    List<Item> items = itemRepository.findAll();
    model.addAttribute("items",items);
    return "basic/items";
}

localhost:8080/basic/items URL 호출

▶︎ itemRepository에서 모든 상품을 조회한 다음에 List에 담은 후 모델에 추가하고 난 뒤

▶︎ 뷰 템플릿("/basic/items")을 호출

@RequiredArgsConstructor : final이 붙은 멤버변수만 사용해서 생성자를 자동으로 만들어줍니다.
실질적으로 아래 코드를 작성한 것과 같은 효과를 보입니다.

public BasicItemController(ItemRepository itemRepository) {
    this.itemRepository = itemRepository;

이렇게 생성자가 딱 1개만 있으면 스프링은 해당 생성자에 @Autowired로 의존관계를 자동으로 주입해줍니다.

따라서 final 키워드를 빼면 안됩니다. 그러면 ItemRepository 의존관계 주입이 안됨.

테스트용 데이터 추가

테스트용 데이터가 없으면 회원 목록 기능이 정상 동작하는지 확인하기 어렵습니다.

@PostConstruct : 해당 빈의 의존관계가 모두 주입되고 나면 초기화 용도로 호출

여기서는 간단하게 테스트용 데이터를 넣기 위해 사용했습니다.

뷰 템플릿 - /basic/items

이제 resources/static/html 에 저장해둔 정적 HTML을 resources/templates/basic에 items.html을 넣고 thymeleaf 뷰 템플릿을 적용시켜보겠습니다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <link href="/Users/kdo6301/Desktop/item-service/src/main/resources/static/css/bootstrap.min.css"
        th:href="@{/css/bootstrap.min.css}"
        rel="stylesheet">
</head>

<body>

<div class="container" style="max-width: 600px">

  <div class="py-5 text-center">
    <h2>상품 목록</h2>
  </div>

  <div class="row">
    <div class="col">
      <button class="btn btn-primary float-end"
              onclick="location.href='addForm.html'"
              th:onclick="|location.href='@{/basic/items/add}'|"
              type="button">상품 등록
      </button>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <button class="btn btn-primary float-start"
              onclick="location.href='items.html'"
              th:onclick="|location.href='@{/basic/items/clear}'|"
              type="button">상품 초기화
      </button>
    </div>
  </div>

  <hr class="my-4">
  <div>
    <table class="table">

      <thead>
      <tr>
        <th>ID</th>
        <th>상품명</th>
        <th>가격</th>
        <th>수량</th>
      </tr>
      </thead>

      <tbody>
        <tr th:each="item:${items}">
          <td>
            <a href="item.html"
               th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
               th:text="${item.id}">회원ID</a>
          </td>

          <td>
            <a href="item.html"
              th:href="@{|/basic/items/${item.id}|}"
              th:text="${item.itemName}">상품명</a>
          </td>

          <td th:text="${item.price}">10000</td>

          <td th:text="${item.quantity}">10</td>
        </tr>
      </tbody>

    </table>
  </div>
</div> <!-- /container -->
</body>
</html>

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <link href="/Users/kdo6301/Desktop/item-service/src/main/resources/static/css/bootstrap.min.css"
        th:href="@{/css/bootstrap.min.css}"
        rel="stylesheet">
</head>

Thymeleaf 사용 선언

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

속성 변경 - th:href

<link href="/Users/kdo6301/Desktop/item-service/src/main/resources/static/css/bootstrap.min.css"
      th:href="@{/css/bootstrap.min.css}"
      rel="stylesheet">

href="value"를 th:href="value"로 변경

타임리프 뷰템플릿을 거치게 되면 원래 값을 th:xxx 값으로 변경합니다. 만약 값이 없다면 새로 생성.
HTML을 그대로 볼 때에는 href 속성이 사용되고 뷰 템플릿을 거치게 되면 th:href의 값이 href 값을 대체하면서 동적으로 변경할 수 있습니다.
대부분의 HTML 속성을 th:xxx 로 변경 가능

타임리프 핵심

th:xxx가 붙은 부분은 서버사이드 렌더링 및 기존 것 대체.
th가 없으면 기존 html의 속성을 그대로 사용
HTML을 파일로 직접 열었을 때에는 th:xxx가 있어도 웹 브라우저는 th: 속성을 알지 못하기 때문에 무시합니다.
따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있습니다.

속성 변경

1. 상품등록 - th:onclick

<div class="row">
  <div class="col">
    <button class="btn btn-primary float-end"
            onclick="location.href='addForm.html'"
            th:onclick="|location.href='@{/basic/items/add}'|"
            type="button">상품 등록
    </button>
  </div>
</div>

onclick="location.href='addForm.html'" : static HTML에서 상품등록 버튼을 클릭했을 때 동작
th:onclick="|location.href='@{/basic/items/add}'|" : template HTML에서 상품등록 버튼을 클릭했을 때 동작( 상품등록 뷰 템플릿인 /basic/items/add 로 이동)

여기서 사용한 리터럴 대체 문법

|~~~~| : 타임리프에서는 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 합니다
이를테면 이렇게
- <span th:text="'Welcome to our application, ' + ${user.name} + '!'"
하지만 리터럴 대체 문법 |~~~~|을 사용하면 더하기 없이 편리하게 사용할 수 있습니다.
- <span th:text="|Welcome to our application, ${user.name}!|"

여기서 사용한 URL 링크 표현식

@{~~~} : 타임리프는 URL 링크를 사용하는 경우 @{~~~~}를 사용합니다. 이걸 URL 링크 표현식이라고 합니다.

2. 상품 초기화 - th:onclick

<div class="row">
  <div class="col">
    <button class="btn btn-primary float-start"
            onclick="location.href='items.html'"
            th:onclick="|location.href='@{/basic/items/clear}'|"
            type="button">상품 초기화
    </button>
  </div>
</div>

상품초기화 버튼 클릭시 /basic/items/clear URL 호출

▶︎ @GetMapping("/basic/items/clear") 동작

@GetMapping("/clear")
public String clearList()
{
    itemRepository.clearStore();
    return "basic/items";
}

itemRepository 초기화 한 후 basic/items 뷰 템플릿 호출

3. 상품 목록 조회 - th:each(반복 출력)

<tbody>
  <tr th:each="item:${items}">
    <td>
      <a href="item.html"
         th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
         th:text="${item.id}">회원ID</a>
    </td>

    <td>
      <a href="item.html"
        th:href="@{|/basic/items/${item.id}|}"
        th:text="${item.itemName}">상품명</a>
    </td>

    <td th:text="${item.price}">10000</td>

    <td th:text="${item.quantity}">10</td>
  </tr>
</tbody>

여기서 사용한 반복 출력 문법 th:each

<th th:each="item : ${items}">
반복은 th:each를 사용합니다. 이렇게 하면 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있습니다.
컬렉션의 수 만큼 <tr>..</tr>가 하위 태그를 포함해서 생성됩니다.

여기서 사용한 링크 표현식 @{.../{value}(value=${param.value})

th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
URL 링크 표현식을 경로변수를 사용하여 지정할 수 있습니다.
경로변수 {itemId} 뿐만 아니라 쿼리 파라미터도 생성합니다.
회원 ID나 상품명을 클릭하면 /basic/items/{ItemId} 링크로 이동합니다 - 상품 상세 폼
ex) th:href="@{/basic/items/{itemId}(itemId=${item.id}, query = 'test')}"
생성 링크 : http://localhost:8080/basic/items/1?query=test

여기서 사용한 내용 변경 문법 th:text

<td th:text="${item.price}">10000</td>
내용의 값(10000)을 th:text의 값으로 변경합니다.

여기서 사용한 변수 표현식 ${..}

<td th:text="${item.price}">10000</td>
모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있습니다.
프로퍼티 접근법 사용 (item.getPrice())

❗️타임리프는 순수 HTML 파일을 웹 브라우저에서 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거쳐 동적으로 변경된 결과도 확인할 수 있습니다. 이렇게 순수 HTML 을 그대로 유지하면서 뷰템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 이라고 합니다.

상품 상세 조회 - 타임리프

BasicItemController에 컨트롤러 추가

@Slf4j
@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {
    private final ItemRepository itemRepository;
    
    @GetMapping("/{itemId}")
    public String item(@PathVariable Long itemId, Model model)
    {
        Item item = itemRepository.findById(itemId);
        model.addAttribute("item",item);
        return "basic/item";
    }
    
  	...
}

컨트롤러 로직

▶︎ /basic/items/{itemId} URL 호출

▶︎ @PathVariable 경로변수로 넘어온itemid를 통해 Item을 찾아 model에 item을 담습니다.

▶︎ View 템플릿 basic/item 호출

뷰 템플릿

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link href="/Users/kdo6301/Desktop/item-service/src/main/resources/static/css/bootstrap.min.css"
          th:href="@{/css/bootstrap.min.css}"
          rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        } </style>
</head>
<body>
<div class="container">
    <div class="py-5 text-center">
        <h2>상품 상세</h2>
    </div>

    <!--추가-->
    <h2 th:if="${param.status}" th:text="'저장 완료'"></h2>

    <div>
        <label for="itemId">상품 ID</label>
        <input type="text" id="itemId" name="itemId" class="form-control"
               value="1"
               th:value="${item.id}"
               readonly>
    </div>

    <div>
    <label for="itemName">상품명</label>
    <input type="text" id="itemName" name="itemName" class="form-control"
           th:value="${item.itemName}"
           value="상품A" readonly>
    </div>

    <div>
        <label for="price">가격</label>
        <input type="text" id="price" name="price" class="form-control"
               th:value="${item.price}"
               value="10000" readonly>
    </div>

    <div>
        <label for="quantity">수량</label>
        <input type="text" id="quantity" name="quantity" class="form-control"
               th:value="${item.quantity}"
               value="10" readonly>
    </div>

    <hr class="my-4">
    <div class="row">
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg"
                    th:onclick="|location.href='@{/basic/items/{itemId}/edit
                    (itemId=${item.getId()})}'|"
                    onclick="location.href='editForm.html'" type="button">상품 수정</button>
        </div>
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    th:onclick="|location.href='@{/basic/items}'|"
                    onclick="location.href='items.html'" type="button">목록으로</button> </div>
    </div>
</div> <!-- /container -->
</body>
</html>

여기서 사용한 속성 변경 문법 th:value

th:value="${item.id}"
모델에 있는 item정보를 획득하고 프로퍼티 접근법으로 출력합니다.
value 속성을 th:value 속성으로 변경합니다.

<hr class="my-4">
<div class="row">
    <div class="col">
        <button class="w-100 btn btn-primary btn-lg"
                th:onclick="|location.href='@{/basic/items/{itemId}/edit
                (itemId=${item.getId()})}'|"
                onclick="location.href='editForm.html'" type="button">상품 수정</button>
    </div>
    <div class="col">
        <button class="w-100 btn btn-secondary btn-lg"
                th:onclick="|location.href='@{/basic/items}'|"
                onclick="location.href='items.html'" type="button">목록으로</button> </div>
</div>

th:onclick = "|location.href='@{/basic/items/{itemId}/edit (itemId = ${item.id})}'|"
상품 수정 버튼 클릭 시 /basic/items/{itemid}/edit으로 이동합니다.
th:onclick="|location.href='@{/basic/items}'|"
목록으로 버튼 클릭시 /basic/items로 이동합니다.

상품 등록 - 타임리프

BasicItemController에 컨트롤러 추가

@Slf4j
@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {
    @GetMapping("/add")
    public String addForm()
    {
        return "basic/addForm";
    }

	
    //    @PostMapping("/add")
//    public String addItemV1(@RequestParam String itemName,
//                            @RequestParam int price,
//                            @RequestParam Integer quantity,
//                            Model model)
//    {
//        Item item = new Item();
//        item.setItemName(itemName);
//        item.setPrice(price);
//        item.setQuantity(quantity);
//
//        itemRepository.save(item);
//
//        model.addAttribute("item",item);
//
//        return "basic/item";
//    }
//

//    @PostMapping("/add")
//    public String addItemV2(@ModelAttribute("item") Item item, Model model)
//    {
//        log.info("item = {}",item);
//        log.info("itemName = {} , itemPrice = {} , itemQuantity = {} ",
//                item.getItemName(),item.getPrice(),item.getQuantity());
//        itemRepository.save(item);
//
//        return "basic/item";
//    }

    /*
    @ModelAttribute의 이름을 생략하면 모델에 저장될 때 클래스명을 소문자로 변경해서 사용합니다.

     */
//    @PostMapping("/add")
//    public String addItemV3(@ModelAttribute Item item, Model model)
//    {
//        log.info("item = {}",item);
//        log.info("itemName = {} , itemPrice = {} , itemQuantity = {} ",
//                item.getItemName(),item.getPrice(),item.getQuantity());
//
//        itemRepository.save(item);
//        return "basic/item";
//    }

//    /*
//    @ModelAttribute 자체도 생략 가능.
//    객체의 경우 자동으로 ModelAttribute 적용
//    단순 타입의 경우 @RequestParam 적용
//     */
//    @PostMapping("/add")
//    public String addItemV4(Item item)
//    {
//        itemRepository.save(item);
//        return "redirect:/basic/items/" + item.getId();
//    }

    @PostMapping("/add")
    public String addItemV6(Item item, RedirectAttributes redirectAttributes)
    {
        Item savedItem = itemRepository.save(item);
        redirectAttributes.addAttribute("itemId",savedItem.getId());
        redirectAttributes.addAttribute("status",true);
        return "redirect:/basic/items/{itemId}";
    }

}

상품 등록 폼은 @GetMapping, @PostMapping 두 개로 받습니다.

@GetMapping은 /basic/items/add URL로 이동 시 addForm 뷰 템플릿을 호출하기 위해 사용하고,

@PostMapping은 /basic/items/add URL( 뷰템플릿 - /basic/addForm )에서 HTML 폼을 이용해 상품 정보 입력 후 등록할 때에 사용하기 위해 사용

뷰 템플릿

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta charset="utf-8">
        <link href="/Users/kdo6301/Desktop/item-service/src/main/resources/static/css/bootstrap.min.css"
              th:href="@{/css/bootstrap.min.css}"
              rel="stylesheet">
        <style>
            .container {
                max-width: 560px;
            } </style>
    </head>

    <body>

        <div class="container">

            <div class="py-5 text-center">
                <h2>상품 등록 폼</h2>
            </div>

            <h4 class="mb-3">상품 입력</h4>

            <form action="item.html" th:action method="post">
                <div>
                    <label for="itemName">상품명</label>
                    <input type="text" id="itemName" name="itemName" class="form-control" placeholder="이름을 입력하세요"> </div>
                <div>
                    <label for="price">가격</label>
                    <input type="text" id="price" name="price" class="form-control" placeholder="가격을 입력하세요">
                </div>

                <div>
                    <label for="quantity">수량</label>
                    <input type="text" id="quantity" name="quantity" class="form-control" placeholder="수량을 입력하세요">
                </div>

                <hr class="my-4">
                <div class="row">
                    <div class="col">
                        <button class="w-100 btn btn-primary btn-lg" type="submit">상품
                            등록</button> </div>
                    <div class="col">
                        <button class="w-100 btn btn-secondary btn-lg"
                                th:onclick="|location.href='@{/basic/items}'|"
                                onclick="location.href='items.html'" type="button">취소</button> </div>
                </div>
            </form>
        </div> <!-- /container -->

    </body>
</html>

여기서 사용한 속성 변경 th:action

HTML form에서 action에 값이 없으면 현재 URL에 데이터를 전송합니다
상품 등록 폼의 URL과 실제 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP메소드로 두 기능을 구분했습니다.
상품 등록 폼 : GET - /basic/items/add
상품 등록 처리 : POST - /basic/items/add
이렇게 하면 하나의 URL로 등록 폼과, 등록 처리를 깔끔하게 처리할 수 있습니다.

취소 버튼 클릭 시 /basic/items 로 이동

BasicItemController에서 상품 등록을 처리하는 컨트롤러를 알아봅시다.

v1 - @RequestParam으로 처리

@PostMapping("/add")
public String addItemV1(@RequestParam String itemName,
                        @RequestParam int price,
                        @RequestParam Integer quantity,
                        Model model)
{
    Item item = new Item();
    item.setItemName(itemName);
    item.setPrice(price);
    item.setQuantity(quantity);

    itemRepository.save(item);

    model.addAttribute("item",item);

    return "basic/item";
}

@RequestParam으로 addForm에서 post로 받은 itemName, price, quantity를 통해 item객체를 만들고 repository에 담고, 모델에 담은 뒤 basic/item 뷰템플릿을 호출합니다.

뷰템플릿 /basic/addForm (URL - basic/items/add) (좌) 에서 정보 입력 후 등록 버튼을 통해 POST 전송 후 화면 (우)

중요 : 여기서는 상품 상세에서 사용한 item.html 뷰템플릿을 그대로 재활용합니다.

v2 - @ModelAttribute 사용

@PostMapping("/add")
public String addItemV2(@ModelAttribute("item") Item item, Model model)
{
    log.info("item = {}",item);
    log.info("itemName = {} , itemPrice = {} , itemQuantity = {} ",
            item.getItemName(),item.getPrice(),item.getQuantity());
    itemRepository.save(item);
    model.addAttribute("item",item); // 생략 가능 
    
    return "basic/item";
}

@ModelAttribute를 사용하면 @RequestParam으로 변수 하나하나를 받아서 Item을 생성하는 과정을 생략할 수 있습니다.

마찬가지로 model에 객체를 담아 뷰템플릿 호출했습니다.

참고로

model.addAttribute("item",item) 생략이 가능합니다. @ModelAttribute는 Model에 ModelAttribute로 지정한 객체를 자동으로 넣어주는 기능이 있습니다.
@ModelAttribute("item") ▶︎ @ModelAttribute 로 변경도 가능합니다.
@ModelAttribute 자제를 생략도 가능하지만 권장하진 않음 - 명시적이지 않음
모델에 데이터를 담을 때는 이름이 필요한데 이 이름과 @ModelAttribute 에 지정한 Item item 이 같기 때문에 이런 경우에는 생략이 가능합니다.

상품 수정 - 타임리프

상품 수정 폼 컨트롤러

BasicItemController 에 추가

@GetMapping("/{itemId}/edit")
public String editForm(@PathVariable Long itemId, Model model)
{
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item",item);
    return "basic/editForm";
}

@PostMapping("/{itemId}/edit")
public String edit(@PathVariable Long itemId, @ModelAttribute Item item)
{
    itemRepository.update(itemId, item);
    return "redirect:/basic/items/{itemId}";
}

1. editForm

/basic/items/{itemId}/edit URL 호출 시 경로변수를 통해 itemId를 찾고 모델에 담은 후

basic/editForm 뷰 템플릿을 호출합니다.

2. edit

/basic/items/{itemId}/edit URL (뷰 템플릿은 basic/editForm) 에서 Post로 데이터를 보낼 때 동작합니다.
폼을 통해 입력한 정보를 Item에 담고 마찬가지로 경로변수 itemId를 통해 repository에 해당 id의 item의 정보를 모델에 담긴 Item의 정보로 업데이트합니다.
그리고 마지막에 뷰 템플릿을 호출하는 대신에 상품 상세화면으로 이동하도록 리다이렉트를 호출했습니다.
HTML 전송은 PUT, PATCH를 지원하지 않고, POST, GET만 사용할 수 있기 때문에 수정 작업에서 POST 방식을 사용했습니다.

스프링은 redirect:/...으로 편리하게 리다이렉트 지원합니다.

컨트롤러에 매핑된 @PathVariable의 값은 redirect에도 사용할 수 있습니다.

리다이렉션 참고 :

https://rlaehddnd0422.tistory.com/44#3xx%20(Redirection)%20-%20%EB%A6%AC%EB%8B%A4%EC%9D%B4%EB%A0%89%EC%85%98-1

HTTP 상태코드 / 1~5XX

상태코드 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx (Informational) : 요청이 수신되어 처리중 2xx (Successful) : 요청 정상 처리 3xx (Redirection) : 요청을 완료하려면 추가 행동

rlaehddnd0422.tistory.com

basic/editForm 뷰 템플릿

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link href="../css/bootstrap.min.css"
          th:href="@{/css/bootstrap.min.css}"
          rel="stylesheet"
    >
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="py-5 text-center"> <h2>상품 수정 폼</h2>
    </div>
    <form action="item.html" th:action method="post">
        <div>
            <label for="id">상품 ID</label>
            <input type="text" id="id" name="id" class="form-control"
                   value="1"
                   th:value="${item.id}"
                   readonly>
        </div>

        <div>
            <label for="itemName">상품명</label>
            <input type="text" id="itemName" name="itemName" class="form-control"
                   value="상품A"
                   th:value="${item.itemName}"
            >
        </div>

        <div>
            <label for="price">가격</label>
            <input type="text" id="price" name="price" class="form-control"
                   value="10000"
                    th:value="${item.price}">
        </div>
        <div>
            <label for="quantity">수량</label>
            <input type="text" id="quantity" name="quantity" class="form-control"
                   value="10"
                    th:value="${item.quantity}">
        </div>

        <hr class="my-4">
        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit">저장
                </button>
            </div>

            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='item.html'"
                        th:onclick="|location.href='@{/basic/items/{itemId}
                        (itemId=${item.id})}'|"
                        type="button">취소</button> </div>
        </div>
    </form>
</div> <!-- /container -->
</body>
</html>

등록 폼과 유사해서 특별히 짚고 넘어갈 부분이 없습니다.

PRG (Post/Redirect/Get)

사실 지금까지 진행한 상품 등록 처리 컨트롤러는 심각한 문제가 있습니다. 상품 등록을 완료하고 웹 브라우저의 새로고침 버튼을 눌러보ㅕ보면 상품이 계속해서 중복 등록되는것을 확인할 수 있습니다.

웹 브라우저의 새로고침은 마지막에 서버에 전송한 데이터를 다시 전송합니다.

상품 등록 폼에서 데이터를 입려갛고 저장을 선택하면 POST /add + 상품 데이터를 서버로 전송합니다.

이 상태에서 새로고침을 또 선택하면 마지막에 전송한 POST /add + 상품 데이터르 다시 전송하게 됩니다.

그래서 내용은 같고 ID만 다른 상품 데이터가 계속 쌓이게 됩니다.

이 문제를 어떻게 해결할 수 있을까요?

상품 저장 후에 뷰 템플릿으로 이동하는 것이 아니라, 상품 상세화면으로 리다이렉트를 호출해주면 됩니다.

@PostMapping("/add")
public String addItemV4(Item item)
{
    itemRepository.save(item);
    return "redirect:/basic/items/" + item.getId();
}

이런 문제 해결 방식을 PRG( POST -> Redirect -> GET) 방식 이라고 합니다.

하지만 여기서 item.getId()를 통해 URL에 변수를 더해서 사용하는 것은 URL 인코딩이 안되기 때문에 위험합니다.

다음에 설명하는 RedirectAttributes를 사용합시다.

RedirectAttributes

상품 저장 후 상품 상세화면으로 리다이렉트한 것 까지는 좋았습니다. 하지만 클라이언트 입장에서 저장이 잘 된 것인지 안 된 것인지 확신이 들지 않을 수 있기 때문에 저장이 잘 되었으면 상품 상세 화면에 "저장되었습니다" 라는 메시지를 보여주는 요구사항까지 추가해보겠습니다.

BasicItemController 에 추가

@PostMapping("/add")
public String addItemV6(Item item, RedirectAttributes redirectAttributes)
{
    Item savedItem = itemRepository.save(item);
    redirectAttributes.addAttribute("itemId",savedItem.getId());
    redirectAttributes.addAttribute("status",true);
    return "redirect:/basic/items/{itemId}";
}

리다이렉트 할 경우 간단히 status=true를 추가해봅시다. 그리고 뷰 템플릿에서 이 값이 있으면 "저장되었습니다." 라는 메시지를 출력해보겠습니다. 실행해보면 다음과 같은 리다이렉트 결과가 나옵니다.

localhost:8080/basic/items/3?status=true

RedirectAttributes를 사용하면

URL 인코딩도 해주고,

pathVariable과 쿼리 파라미터까지 처리해줍니다.

redirect:/basic/items/{itemid}
{itemId} 는 redirectAttribute에 추가한 itemId, 나머지는 쿼리파라미터로 처리 ?status=true

/basic/items/{itemId}로 리다이렉트시 /basic/items/{itemId} URL 호출하면


@GetMapping("/{itemId}")
public String item(@PathVariable Long itemId, Model model)
{
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item",item);
    return "basic/item";
}

아이디를 찾고 모델에 담은 후 basic/item 뷰템플릿을 호출합니다.

basic/item 뷰템플릿의 상품상세 아래에 메시지를 추가하겠습니다.


<!--추가-->
<h2 th:if="${param.status}" th:text="'저장 완료'"></h2>

th:if는 해당 조건이 참이면 실행하는 타임리프 조건문입니다.
${param.status}는 타임리프에서 쿼리파라미터를 편리하게 조회할 수 있는 기능으로 원래는 컨트롤러에서 모델에 직접 담고 값을 꺼내야 하지만 쿼리 파라미터는 자주 사용하기 떄문에 타임리프에서 직접 지원합니다.

저작자표시

'📕 Backend > Thymeleaf Template' 카테고리의 다른 글

Thymeleaf - 스프링 통합 기능 (0)	2023.03.19
Thymeleaf 기능 - 템플릿 조각, 템플릿 레이아웃 (0)	2023.03.17
Thymeleaf 기능 - 기본 (0)	2023.03.17

블로그의 정보

Study Repository

rlaehddnd0422

Spring MVC - 웹 페이지 만들기 with Thymeleaf

요구사항

상품 도메인 모델

상품 관리 기능

상품 도메인 개발

상품 서비스 HTML

서비스 HTML - static

상품 목록 - items.html

상품 상세 - item.html

상품 등록 - addForm.html

상품 편집 - editForm.html

상품 전체 목록 조회 - 타임리프

컨트롤러 로직

테스트용 데이터 추가

뷰 템플릿 - /basic/items

1. 상품등록 - th:onclick

2. 상품 초기화 - th:onclick

3. 상품 목록 조회 - th:each(반복 출력)

상품 상세 조회 - 타임리프

컨트롤러 로직

뷰 템플릿

상품 등록 - 타임리프

뷰 템플릿

BasicItemController에서 상품 등록을 처리하는 컨트롤러를 알아봅시다.

상품 수정 - 타임리프

상품 수정 폼 컨트롤러

basic/editForm 뷰 템플릿

PRG (Post/Redirect/Get)

RedirectAttributes

'📕 Backend > Thymeleaf Template' 카테고리의 다른 글

블로그의 정보

활동하기

티스토리툴바

요구사항

상품 도메인 모델

상품 관리 기능

상품 도메인 개발

상품 서비스 HTML

서비스 HTML - static

상품 목록 - items.html

상품 상세 - item.html

상품 등록 - addForm.html

상품 편집 - editForm.html

상품 전체 목록 조회 - 타임리프

컨트롤러 로직

테스트용 데이터 추가

뷰 템플릿 - /basic/items

1. 상품등록 - th:onclick

2. 상품 초기화 - th:onclick

3. 상품 목록 조회 - th:each(반복 출력)

상품 상세 조회 - 타임리프

컨트롤러 로직

뷰 템플릿

상품 등록 - 타임리프

뷰 템플릿

BasicItemController에서 상품 등록을 처리하는 컨트롤러를 알아봅시다.

상품 수정 - 타임리프

상품 수정 폼 컨트롤러

basic/editForm 뷰 템플릿

PRG (Post/Redirect/Get)

RedirectAttributes

'📕 Backend > Thymeleaf Template' 카테고리의 다른 글

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바