요구사항 분석
1. 모델 및 기능 명세
| 상품 도메인 모델 | 상품 관리 기능 |
| 상품 아이디 상품 명 가격 수량 |
상품 목록 상품 상세 상품 등록 상품 수정 |
2. 서비스 화면
3. 서비스 제공 흐름
※ 이렇게 요구사항과 도메인, 화면이 어느정도 정리되면 웹 퍼블리셔, 백엔드 개발자가 업무를 나눠 진행함
• 디자이너: 요구사항에 맞도록 디자인 후 디자인 결과물을 웹 퍼블리셔에게 전달.
• 웹 퍼블리셔: 디자이너에게 받은 디자인을 기반으로 HTML, CSS를 만들어 개발자에게 전달
• 백엔드 개발자: HTML화면을 받기전까지 시스템 설계및 핵심 비즈니스 모델을 개발한다. 이후 HTML을 전달받으면 뷰 템플릿으로 변환 후 화면을 그리고 제어
상품 도메인 개발
1. 상품 도메인
1.1 필요한 상품 도메인 필드
• 상품 아이디
• 상품 명
• 가격
• 수량
1.2 상품 도메인 필드 코드
package hello.itemservice.domain.item;
import lombok.Data;
@Data
public class Item {
private Long id;
private String itemName;
private Integer price;
private Integer quantity;
public Item(String itemName, Integer price, Integer quantity) {
this.itemName = itemName;
this.price = price;
this.quantity = quantity;
}
}
2. 상품 저장소
2.1 필요한 상품 저장소 기능
• 상품 목록
• 상품 상세
• 상품 등록
• 상품 수정
2.2 상품 저장소 코드
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 {
// concurrenthashmap으로 생성해야 thread-safe하기 때문에 실제로는 그냥 HashMap을 안씀
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() {
store.clear();
sequence = 0L;
}
}• 기본적인 상품 저장, 조회, 목록조회, 수정 기능을 추가
• 개발환경에서 리포지토리내에 store 콜렉션을 초기화 해주기 위해 clearStore를 구현
• 아이디는 전역변수로 선언된 sequance를 활용해 할당해줌 (멀티스레드 환경에서 이슈가 생길 수 있음)
• 저장소는 아이디와 상품도메인 Item으로 HashMap 사용(멀티스레드 환경에서 이슈가 생길 수 있음)
상품 목록 구현
1. 상품 목록 controller 구현
package hello.itemservice.web.basic;
import hello.itemservice.domain.item.Item;
import hello.itemservice.domain.item.ItemRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.PostConstruct;
import java.util.List;
@Controller
@RequestMapping("/basic/items")
// 롬복(Lombok)에서 제공하는 애노테이션으로 final이 붙은 멤버 변수만 사용해 생성자를 자동으로 만들어줌
// 생성자를 통해 해당 멤버변수를 자동 주입해줌
@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";
}
// 컨트롤러만 구현하고 테스트를 하면 노출할 상품이 없기 때문에 프로젝트 로드시
// 해당 빈의 의존관계가 모두 주입된 후 초기화 용도로 호출
// 첨부된 메소드 init()을 수행해 2개의 아이템을 미리 추가
@PostConstruct
public void init() {
itemRepository.save(new Item("itemA", 10000, 10));
itemRepository.save(new Item("itemB", 20000, 20));
}
}• @PostConstructor
- 컨트롤러만 구현하고 테스트를 하면 노출할 상품이 없기 때문에 프로젝트 로드시 해당 빈의 의존관계가 모두 주입된 후 초기화 용도로 호출됨
- 첨부된 메소드 init()을 수행해 2개의 아이템을 미리 추가
• @RequiredArgsConstructor
- 롬복(Lombok)에서 제공하는 애노테이션으로 final이 붙은 멤버 변수만 사용해 생성자를 자동으로 만들어줌
- 생성자를 통해 해당 멤버변수를 자동 주입
2. 상품 목록 view 구현
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}"
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>
<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}">상품 가격</td>
<td th:text="${item.quantity}">수량</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>
타임리프 사용법 간단히 알아보기
1. 타임리프 사용선언
• 타임리프를 HTML 페이지에서 사용하기 위해선 다음과같이 html 태그에 작성해줘야 함.
<html xmlns:th="http://www.thymeleaf.org">
2. 속성 변경 - th:href
th:href="@{/css/bootstrap.min.css}"• 기존 href="value1"를 th:href="value2"로 변경해줌
• 타임리프 뷰 템플릿을 거치면 원래 값을 th:xxx 으로 변경. 만약 값이 없다면 새로 생성.
• HTML을 그대로 볼 때는 href 속성이 그대로 사용되고 뷰 템플릿을 거치면 th:href의 값이 href로 대치됨•
• 대부분의 HTML 태그의 속성을 th:xxx 로 변경할 수 있음
3. 타임리프 핵심
• th:xxx부분은 서버사이드에서 렌더링되고 기존 HTML 태그 속성을 대치함
• 만약 th:xxx이 없으면 기존 html의 xxx속성이 그대로 사용됨
• HTML파일을 그냥 탐색기로 열어도 th:xxx 속성을 웹 브라우저에서는 읽지 못하기에 무시하고 기본 xxx속성을 읽어서 웹페이지는 깨지지않고 렌더링됨
※ 이를 네추럴 템플릿이라고 함.
4. URL링크 표현식 - @{...}
th:href="@{/css/bootstrap.min.css}"• URL 링크를 사용하는 경우 @{...}를 사용하는데 이를 URL링크 표현식이라 함.
• URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함함.
5. 리터럴 대체 문법 - |...|
※ 타임리프에서 문자와 표현식 등을 합쳐서 쓰고자 할때 사용
th:onclick="|location.href='@{/basic/items/add}'|"
• 타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 함 (+ 연산자)
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
• 다음과 같이 리터럴 대체 문법을 사용하면, 더하기 연산자 없이 편리하게 사용할 수 있음.
<span th:text="|Welcome to our application, ${user.name}!|">
※ 상세 설명
• 만들고 싶은 코드
location.href='/basic/items/add'
• 리터럴 대체 문법 없이 그냥 사용하면 문자와 표현식을 각각 따로 더해서 사용해야 하므로 다음과 같이 복잡해짐.
th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''"
• 리터럴 대체 문법을 사용하면 다음과 같이 편리하게 사용할 수 있음
th:onclick="|location.href='@{/basic/items/add}'|"※ 기존에는 자바의 문자열 결합처럼 +연산자와 escape 기호를 사용해 하나하나 작성해야했지만,
리터럴 대체 문법을 사용하면 자바스크립트의 백틱(``)처럼 편리하게 사용 가능.
6. th:each 반복 출력
<tr th:each="item : ${items}">• 반복은 th:each를 사용
- 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있음
- 컬렉션의 수 만큼 <tr>...</tr> 이 하위 태그를 포함해서 생성.
7. 변수 표현식 - ${...}
<td th:text="${item.price}">10000</td>• 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있음.
내부적으로 item.getPrice() 프로퍼티 접근법을 사용함.
8. URL 링크 표현식2 - @{...}
th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
<!-- 위와 같은 코드. 리터럴 대체 문법 활용가능. -->
th:href="@{|/basic/items/${item.id}|}"• 경로를 템플릿처럼 사용할 수 있다.
• 경로변수({itemId}) 뿐 아니라 쿼리 파라미터도 생성할 수 있음
ex) th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
생성 링크 - http://localhost:8080/basic/items/1?query=test
• 리터럴 대체 문법을 사용해 간단하게 사용할 수도 있음
상품 상세
1. 상품 상세 controller 구현
@GetMapping("/{itemId}")
public String item(Model model, @PathVariable Long itemId) {
Item item = itemRepository.findById(itemId);
model.addAttribute("item", item);
return "/basic/item";
}• PathVariable로 넘어온 아이템 아이디로 상품을 조회 후 모델에 추가해 뷰 템플릿을 호출
2. 상품 상세 view 구현
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}" 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"
value="상품A" th:value="${item.itemName}" readonly>
</div>
<div>
<label for="price">가격</label>
<input type="text" id="price" name="price" class="form-control"
value="10000" th:value="${item.price}" readonly>
</div>
<div>
<label for="quantity">수량</label>
<input type="text" id="quantity" name="quantity" class="form-control"
value="10" th:value="${item.quantity}" 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'"
th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
type="button">상품 수정
</button>
</div>
<div class="col">
<button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'"
th:onclick="|location.href='@{/basic/items}'|"
type="button">목록으로
</button>
</div>
</div>
</div> <!-- /container -->
</body>
</html>• th:value th:value="${item.id}"
- 모델에 있는 item 정보를 획득하고 프로퍼티 접근법 ( item.getId() )으로 출력
- value 속성을 th:value 속성으로 변경
상품 등록 폼
1. 상품 등록 controller 구현
@GetMapping("/add")
public String addForm() {
return "basic/addForm";
}• 해당 컨트롤러에서는 단순하게 뷰 템플릿만 호출해서 상품 등록페이지로 이동만 담당
2. 상품 등록 view 구현
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}" 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="formcontrol"
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="formcontrol"
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=item.html"
th:onclick="|location.href='@{/basic/items}'|" 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로 등록 폼과, 등록 처리를 깔끔하게 처리할 수 있음.
상품 등록 처리 : @ModelAttribute
※ HTML Form, HTTP 메서드는 POST 방식을 사용해 데이터를 전송
• Content-Type: application/x-www-form-urlencoded
• 메세지 바디에 쿼리 파라미터 형식으로 전달
- itemName=name&price=10000&quantity=10
1. 상품 등록 처리 controller - @RequestParam로 처리 v1
@PostMapping("/add")
public String saveLegacy(@RequestParam String itemName,
@RequestParam int price,
@RequestParam Integer quantity,
Model model) {
Item item = new Item();
item.setItemName(itemName);
item.setPrice(price);
item.setQuantity(quantity);
Item save = itemRepository.save(item);
model.addAttribute("item", save);
return "basic/item";
}• @RequestParam으로 요청 파라미터 데이터를 해당 변수에 각각 받는다
• Item 객체를 생성해 전달받은 파라미터로 값을 세팅한 뒤 itemRepository 저장.
• 저장된 item을 Model 객체에 담아 뷰에 전달
2. 상품 등록 처리 controller - @ModelAttribute로 처리 v2
※ 위 방법은 간단하게 아이템을 저장하는 로직임에도 불구하고 코드가 너무 김.
전달받는 3개의 요청 파라미터도 결국 하나의 객체를 만들기 위한 파라미터들이기에 이를 한번에 매핑시켜 객체로 받을수있는 @ModelAttribute애노테이션이 있음.
@PostMapping("/add")
// 요청 파라미터를 프로퍼티 접근법으로 Item 객체를 생성 하고(V1의 setXxx처럼)
// model에 넣어줌(@ModelAttribute("item")의 "item"이라는 이름으로)
public String saveV2(@ModelAttribute("item") Item item, Model model) {
itemRepository.save(item);
// model.addAttribute("item", item); // 자동 추가 생략가능
return "basic/item";
}• @ModelAttribute 애노테이션을 활용해 요청 파라미터를 처리해줌.
- Item 객체를 생성 후, 요청 파라미터의 값을 프로퍼티 접근법(setXxx)으로 입력해줌
• @ModelAttribute - Model 자동 추가
- 위 코드를 보면 Model 객체에 저장된 item을 추가해주는 로직을 주석처리함.
- Model에 @ModelAttribute로 지정한 객체를 자동으로 넣어줌
• 모델에 데이터를 담을때는 이름이 필요한데 이름은 @ModelAttribute 애노테이션에 지정한 속성("item")을 사용함
- 만약 다음과 같이 @ModelAttribute의 이름을 다르게 지정하면 다른 이름으로 모델에 포함된다.
이름을 hello 로 지정 하면 → @ModelAttribute("hello") Item item
모델에 hello 이름으로 저장 → model.addAttribute("hello", item)
3. 상품 등록 처리 controller - @ModelAttribute 이름 생략 처리 v3
@PostMapping("/add")
// @ModelAttribute의 이름을 넣지 않으면 클래스명(Item)의 첫글자만 소문자로 변경해서 model.addAttribute에 등록함
// Ex) @ModelAttribute HelloItem item → model.addAttribute("helloItem", item);
public String saveV3(@ModelAttribute Item item, Model model) {
itemRepository.save(item);
// model.addAttribute("item", item); // 자동 추가 생략가능
return "basic/item";
}• @ModelAttribute 애노테이션에서 name 속성을 생략할수도 있음
- 생략하면 모델에 저장될 때 클래스명에서 첫 글자를 소문자로 변경해 등록함.
ex) @ModelAttribute HelloWord helloWord이면 Model.addAttribute("helloWord", helloWord) 와 같다.
4. 상품 등록 처리 controller - @ModelAttribute 전체 생략 처리 v4
@PostMapping("/add")
// @ModelAttribute 생략가능
public String saveV4(Item item) {
itemRepository.save(item);
return "basic/item";
}• @ModelAttribute 애노테이션도 생략이 가능
- 대상 객체가 모델에 자동등록되는 기능도 정상 동작
- 객체가 아니라 기본타입(String, int ...)이면 @RequestParam이 동작
상품 수정
1. 상품 수정 폼 이동 controller 구현
@GetMapping("/{itemId}/edit")
public String editForm(@PathVariable Long itemId, Model model) {
Item item = itemRepository.findById(itemId);
model.addAttribute("item",item);
return "basic/editForm";
}• 수정에 필요한 정보를 조회해서 model에 담고, 수정용 폼 뷰를 호출
2. 상품 수정 폼 view 구현
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}" 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="formcontrol"
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="formcontrol"
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>
3. 상품 수정 처리 controller 구현
@PostMapping("/{itemId}/edit")
public String edit(@PathVariable Long itemId, @ModelAttribute Item item) {
itemRepository.update(itemId, item);
return "redirect:/basic/items/{itemId}";
}• return "redirect:/basic/items/{itemId}"
- 상품 수정은 마지막에 뷰 템플릿 호출이 아닌 상품 상세 화면으로 이동하도록 리다이렉트를 호출함
- 스프링에서는 redirect:/... 를 사용해 편리하게 리다이렉트를 지원함
(만약 스프링이 아니라면 응답 상태코드를 3xx로 설정해서 동작시켜야 함.)
- 컨트롤러에 매핑된 @PathVariable의 값인 itemId가 그대로 사용되어 매핑됨
PRG (Post/Redirect/Get)
1. 상품 등록 페이지에서 상품 등록 시 발생 할 수 있는 이슈
@PostMapping("/add")
// @ModelAttribute 생략가능
public String saveV4(Item item) {
itemRepository.save(item);
return "basic/item";
}
• 상품등록페이지 및 수정페이지에서 등록이 완료된상태에서 새로고침을 하면 마지막으로 요청했던 URL 경로로 재요청을 하게 됨
• 마지막에 Post 방식으로 상품등록을 했다면 해당 상품등록 요청이 재전송되어 중복등록되는 치명적인 문제가 생김.
• Post메서드로 요청이 들어온 /add Url을 처리하여 itemRepository에 저장 후 바로 view를 보여줌.
• 브라우저는 Url 정보와 post메서드로 보낸 데이터를 그대로 가지고 있어서 새로 고침 시 계속 그 url과 데이터를 가지고 다시 /add Url을 처리함.
2. PRG : Post/Redirect/Get을 이용하여 해결
• 웹 브라우저의 새로 고침은 마지막에 서버에 전송한 URL로 데이터를 다시 전송함
• 새로 고침 문제를 해결하려면 상품 저장 후에 뷰 템플릿으로 이동하는 것이 아니라, 상품 상세 화면으로 리다이렉트로 다른 URL(/basic/items/{id})을 호출해주면 됨
• 웹 브라우저는 리다이렉트의 영향으로 상품 저장 후에 상품 상세 화면으로 이동함
• 마지막에 호출한 내용이 상품 상세 화면인 GET /items/{id} 가 됨.
• 이후 새로고침을 해도 GET 요청은 멱등성을 보장하기에 새로 고침 문제를 해결할 수 있음.
3. PRG 적용한 상품 등록 controller 코드
@PostMapping("/add")
public String saveV5(Item item) {
itemRepository.save(item);
return "redirect:/basic/items/"+item.getId();
}• return "redirect:/basic/items/" + item.getId();
- URL에 변수를 더해 사용하는 것은 URL 인코딩이 안되기에 위험함.
※ RedirectAttributes를 사용해서 해결 가능
4. PRG 적용한 상품 등록 controller 코드 - RedirectAttributes 적용
// RedirectAttributes 적용(URL 인코딩 기능, @PathVariable 기능, 쿼리 파라미터 추가 기능 활용가능)
@PostMapping("/add")
public String saveV6(Item item, RedirectAttributes redirectAttributes) {
Item savedItem = itemRepository.save(item);
// redirect와 관련된 속성을 넣어줌
redirectAttributes.addAttribute("itemId", savedItem.getId());
// 치환자가 없는 redirectAttributes attribute는 쿼리 파라미터 형식으로 들어감
redirectAttributes.addAttribute("status", true);
// redirectAttributes에 넣은 "itemId"값이 @PathVariable처럼 치환이 가능
return "redirect:/basic/items/{itemId}";
}• RedirectAttributes : URL 인코딩도 해주고, pathVarible , 쿼리 파라미터까지 처리해줌
• redirect:/basic/items/{itemId}
- redirectAttributes.addAttribute("itemId", savedItem.getId());
※ return에 치환자인 {itemId}에 있으니 pathVariable 바인딩됨
- redirectAttributes.addAttribute("status", true);
※ return에 치환자 없는 나머지는 쿼리 파라미터로 처리됨 ?status=true
• url 리다이렉트 결과 : http://localhost:8080/basic/items/3?status=true
5. view 템플릿에 ?status=true 파라미터로 저장 완료 메세지 출력
<div class="container">
<div class="py-5 text-center">
<h2>상품 상세</h2>
</div>
<!-- 추가 -->
<h2 th:if="${param.status}" th:text="'저장 완료!'"></h2>• th:if : 해당 조건이 참이면 실행
• ${param.status} : 타임리프에서 쿼리 파라미터를 편리하게 조회하는 기능
• 원래는 컨트롤러에서 모델에 직접 담고 값을 꺼내야 하지만, 쿼리 파라미터는 자주 사용해서 타임리프에서 직접 지원함
• 상품 목록에서 상품 상세로 이동한 경우에는 ?status=true파라미터가 없기 때문에 해당 메시지가 출력되지 않음
'일상의 흔적 > Study' 카테고리의 다른 글
| 인프런 스프링 MVC 2 (백엔드 웹개발 활용 기술) : Thyemleaf 스프링통합과 폼 - 2 (0) | 2023.03.19 |
|---|---|
| 인프런 스프링 MVC 2 (백엔드 웹개발 활용 기술) : Thyemleaf 기본기능 - 1 (0) | 2023.03.18 |
| 인프런 스프링 MVC 1 (웹개발 핵심 기술) : 스프링 MVC 기본기능 - 6 (0) | 2023.03.17 |
| 인프런 스프링 MVC 1 (웹개발 핵심 기술) : 스프링 MVC 구조 - 5 (0) | 2023.03.17 |
| 인프런 스프링 MVC 1 (웹개발 핵심 기술) : MVC 프레임워크 만들기 - 4 (0) | 2023.03.16 |